בונים ביחד תבנית וורדפרס – פרק 11

ברוכים הבאים לפרק מספר 11 במדריך – בונים ביחד תבנית וורדפרס. בפרק זה נבנה ביחד את מרכז דף הבית כולל את הסלוגן אשר נמצא בראש התבנית וגם את הLOOP של וורדפרס אשר יחזיר את הפוסטים האחרונים באתר שלנו!

  • אהבתם? שתפו!

ניווט מהיר בין הפרקים:

בונים את מרכז דף הבית – יוצאים לדרך!

ראשית, אני שוב מזכיר שאם הגעתם לחלק זה במדריך מבלי לקרוא את שאר חלקי המדריך אני ממליץ כי תשתמשו בממשק הניווט כדי לעבור לחלק הראשון במדריך כך שתהיו מעודכנים ומוכנים לשלבים מתקדמים אלו.

תזכורת קטנה

לפני שנתחיל לבנות את דף הבית של התבנית אני ממליץ כי תבקרו בפרק ברוכים הבאים ועוד ואפילו תשאירו אותו פתוח בטאב אחר כדי שתוכלו להתרענן עם המראה העיצובי וסדר האלמנטים (מבחינת מבנה) אליו אנו שואפים להגיע במדריך זה.

סדר הפעולות:

1. נכין שדה קלט עבור הסלוגן בראש הדף 2. נכין DIV במיקום בו נרצה להציג את הסלוגן 3. נעצב את הסלוגן מבחינת פונט, צבע ומיקום 4. נפרסם מספר פוסטים לניסיון 5. נעים להכיר – הלופ של וורדפרס 6. תקציר פוסט מותאם לאורך שאנו רוצים 7. נכין את הלופ הבסיסי עבור דף הבית 8. עושים סדר בעזרת CSS וtimthumb 9. מוסיפים את שם הכותב, תאריך וכמות תגובות 10. נעצב את הLOOP הבסיסי של דף הבית

 

מכיוון ש… פרק זה במדריך יהיה ארוך ומקיף חילקתי את הדף לחלקים ולכן פשוט לחצו על הנושא הרצוי

נכין שדה קלט עבור הסלוגן בראש הדף +

רגע לפני שנגיע אל הפונקציה חשוב שנבין את הסיבה… כפי שאתם יודעים שגיב SEO מספקת שירותי קידום אתרים בגוגל ולכן אנו שמים גם דגש על תבנית "נכונה" מבחינת קידום אתרים. אנו נכין שדה בו נוכל להוסיף טקסט עבור הסלוגן שאיננו מופיע בשום מקום אחר באתר… למי שלא מכיר את דף האפשרויות של וורדפרס הגיע הזמן להיכנס אל הגדרות > כללי

פתחו את קובץ function.php והוסיפו את הקוד הבא

מה הקוד עושה?
למידע נוסף לחצו כאן

  • מוסיף שדה טקסט לדף האפשרויות הכללי של וורדפרס
  • מאפשר לשמור את שדה הקלט החדש שלנו
  • מאפשר לנו לקרוא לערך שבתוכו מדף הבית של וורדפרס
	$new_general_setting = new new_general_setting();
	 
	class new_general_setting {
		function new_general_setting( ) {
			add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
		}
		function register_fields() {
			register_setting( 'general', 'slogan_sentence', 'esc_attr' );
			add_settings_field('slogan_sentx', '<label for="slogan_sentence">'.__('Slogan Sentence' , 'sagive' ).'</label>' , array(&$this, 'fields_html') , 'general' );
		}
		function fields_html() {
			$value = get_option( 'slogan_sentence', '' );
			echo '<input type="text" id="slogan_sentence" name="slogan_sentence" value="' . $value . '" style="width: 65%" />';
		}
	}
	
נכין DIV במיקום בו נרצה להציג את הסלוגן +

בחלק זה נכין מיכל (DIV) ונטמיע פקודת PHP פשוטה אשר תאפשר לנו להחזיר את המידע משדה הסלוגן שהכנו בפונקציה הקודמת. זכרו (לאחר שהכנסתם את הפונקציה בחלק הקודם) להיכנס לממשק הניהול שלכם ולהכניס שורת סלוגן כלשהי… להדגמה קצרה לחצו כאן

