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

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

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

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

סדר הפעולות

  • מה זה דף קטגוריה ומה המבנה הנפוץ שלו
  • מעתיקים את page.php אל תוך category.php
  • מתחילים לערוך את ולהתאים את category.php
  • מתאימים את הלופ למראה של קטגוריה
  • מוסיפים תמונת פוסט ראשית לכל פוסט בקטגוריה
  • מוסיפים אפשרויות ניווט לדף קטגוריה
  • עוטפים הכל עם עיצוב אלגנטי בעזרת CSS
מה זה דף קטגוריה ומה המבנה הנפוץ שלו +

אז מה זה דף קטגוריה?

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

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

מבנה קטגוריה לדוגמה לצרכיי המחשה

מבנה קטגוריה לדוגמה

מעתיקים את page.php אל תוך category.php +
כעת כשהבנו את המבנה הנפוץ של קטגוריה בתוך וורדפרס (ראו טאב קודם) נוכל להתחיל לבנות את הקוד בקובץ category.php וכדי לחסוך זמן נתחיל עם להעתיק את כל הקוד בקובץ page.php אל תוך הקובץ category.php
  • פתחו את הקבצים page.php ואת category.php
  • העתיקו את כל הקוד מהקובץ page.php אל הקובץ category.php ושמרו.
  • סגרו את הקובץ page.php כדי שלא למנוע בלבול
מתחילים לערוך את ולהתאים את category.php +
ראשית נשנה את הסיידבר לסיידבר הרצוי: כעת שיש לנו קוד בתוך הקובץ category.php נתחיל לשנות אותו כדי שיתאים לקטגוריה ויציג את המידע שאנו רוצים. בתור צעד ראשון נתחיל עם שינוי הסיידבר (סרגל צד) לסרגל צד שהגדרנו בתחילת המדריך עבור קטגוריות.
  • מצאו את הקוד הבא בתוך category.php
  • שנו את המילה page-sidebar למילה category-sidebar
קוד לפני שינוי
	<div class="sidebar">
	<?php 
	if ( is_active_sidebar( 'page-sidebar' )) {
		echo '<ul id="home-sidebar" class="home-sidebar page-sidebar">';
		dynamic_sidebar( 'page-sidebar' );
		echo '</ul>';	
	} else {
		_e('Drag widgets to page sidebar to display data here.', 'sagive');
	}
	?>
	</div>
	
קוד אחרי שינוי
	<?php 
	if ( is_active_sidebar( 'category-sidebar' )) {
		echo '<ul id="home-sidebar" class="home-sidebar category-sidebar">';
		dynamic_sidebar( 'category-sidebar' );
		echo '</ul>';	
	} else {
		_e('Drag widgets to Category sidebar to display data here.', 'sagive');
	}
	?>
	

כעת נשנה את הכותרת האוטומטית של הקובץ

מכיוון שהעתקנו את הקוד מתוך page.php יש לנו כותרת שמחפשת את הכותרת של הדף הנוכחי אבל במקרה של קטגוריה עלינו לשנות את ההגדרה כדי לאחזר כותרת של קטגוריה
  • מצאו את הקוד הבא בתוך category.php
  • שנו אותו בהתאם לקוד המוצג
מצאו את הקוד הבא
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<h2 class="catTitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	
שנו אותו לקוד המוצג
	<h2 class="catTitle"><?php single_cat_title(); ?></h2>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
	
* מידע נוסף על כותרת הקטגוריה: single_cat_title

שמרו ורעננו…

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

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

  • נוסיף לקוד שהרגע יצרנו גם הגדרת כותרת עבור פוסטים בקטגוריה
קוד לפני שינוי
	<h2 class="newestPost"><?php single_cat_title(); ?></h2>
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
	
קוד אחרי שינוי
	<h2 class="catTitle"><?php single_cat_title(); ?></h2>
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
		
		<h3 class="catSingleTitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
	

אוקיי… אז מה עשינו עד כה?!

  • העתקנו את הקוד מPAGE לCATEGORY
  • שינינו את ההגדרה של התפריט הצדדי שיהיה תואם לקטגוריה
  • הוצאנו את הכותרת של הקטגוריה מהלופ והגדרנו אותה לקטגוריה
  • הוספנו תת כותרת לכל פוסט בלופ שהוא גם קישור לפוסט עצמו
  • ועכשיו אנחנו עוברים אל הטאב הבא לטפל בלופ עצמו!
מתאימים את הלופ למראה של קטגוריה +
נשארו לנו עוד כמה צעדים פשוטים כדי לסיים את דף קטגוריה. כעת אנו נתאים את הלופ של וורדפרס בתוך קובץ category.php כדי שיתאים לסכימה / למבנה של קטגוריה. בנוסף נקרא לתמונת פוסט ראשית בצורה אוטומטית.

נשנה את הקלאס של מידע המטא

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

מצאו את הקוד הבא בcategory.php
	<div class="postMeta">
		<?php echo __('By', 'sagive').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; ?>
	</div>
	
