ברוכים הבאים לחלק מספר 15 במדריך המפורט שלנו – בונים ביחד תבנית וורדפרס. בפרק זה נבנה ביחד את הדף / הקובץ אשר אחראי על הצגת קטגוריות באתר וורדפרס! אנחנו מתקרבים בצעדי ענק לתבנית עובדת אז תחזיקו חזק כי נרוץ מכאן הלאה.
סדר הפעולות
- מה זה דף קטגוריה ומה המבנה הנפוץ שלו
- מעתיקים את page.php אל תוך category.php
- מתחילים לערוך את ולהתאים את category.php
- מתאימים את הלופ למראה של קטגוריה
- מוסיפים תמונת פוסט ראשית לכל פוסט בקטגוריה
- מוסיפים אפשרויות ניווט לדף קטגוריה
- עוטפים הכל עם עיצוב אלגנטי בעזרת CSS
אז מה זה דף קטגוריה?
דף קטגוריה הוא קובץ אשר נקרא category.php ויושב בתוך תיקיית התבנית שלכם. כאשר גולש על קישור אשר מוביל לקטגוריה וורדפרס מחפשת קובץ זה כדי לדעת כיצד להציג את הקטגוריה (באיזה מבנה).
המבנה הסטנדרטי של דף קטגוריה במרבית האתרים הוא הצגה בצורה כרונולוגית את הפוסטים האחרונים באותה קטגוריה ומתן אפשרות למעבר אל פוסטים קודמים ל10 האחרונים אשר מוצגים. ניתן לשלוט בכמות הפוסטים האחרונים אשר מוצגת בממשק הניהול של וורדפרס.
מבנה קטגוריה לדוגמה לצרכיי המחשה
- פתחו את הקבצים page.php ואת category.php
- העתיקו את כל הקוד מהקובץ page.php אל הקובץ category.php ושמרו.
- סגרו את הקובץ page.php כדי שלא למנוע בלבול
- מצאו את הקוד הבא בתוך category.php
- שנו את המילה page-sidebar למילה category-sidebar
קוד לפני שינוי [php] <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]
קוד אחרי שינוי [php] <?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'); } ?> [/php]
כעת נשנה את הכותרת האוטומטית של הקובץ
- מצאו את הקוד הבא בתוך category.php
- שנו אותו בהתאם לקוד המוצג
מצאו את הקוד הבא [php] <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2 class="catTitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> [/php]
שנו אותו לקוד המוצג [php] <h2 class="catTitle"><?php single_cat_title(); ?></h2> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> [/php]
שמרו ורעננו…
אם תרעננו כעת את דף קטגוריה בתבנית שלכם תראו משהו דומה לתמונה הזאת (כמובן עם הטקסטים שלכם). שימו לב שאין לפוסטים בדף הארוך של הקטגוריה שלנו כותרות וגם כי דף הקטגוריה שלנו מציגה את הפוסטים במלואם וזה בכלל לא אידאלי.
- נוסיף לקוד שהרגע יצרנו גם הגדרת כותרת עבור פוסטים בקטגוריה
קוד לפני שינוי [php] <h2 class="newestPost"><?php single_cat_title(); ?></h2> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> [/php]
קוד אחרי שינוי [php] <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> [/php]
אוקיי… אז מה עשינו עד כה?!
- העתקנו את הקוד מPAGE לCATEGORY
- שינינו את ההגדרה של התפריט הצדדי שיהיה תואם לקטגוריה
- הוצאנו את הכותרת של הקטגוריה מהלופ והגדרנו אותה לקטגוריה
- הוספנו תת כותרת לכל פוסט בלופ שהוא גם קישור לפוסט עצמו
- ועכשיו אנחנו עוברים אל הטאב הבא לטפל בלופ עצמו!
נשנה את הקלאס של מידע המטא
מתחת לכותרת של כל פוסט מופיע מידע על אותו פוסט. מי פרסם אותו ומה תאריך הפרסום… אנו רוצים לשנות מעט את המראה שלו בהמשך ולכן נוסיף לו קלאס.
מצאו את הקוד הבא בcategory.php [php] <div class="postMeta"> <?php echo __('By', 'sagive').' '.get_the_author_link().', '.__('On', 'sagive').get_the_date().' – '; ?> </div> [/php]
שנו אותו לקוד המוצג [php] <div class="postMeta fs11"> <?php echo __('By', 'sagive').' '.get_the_author_link().', '.__('On', 'sagive').get_the_date(); ?> </div> [/php]
הופכים את הפוסט המלא לתקציר
בפרק הוספנו פונקציה מיוחדת לקובץ functions.php אשר תעזור לנו להחזיר תקציר במקום פוסט. בדיוק באותה פונקציה עשינו שימוש בדף הבית כדי להציג תקצירים.
מצאו את הקוד הבא בcategory.php [php] <div class="singleContent"> <?php the_content(); ?> </div> [/php]
שנו אותו לקוד המוצג [php] <div class="singleCatContent"> <?php echo '<div class="singleCatExcerpt">'; dynamic_excerpt('360'); echo '</div>'; ?> </div> [/php]
מידע למתעניינים בשורת קוד זה למעשה שינינו 2 דברים. ראשית שינינו את הקלאס של המיכל (הDIV) לקלאס קריא בשם singleCatContent. למרות שאין לקלאס זה שום הגדרות CSS זה מועיל לטובת הסדר הטוב.
בנוסף החלפנו את הפקודה the_content() בפקודה שקוראת לפונקציה שיצרנו dynamic_excerpt('360'). המספר 360 מייצג את כמות התווים שאנו רוצים להחזיר וכך יצרנו תקציר!
מה קיבלנו? לאחר ששמרנו ורעננו אתם אמורים לראות משהוא דומה לתמונה הזאת
נוסיף כפתור לקרוא עוד
נכון שקישרנו את הכותרת לפוסט אבל רבים מהאנשים לא ידעו זאת ובמיוחד לאחר שנוסיף קצת עיצוב ולכן נוסיף כפתור "לקרוא עוד" אחרי כל תקציר.
חזרו לקוד שעכשיו יצרנו [php] <div class="singleCatContent"> <?php echo '<div class="singleCatExcerpt">'; dynamic_excerpt('360'); echo '</div>'; ?> </div> [/php]
שנו אותו לקוד הבא [php] <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 »', 'sagive'); ?></a></div> </div> [/php]
רגע לפני שעושים שינויים – מה התכנית פעולה ולמה.
- נבקש מוורדפרס את המסלול לתמונת פוסט ראשית (הURL)
- נכין קוד שיקרא לתמונה זאת ויקטין אותה בעזרת timthumb
למה דווקא עם timthumb?
זה נכון שאנחנו יכולים לעשות שימוש בתכונה המובנית של וורדפרס שנקראת Post Thumbnails אבל מכיוון שאני מכבה את החיתוך האוטומטי של תמונות על ידי וורדפרס (מבזבז שטח אחסון) עם כל תבנית שאני מתקין וגם מכיוון שיש לי יותר שליטה בצורה כזאת אני מעדיך להשתמש בtimthumb… למי שלא מכיר את timthumb, הוספנו אותו לתבנית ואפילו עשינו בו שימוש בפרק 11 "בונים את מרכז הדף הבית שלנו".
ניגשים לקוד
נמצא שוב את הקוד שיצרנו קודם לכן [php] <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 »', 'sagive'); ?></a></div> </div> [/php]
נשנה אותו לקוד הבא [php] <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 »', 'sagive'); ?></a></div> <div class="fix"></div> </div> [/php]
סיימנו! מה קיבלנו?
אם פעלתם על פי ההוראות, דף הקטגוריה שלכם צריך להראות דומה לתמונה הזאת. אם בשלב בו היכנסו תוכן לדוגמה לא הוספתם תמונות פוסט ראשיות לכל פוסט שיצרתם אז תצטרכו לעשות זאת. אם אתם לא יודעים איך להגדיר תמונת פוסט ראשית (ברצינות?!) צפו במדריכון הזה: הגדרת תמונת פוסט ראשית
קיימות שתי דרכים נפוצות לעשות זאת:
ניווט בעזרת קישורי אחורה קדימה
אם החלטתם ללכת על הדרך הפשוטה יותר שלא כולל תוסף פעלו לפי ההוראות הבאות
- נמצא את הסוף של הלופ ונשים אחריו קוד ניווט
- הקוד שמצהיר על סוף הלופ של הקטגוריה נראה כך
[php] <?php endwhile; ?> <?php endif; ?> [/php]
<div class="catPostsNav"> <div class="catPrev"><?php previous_post('« %', ", 'yes'); ?></div> <div class="catNext"><?php next_post('% » ', ", 'yes'); ?></div> </div> [/php]
ניווט בעזרת תוסף wp-pagenavi
ראשית התקינו את התוסף wp-pagenavi… היכנסו לממשק הניהול שלכם ולחצו על התפריט תוספים > תוסף חדש. לאחר מכן הקלידו בשדה החיפוש wp-pagenavi והתקינו את התוסף.
- לאחר שהתקנתם והפעלתם את התוסף wp-pagenavi
- מצאו את הקוד שמצהיר על סוף הלופ של הקטגוריה נראה כך
[php] <?php endwhile; ?> <?php endif; ?> [/php]
<?php wp_pagenavi(); ?> [/php]
מה עם קצת עיצוב?
אל חשש! בחלק הבא אנו נעניק עיצוב לכל האלמנטים בדף קטגוריה וגם עיצוב אופציונלי לשני שיטות הניווט כך שתוכלו לבחור באיזו שיטת ניווט להשתמש. אני אשתמש בWp-pageNavi לתבנית המוגמרת כי זה פשוט, יותר קל לגולש ויותר אלגנטי בעיני.
- פתחו את הקובץ style.css
- גללו עד לסוף הקובץ והוסיפו את הקוד הבא
[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 עבור שיטת הניווט הראשונה לקטגוריה
אם בחרתם לעשות שימוש בשיטת הניווט הראשונה (קישורי אחורה / קדימה) הדביקו את הקוד הבא בסוף הקוד CSS המוצג כאן למעלה.
[css] .catPostsNav {height: 30px; margin-bottom: 20px;} .catPrev {float: left;} .catNext {float: right;} .catPrev a, .catNext a {text-decoration: none; color: #C6700A;} [/css]
CSS עבור שיטת הניווט השנייה לקטגוריה
אם בחרתם לעשות שימוש בשיטת הניווט השנייה (בעזרת התוסף wp-pageNavi) הדביקו את הקוד הבא בסוף הקוד CSS המוצג כאן למעלה. [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;} [/css]
מה בפרק הבא?
בפרק הבא אשר יהיה קצר מאוד הודות לעבודה שהשקענו בבניית דף קטגוריה מעולה נבנה ביחד דף ארכיון (archive.php). דף ארכיון אחראי על הצגת מידע בתגובה ללחיצה על תגיות או על תאריך פרסום.
כמו תמיד אתם מוזמנים להגיב עם שאלות, עצות או טיפים לשיפור. כמו כן אנחנו מזמינים אתכם להירשם [rollink goto="https://sagive.co.il/main/subscribe/" classes=""]לרשימת התפוצה שלנו[/rollink] כדי להישאר מעודכנים בעת פרסום החלק הבא במדריך (ומבטיחים שלא לשלוח שום הודעות פרסומיות!)
אם אהבתם את המדריך נודה לכם אם תפרגנו לנו עם +1, תשתפו או תשאירו תגובת "אהבתי".
17 תגובות