נטמיע את הפקודה

  • פתחו את הקובץ index.php
  • מצאו את המיכל (div) עם הקלאס header
  • ממש לאחר שהוא נגמר נוסיף את הקריאה לסלוגן

לפני:

	<!--===STR===== HEADER ===========-->
	<div class="header">
		<div class="logo">
			<!--=== פקודה זאת תחזיר את שם האתר ===-->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div class="topMenu">
			<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?>
		</div>
	</div>
	<!--===END===== HEADER ===========-->
	

אחרי:

	<!--===STR===== HEADER ===========-->
	<div class="header">
		<div class="logo">
			<!--=== פקודה זאת תחזיר את שם האתר ===-->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div class="topMenu">
			<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?>
		</div>
	</div>
	<!--===END===== HEADER ===========-->

	
<!--===STR===== SLOGAN ===========--> <div class="sloganBox"> <?php echo get_option('slogan_sentence'); ?> </div> <!--===END===== SLOGAN ===========-->

  • רעננו את האתר שלכם. התוצר המוגמר צריך להראות בשלב זה כך.
נעצב את הסלוגן מבחינת פונט, צבע ומיקום +
אם פעלתם על פי סדר הפעולות האתר שלכם אמור להראות כך. כעת הגיע הזמן להוסיף הגדרות עיצוב (css) כדי שהסלוגן של התבנית שלנו תראה כפי שהיא נראית בבקובץ הPSD עליו אנו מבססים את התבנית.

אם עקבתם אחרי המדריך אתם בוודאי (אני מקווה) זוכרים את פרק 5 – יצירת תשתית עיצובית. בפרק 5 הכנו קובץ reset.css אשר מכיל בתוכו המון קיצורי קוד עבור הגדרות CSS נפוצות וכעת נעשה בהן שימוש ראשון.

צעד א

  • פתחו את הקובץ index.php
  • מצאו את המיכל (div) של הסלוגן
  • שנו את הקלאס שלו כפי שמוצג בדוגמה

לפני:

	<!--===STR===== SLOGAN ===========-->
	<div class="sloganBox">
		<?php echo get_option('slogan_sentence'); ?>
	</div>
	<!--===END===== SLOGAN ===========-->
	

אחרי:

	<!--===STR===== SLOGAN ===========-->
	<div class="sloganBox mt3 pt2 pb2 center fs26 mr1 ml1">
		<?php echo get_option('slogan_sentence'); ?>
	</div>
	<!--===END===== SLOGAN ===========-->
	

משמעות השינויים בקלאס: הוספנו מספר קלאסים אשר יחילו הגדרות שונות על המיכל (ה-DIV) של הסלוגן. כעת עלינו להוסיף הגדרות ייחודיות לסלוגן בצורה ישירה בקובץ style.css…

מי שרוצה ממש להבין מה עושה כל קלאס מבחינת הערך שלו / הפקודה שלו בCSS יכול לבקר בקובץ הreset.css של התבנית שלנו. באופן כללי הפקודות דיי הגיוניות – לדוגמה הפקודה mt3 משמעותה margin-top: 3% וכן הלאה.

צעד ב

  • פתחו את הקובץ style.css
  • נגלול עד לסוף הדף וניצור הערה עבור הסלוגן
  • מתחת להערה ניצור את הגדרות עיצוביות (css) עבור הDIV של הסלוגן
  • התוצר המוגמר כלומר הקוד וההערה יראו כך
	/************************************
	**	SLOGAN
	************************************/
	.sloganBox {
		border-bottom: 7px double #D6D5D1;
		border-top: 7px double #D6D5D1;
		color: #151515;
	}
	

  • רעננו את האתר שלכם. בשלב זה האתר שלכם אמור להראות כך.

נפרסם מספר פוסטים לניסיון +

בשלב הבא נעבוד על הLOOP של דף הבית, רגע מרגש לכל בונה אתר ראשון בוורדפרס! בכדי לעצב את המראה של המידע בדף הבית נקח רגע כדי לפרסם כמה פוסטים לדוגמה אשר יוצגו בלופ של דף הבית.

לפני שנתחיל לפרסם פוסטים:

אם ניהלתם אתר וורדפרס בעבר אתם בוודאי מכירים את התכונה אשר נקראת תמונה ראשית. תכונה זאת איננה מגיעה עם כל התבניות ויש להגדיר אותה או ליתר דיוק להפעיל אותה עבור סוג התוכן לו אנו מבקשים לשייך תמונות פוסט ראשיות.
תמונת פוסט ראשית