שנו אותו לקוד המוצג
	<div class="postMeta fs11">
		<?php echo __('By', 'sagive').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date(); ?>
	</div>
	

הופכים את הפוסט המלא לתקציר

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

מצאו את הקוד הבא בcategory.php
	<div class="singleContent">
		<?php the_content(); ?>
	</div>
	
שנו אותו לקוד המוצג
	<div class="singleCatContent">
	<?php
		echo '<div class="singleCatExcerpt">';
		dynamic_excerpt('360'); 
		echo '</div>';
	?>
	</div>
	

מידע למתעניינים בשורת קוד זה למעשה שינינו 2 דברים. ראשית שינינו את הקלאס של המיכל (הDIV) לקלאס קריא בשם singleCatContent. למרות שאין לקלאס זה שום הגדרות CSS זה מועיל לטובת הסדר הטוב.

בנוסף החלפנו את הפקודה the_content() בפקודה שקוראת לפונקציה שיצרנו dynamic_excerpt('360'). המספר 360 מייצג את כמות התווים שאנו רוצים להחזיר וכך יצרנו תקציר!

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

נוסיף כפתור לקרוא עוד

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

חזרו לקוד שעכשיו יצרנו
	<div class="singleCatContent">
	<?php
		echo '<div class="singleCatExcerpt">';
		dynamic_excerpt('360'); 
		echo '</div>';
	?>
	</div>
	
שנו אותו לקוד הבא
	<div class="singleCatContent">
		<?php
			echo '<div class="singleCatExcerpt">';
			dynamic_excerpt('360'); 
			echo '</div>';
		?>
		<div class="readMore"><a href="<?php the_permalink(); ?>"><?php _e('Read More &raquo;', 'sagive'); ?></a></div>
	</div>
	
מוסיפים תמונת פוסט ראשית לכל פוסט בקטגוריה +
אז יש לנו כמעט קטגוריה… אבל רגע לפני שנוסיף קישורים "אחורה / קדימה" ונדאג לעיצוב בואו נוסיף תצוגה של תמונת פוסט ראשית לצד כל פוסט כדי לעודד את הגולשים להקליק. תאמינו או לא כשהגעתי לשלב הזה במדריך החלטתי לעשות את אותו הדבר באתר שלנו (שגיב SEO). זה משהו שאני מתכנן הרבה זמן לעשות ופשוט דחיתי… אז יאללה, ניגש לקוד.

רגע לפני שעושים שינויים – מה התכנית פעולה ולמה.

  • נבקש מוורדפרס את המסלול לתמונת פוסט ראשית (הURL)
  • נכין קוד שיקרא לתמונה זאת ויקטין אותה בעזרת timthumb

למה דווקא עם timthumb?

זה נכון שאנחנו יכולים לעשות שימוש בתכונה המובנית של וורדפרס שנקראת Post Thumbnails אבל מכיוון שאני מכבה את החיתוך האוטומטי של תמונות על ידי וורדפרס (מבזבז שטח אחסון) עם כל תבנית שאני מתקין וגם מכיוון שיש לי יותר שליטה בצורה כזאת אני מעדיך להשתמש בtimthumb… למי שלא מכיר את timthumb, הוספנו אותו לתבנית ואפילו עשינו בו שימוש בפרק 11 "בונים את מרכז הדף הבית שלנו".

ניגשים לקוד

נמצא שוב את הקוד שיצרנו קודם לכן
	<div class="singleCatContent">
		<?php
			echo '<div class="singleCatExcerpt">';
			dynamic_excerpt('360'); 
			echo '</div>';
		?>
		<div class="readMore"><a href="<?php the_permalink(); ?>"><?php _e('Read More &raquo;', 'sagive'); ?></a></div>
	</div>
	
נשנה אותו לקוד הבא
	<div class="singleCatContent">
		<?php 
			// GET POST MAIN IMG URL
			$thumbURL	= wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
			
			// ECHO IT USING TIMTHUMB
			echo '<div class="singleCatThumb"><img src="'.get_bloginfo('template_url').'/functions/timthumb.php?src='.$thumbURL.'&q=100&w=125&h=125" alt="" /></div>';

			// GET POST EXCERPT
			echo '<div class="singleCatExcerpt">';
			dynamic_excerpt('360'); 
			echo '</div>';
		?>
		<div class="readMore"><a href="<?php the_permalink(); ?>"><?php _e('Read More &raquo;', 'sagive'); ?></a></div>
		<div class="fix"></div>
	</div>
	

סיימנו! מה קיבלנו?

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

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

קיימות שתי דרכים נפוצות לעשות זאת:

הראשונה : בעזרת קישורים "פוסטים קודמים" / "פוסטים הבאים"
השנייה : בעזרת התוסף wp-pagenavi שמאפשר להוסיף ממשק ניווט על פי מספור עמודים.
* ניתן גם לעשות ניווט ממוספר גם בלי תוספים אבל wp-pagenavi הוא תוסף אמין ונוח לשימוש.