נוסיף תמיכה בתמונת פוסט ראשית

  • פתחו את קובץ functions.php
  • הוסיפו את שורת הקוד הבאה
add_theme_support( 'post-thumbnails', array('post') );

נפרסם מספר פוסטים

כעת הגיע הזמן לפרסם מספר פוסטים לניסיון… אני רוצה להניח שאתם יודעים כיצד לעשות זאת ואם לא אני באמת חושב שאתם במדריך הלא נכון. בכל מקרה הנה סרטון קצרצר בו אני עושה זאת להדגמה.

  • חשוב: חשוב לטעון תמונה פוסט ראשית גדולה לצרכיי נסיון… הורידו תמונה לדוגמה
  • חשוב: חשוב ליצור לפחות 12 פוסטים לדוגמה למטרות שונות בהמשך המדריך

נעים להכיר - הלופ של וורדפרס +

הגענו ללב של דף הבית! בחלק זה נבנה את הLOOP של דף הבית אבל רגע לפני הגיע הזמן ללמוד כמה דברים על הLOOP של וורדפרס כדי להבין מה בדיוק אנחנו עושים.

הלופ של וורדפרס

הLOOP הוא קוד PHP של מערכת וורדפרס שתפקידו להצגת פוסטים. על ידי שימוש בLOOP קובעת וורדפרס איזה מידע להחזיר לפוסט / עמוד הנוכחי.

ניתן להשתמש במבנה ברירת המחדל של הLOOP בהתאם לסוג התוכן בו אנו נמצאים או לבנות LOOP מותאם שיחזיר פוסטים / מידע מתוך פוסטים שאנו מבקשים להציג.

הלופ של וורדפרס מחזיר מערך מידע עבור כל פוסט שהוא מתבקש להציג ואנו יכולים לפנות אל אותה פיסת מידע בעזרת פקודה מובנית של וורדפרס.

תסריט לדוגמה

אנו בקטגוריה של אתר. בקטגוריה זאת 5 פוסטים

רוצים ללמוד עוד על הLOOP של וורדפרס?

הדגמה של הLOOP

תקציר פוסט מותאם לאורך שאנו רוצים +

בחלקים שונים ברחבי האתר אנו נבקש להציג תקציר של הפוסט באורך שונה בהתאם למיקום שלו. דוגמה לכך היא העובדה שהפוסט החדש ביותר בדף הבית מציג תקציר ארוך יותר משאר הפוסטים בדף הבית.

נבנה פונקציה אשר תעזור לנו להחזיר תקציר מותאם

  • פתחו את קובץ functions.php
  • הוסיפו את הפונקציה הבאה בתחתית הדף
/***************************************************************
** DYNAMIC EXCERPT
***************************************************************/
// Variable excerpt length.
function dynamic_excerpt($length) { // Variable excerpt length. Length is set in characters
	global $post;
	$text = $post->post_excerpt;
	if ( '' == $text ) {
	$text = get_the_content('');
	$text = apply_filters('the_content', $text);
	$text = str_replace(']]>', ']]>', $text);
	}
	$text = strip_shortcodes($text); // optional, recommended
	$text = strip_tags($text); // use ' $text = strip_tags($text,'<p><a>'); ' if you want to keep some tags
	$text = mb_substr($text,0,$length).' ...';
	echo $text; // Use this is if you want a unformatted text block
	//echo apply_filters('the_excerpt',$text); // Use this if you want to keep line breaks
}

  • הערה: התאמתי פונקציה זאת לעבודה עם עברית!

נכין את הלופ הבסיסי עבור דף הבית +

בחלק זה ניגש אל הקוד של בניית הLOOP של וורדפרס. אנו נבנה LOOP מותאם במבנה אשר מתאים לקובץ הPSD עליו אנו מבססים את תבנית הוורדפרס שאנו בונים.

מצד שמאל:

התמונה המוצגת היא המחשה של הLOOP אשר נבנה בדף הבית שלנו. הפוסט האחרון (מבחינה כרונולוגית) יהיה מודגש והשאר קטנים יותר.

המבנה הנ"ל אומר כי אנו נצטרך ליצור עיצוב מעט שונה לפוסט האחרון ועיצוב אחר לשאר הפוסטים. בדוגמה זאת מוצגים 5 פוסטים אחרונים אך נוכל להציג כמה שנרצה!

המבנה הבסיסי של הלופ שלנו

ניגשים לקוד:

  • פתחו את קובץ index.php

אתרו את הקוד הבא

	<div class="homeLoop">
		<div class="newestPost"></div>
		<div class="recentPost"></div>
	</div>
	

 

החליפו אותו בקוד הבא

	<div class="homeLoop">
		<div class="innerLoop">
			<?php $count = 0; ?>

			<?php 
			$homeArgs = array(
				'posts_per_page' => 5
			);
			$homeQuery = new WP_Query( $homeArgs );
			while ( $homeQuery->have_posts() ) : $homeQuery->the_post();
			?>
				<div class="post">
				<?php 
				if ($count < 1){ 
				
					// LOOP STRUCTURE FOR OUR LATEST POST
				?>
					<h2 class="newestPost"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
					<div class="postMeta">
						<?php echo __('By').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; ?><a href="<?php comments_link(); ?>"><?php comments_number( __('no responses', 'sagive'), __('one response', 'sagive'), __('% responses', 'sagive') );echo '</a>'; ?>
					</div>
					<?php
						echo '<div class="postThumb">';
						$thumbUrl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
						if($thumbUrl) {
							echo '<img src="'.$thumbUrl.'" alt="'.get_the_title().'" />';
						}
						else {
							echo '<img src="'.get_bloginfo('template_url').'/images/nopost-image-home.jpg" alt="'.get_the_title().'" />';
						}
						echo '</div>';

						echo '<div class="newsetPostExcerpt mt3 mb5 pb3 fs14">';
						dynamic_excerpt(650); 
						echo '</div>';
						
						echo '<div class="rpBorder mt5 pb2">
							<div></div>
							<div></div>
						</div>';
					} 
				else { 
					// LOOP STRUCTURE FOR OTHER RECENT POSTS
					
					// ASSING CLASS EVERY 2 POSTS & ACCORIND TO LANGUAGE
					if(is_rtl()) {if($count % 2 == 0) {$marginClass = 'ml4';} else {$marginClass = '';}}
					else {if($count % 2 == 0) {$marginClass = 'ml4';} else {$marginClass = '';}}
					
					echo '<div class="singleRecentPost '.$marginClass.'">';
					?>
						<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
						<div class="postMeta">
							<?php echo __('By').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; ?><a href="<?php comments_link(); ?>"><?php comments_number( __('no responses', 'sagive'), __('one response', 'sagive'), __('% responses', 'sagive') );echo '</a>'; ?>
						</div>
						<?php
							echo '<div class="postExcerpt">';
							dynamic_excerpt(300); 
							echo '</div>';
							
							echo '<div class="readMore"><a href="'.get_permalink().'" rel="nofollow">'.__('Read More &raquo;', 'sagive').'</a></div>';
					
							echo '<div class="rpBorder mt10 pb2">
								<div></div>
								<div></div>
							</div>';							
							
					echo '</div>';
				}
				?>
				</div>
				<?php $count++; ?>
			<?php endwhile; ?>
		</div>	
	</div>
	

  • שימו לב לשורה "posts_per_page" שם ניתן להגדיר את כמות הפוסטים בדף הבית

עושים סדר בעזרת CSS ו-timthumb +

דף הבית שלי מבולגן!

אם פעלתם על פי סדר הפעולות בחלק זה של המדריך וכעת תיגשו ותרעננו את דף הבית שלכם תגלו שהוא מבולגן מאוד – אבל! גם תגלו שהפוסטים חוזרים אל דף הבית לפי סדר כרונולוגי הפוך (כלומר מהחדש לישן).

בנוסף ובהתאם למבנה של קובץ הPSD על פי אנו בונים את התבנית תגלו כי רק מוצגת תמונה אבל רק לפוסט הראשון ורק לו יש תיאור ארוך במיוחד לעומת הקודמים לו להם תיאור קצר בחצי.

סימנים טובים! למרות חוסר הסדר.. אם אתם רואים תמונה כמו שתיארתי סימן שעשיתם הכל נכון! (אם לא כתבו תגובה בדף זה וספרו לנו מה הבעיה). כעת שיש לנו LOOP עובד (בערך) נתחיל לסדר אותו מבחינה עיצובית!