ניווט בעזרת קישורי אחורה קדימה

אם החלטתם ללכת על הדרך הפשוטה יותר שלא כולל תוסף פעלו לפי ההוראות הבאות

  • נמצא את הסוף של הלופ ונשים אחריו קוד ניווט
  • הקוד שמצהיר על סוף הלופ של הקטגוריה נראה כך
	<?php endwhile; ?>
	<?php endif; ?>	
	
ישר מתחתיו נשים קוד ניווט – התוצר נראה כך
	<?php endwhile; ?>
	<?php endif; ?>	

	<div class="catPostsNav">
		<div class="catPrev"><?php previous_post('&laquo; %', '', 'yes'); ?></div>
		<div class="catNext"><?php next_post('% &raquo; ', '', 'yes'); ?></div>
	</div>
	
רענון מהיר של דף קטגוריה וגלילה למטה ואתם אמורים לראות משהוא דומה לתמונה הזאת

ניווט בעזרת תוסף wp-pagenavi

ראשית התקינו את התוסף wp-pagenavi… היכנסו לממשק הניהול שלכם ולחצו על התפריט תוספים > תוסף חדש. לאחר מכן הקלידו בשדה החיפוש wp-pagenavi והתקינו את התוסף.

  • לאחר שהתקנתם והפעלתם את התוסף wp-pagenavi
  • מצאו את הקוד שמצהיר על סוף הלופ של הקטגוריה נראה כך
	<?php endwhile; ?>
	<?php endif; ?>	
	
ישר מתחתיו נשים קוד ניווט – התוצר נראה כך
	<?php endwhile; ?>
	<?php endif; ?>	

	<?php wp_pagenavi(); ?>
	
רענון מהיר של דף קטגוריה וגלילה למטה ואתם אמורים לראות משהוא דומה לתמונה הזאת

מה עם קצת עיצוב?

אל חשש! בחלק הבא אנו נעניק עיצוב לכל האלמנטים בדף קטגוריה וגם עיצוב אופציונלי לשני שיטות הניווט כך שתוכלו לבחור באיזו שיטת ניווט להשתמש. אני אשתמש בWp-pageNavi לתבנית המוגמרת כי זה פשוט, יותר קל לגולש ויותר אלגנטי בעיני.

עוטפים הכל עם עיצוב אלגנטי בעזרת CSS +
אנחנו ממש קרובים לסוף פרק זה וכל שנותר לנו הוא להוסיף קצת עיצוב לדף קטגוריה שלנו כדי שיראה מסודר יותר.
  • פתחו את הקובץ style.css
  • גללו עד לסוף הקובץ והוסיפו את הקוד הבא
	/************************************
	**	CATEGORY.PHP
	************************************/
	h2.catTitle {border-bottom: 1px solid #D6D5D1; color: #151515; font-size: 28px; font-weight: normal; text-decoration: none;}
	h3.catSingleTitle {margin: 20px 0 0;}
	h3.catSingleTitle a {color: #C6700A; text-decoration: none;}
	.singleCatContent {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #D6D5D1 }
	.singleCatThumb {width: 23%; float: left;}
	.singleCatExcerpt {float: left; min-height: 80px; overflow: hidden; width: 76%;}
	.singleCatContent .readMore {background: #C6700A; border: 0 none; float: left; margin-top: 20px; padding: 2px 10px;}
	.singleCatContent .readMore a {color: #FFFFFF;}
	

CSS עבור שיטת הניווט הראשונה לקטגוריה

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

	.catPostsNav {height: 30px; margin-bottom: 20px;}
	.catPrev {float: left;}
	.catNext {float: right;}
	.catPrev a, .catNext a {text-decoration: none; color: #C6700A;}
	

CSS עבור שיטת הניווט השנייה לקטגוריה

אם בחרתם לעשות שימוש בשיטת הניווט השנייה (בעזרת התוסף wp-pageNavi) הדביקו את הקוד הבא בסוף הקוד CSS המוצג כאן למעלה.

	.wp-pagenavi {height: 30px; margin-bottom: 20px;}
	.wp-pagenavi a, .wp-pagenavi span {background: #FFFFFF; color: #C6700A; float: left;}
	.wp-pagenavi span.current {background: #C6700A; border: 1px solid #C6700A !important; color: #FFFFFF; font-weight: normal !important;}
	

מה בפרק הבא?

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

כמו תמיד אתם מוזמנים להגיב עם שאלות, עצות או טיפים לשיפור. כמו כן אנחנו מזמינים אתכם להירשם [rollink goto="http://www.sagive.co.il/main/subscribe/" classes=""]לרשימת התפוצה שלנו[/rollink] כדי להישאר מעודכנים בעת פרסום החלק הבא במדריך (ומבטיחים שלא לשלוח שום הודעות פרסומיות!)

אם אהבתם את המדריך נודה לכם אם תפרגנו לנו עם +1, תשתפו או תשאירו תגובת "אהבתי".

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