עושים סדר בעזרת CSS

  • פתחו את הקובץ style.css
  • הוסיפו את ההגדרה הבאה
	/************************************
	**	HOME LOOP
	************************************/
	.contentBox {margin: 0 1%;}
	.contentBox .sidebar {width: 28%; overflow: hidden;}
	.contentBox .homeLoop {width: 72%; overflow: hidden; border-right: 1px solid #D6D5D1;}
	.contentBox .homeLoop .innerLoop {margin: 2% 7% 0 0; overflow: hidden;}
	

  • אם תרעננו את דף הבית שלכם הוא אמור להראות: כך

נעים להכיר timthumb

אם רעננתם את דף הבית שלכם אתם בוודאי שמים לב שהתבנית שלכם מתחילה לקבל צורה! למרות זאת, תמונת הפוסט הראשית גדולה מידי… בכדי להקטין תמונות ולחתוך אותם בצורה טובה נשתמש בסקריפט PHP אשר נקרא timthumb.

טימטומב (timthumb) הוא סקריפט PHP קטן שעושה חיתוך והתאמה של קבצי תמונות מסוג jpg, png וgif. בנוסף, הוא עובד טוב עם wordpress מה שהופך אותו אידאלי ונפוץ בשימוש בקרב בוני תבניות וורדפרס ברחבי העולם.

הכנות לפני שימוש:

  • הורידו את הסקריפט: timthumb להורדה
  • חלצו את הקובץ מתוך הZIP לתוך תיקיית functions בתבנית שלכם.

רוצים לדעת עוד על thimthumb?

נטמיע את timthumb בלופ שלנו

כעת שלמדנו מהו timthumb הגיע הזמן לשלב אותו בלופ שבנינו עבור דף הבית שלנו בלשונית הקודמת " נכין את הלופ הבסיסי עבור דף הבית"… נעשה זאת על ידי שינוי הלופ שבנינו בצורה כזאת

בקובץ index.php: מצאו את השורה הבאה בלופ (אצלי שורה 46):

	echo '<img src="'.$thumbUrl.'" alt="'.get_the_title().'" />';
	

החליפו אותה בשורה הזאת:

	echo '<img src="'.get_bloginfo('template_url').'/functions/timthumb.php?src='.$thumbUrl.'&q=100&w=660&h=355" alt="'.get_the_title().'" />';
	

  • רענון של דף הבית שלכם אמור להראות כי גודל התמונה ביחס לתמונה המקורית עודכן! צילום מסך של הגרסה עליה אני עובד נראה: כך

מוסיפים את שם הכותב, תאריך וכמות תגובות +

רגע לפני שניגש לעצב את האלמנטים בלופ שיצרנו נוסיף עוד מספר תגים / פקודות… מבט קצר על קובץ הPSD מלמד כי יש מתחת לכותרת / שם הפוסט מופיע שם הכותב, תאריך הפרסום וכמות התגובות…

  • פתחו את קובץ index.php

בקובץ index.php: מצאו את השורה הבאה בלופ (אצלי שורה 40):

	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	

 

החליפו אותה בקוד הבא:

	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<div class="postMeta">
		<?php echo __('By').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; ?><a href="<?php comments_link(); ?>"><?php comments_number( __('no responses', 'sagive'), __('one response', 'sagive'), __('% responses', 'sagive') );echo '</a>'; ?>
	</div>
	

תיאור הפקודות:

פקודה תיאור
get_the_author_link() מחזיר את הקישור לדף הכותב. במבנה זה את שם הכותב.
get_the_date() כאשר בתוך הלופ מחזיר את תאריך הפרסום של הפוסט
comments_link() קישור אל החלק של התגובות בפוסט
comments_number() מחזיר (בגרסה שלנו מוכנה לתרגום) את כמות התגובות לפוסט

נעצב את הLOOP הבסיסי של דף הבית +

כעת, יש לנו את כל האלמנטים מוכנים בדף הבית של התבנית שלנו ואנו יכולים לגשת לעיצוב שלהם. חשוב לזכור ש… אנו בונים תבנית שתתאים גם לאנגלית וגם לעברית ולכן לא נתעסק בכלל ביישור לעברית בשלב זה (וגם לא בתרגום מחרוזות) ופשוט ניצור עיצוב בכפוף לקובץ הPSD עליו אנו מבססים את התבנית.

נתחיל לבנות הגדרות CSS לדף הבית שלנו

  • פתחו את הקובץ style.css

את הפקודות נוסיף ישירות מתחת להגדרות אלו (למען הקפדה על סדר):

	/************************************
	**	HOME LOOP
	************************************/
	.contentBox {margin: 0 1%;}
	.contentBox .sidebar {width: 28%; overflow: hidden;}
	.contentBox .homeLoop {width: 72%; overflow: hidden; border-right: 1px solid #D6D5D1;}
	.contentBox .homeLoop .innerLoop {margin: 2% 7% 0 0; overflow: hidden;}
	

הוסיפו את הקוד הבא

 

1. הגדרות CSS עבור כותרות הפוסטים

	.homeLoop h2 {margin-bottom: 0;}
	.homeLoop h2.newestPost a {color: #151515; font-size: 28px; font-weight: normal; text-decoration: none;}
	.homeLoop h2 a {color: #151515; font-size: 22px; font-weight: normal; text-decoration: none;}
	

 

2. הגדרות CSS עבור תגי מטא

	.homeLoop .postMeta {color: #151515; font-size: 13px; margin-bottom: 15px;}
	.homeLoop .postMeta a {color: #C6700A; font-size: 13px; text-decoration: none;}
	

 

3. הגדרות CSS עבור תקצירי הפוסטים

	.homeLoop .singleRecentPost {float: left; width: 48%;}
	.homeLoop .rpBorder div {border-bottom: 1px solid #D6D5D1; height: 3px; opacity: 0.6;}
	

 

4. הגדרות CSS עבור קישור לקרוא עוד

	.homeLoop .readMore {margin-top: 5px;}
	.homeLoop .readMore a {color: #C6700A; font-size: 13px; text-decoration: none;}
	

קוד CSS מוגמר עבור הלופ בדף הבית

בשלב זה, אם רצתם איתנו צעד צעד אמור דף הבית של התבנית / האתר שלכם להראות כך. אני יודע שכרגע דף הבית והאתר בכלל איננו מותאם לעברית אבל אנחנו ניגע בזה בשלב אחר.

 

הנה הפזל השלם של קוד הCSS אשר בנינו בשורות מעל לפסקה זאת

	/************************************
	**	HOME LOOP
	************************************/
	.contentBox {margin: 0 1%;}
	.contentBox .sidebar {width: 28%; overflow: hidden;}
	.contentBox .homeLoop {width: 72%; overflow: hidden; border-right: 1px solid #D6D5D1;}
	.contentBox .homeLoop .innerLoop {margin: 2% 7% 0 0; overflow: hidden;}

	.homeLoop h2 {margin-bottom: 0;}
	.homeLoop h2.newestPost a {color: #151515; font-size: 28px; font-weight: normal; text-decoration: none;}
	.homeLoop h2 a {color: #151515; font-size: 22px; font-weight: normal; text-decoration: none;}

	.homeLoop .postMeta {color: #151515; font-size: 13px; margin-bottom: 15px;}
	.homeLoop .postMeta a {color: #C6700A; font-size: 13px; text-decoration: none;}


	.homeLoop .singleRecentPost {float: left; width: 48%;}
	.homeLoop .rpBorder div {border-bottom: 1px solid #D6D5D1; height: 3px; opacity: 0.6;}

	.homeLoop .readMore {margin-top: 5px;}
	.homeLoop .readMore a {color: #C6700A; font-size: 13px; text-decoration: none;}
	

מה בפרק הבא?

בפרק הבא, נבנה ביחד את התפריט הצדדי ואת הפוטר (footer). נקודד עבור שניהם מקום לוידגטים אוטומטיים של וורדפרס ונעצב אותם ויזואלית. אני מקווה לפרסם את החלק הבא במדריך כבר בשבוע הקרוב אך אתם מוזמנים להירשם אל רשימת התפוצה של האתר כדי לקבל עדכונים בעת פרסום פוסט חדש.

אם נתקלתם בבעיה או נשארתם אם שאלה בנוגע לחלק זה במדריך אתם מוזמנים לפרסם אותה כתגובה וננסה לעזור כמיטב יכולתנו. לשאלות כלליות בנושא וורדפרס אתם מוזמנים להירשם אל הפורום שלנו.

בברכה, שגיב SEO
  • אהבתם? שתפו!