מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק שלישי

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

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

[html] <?php while ( have_posts() ) : the_post() ?>
<?php endwhile; ?>
[/html]

פשוט ולא מצריך הרבה הסבר. הלולאה נפתחת ב”כאשר” (שזה ה-while) ונסגרת ב”סייםכאשר” (endwhile). זה לא יעשה שום דבר, לפחות לא משהו שאנחנו רואים. למעשה מה שקורה זה שברגע שהעאמוד נטען וורספרס עוברת על בסיס הנתונים ומחפשת אם קיימים פוסטים ומה התוכן בהם. אבל היא לא עושה עם זה כלום.
כדי שיוצג משהו אנחנו צריכים לבקש יפה. את הקוד הבא נכניס בתוך ה-div שנקרא content בקובץ שהכנו:

[html] <?php while ( have_posts() ) : the_post() ?>
<?php the_content(); ?>
<?php endwhile; ?>
[/html]

ראיתם מה יצא? מלחיץ, אה? כל התוכן מוצג כגוש אחד גדול, וזה לא ממש נעים.
בואו נשנה את זה:

[html] <ul>
<?php while ( have_posts() ) : the_post() ?>
<li>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
</ul>
[/html]

ראיתם מה קרה כאן? כל הפוסטים מסודרים כרשימה מסודרת ועכשיו גם אתם יודעים מה ההבדל בין ()the_content לבין ()the_excerpt.

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

[html] <div class="entry-content">
<?php the_content( __( ‘המשך קריאה’, ‘your-theme’ )  ); ?>
<?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘עמודים:’, ‘your-theme’ ) . ‘&after=</div>’) ?>
</div><!– .entry-content –>
[/html]

עכשיו כשאני מסתכל על מה שיש לנו, אני מבין שחסרה לנו הכותרת. נשתמש בתג-תבנית של וורדפרס ()the_title כדי להציג את הכותרת (מפתיע ומקורי, אני יודע) ונעטוף אותה בקישור ()the_permalink (שזה הקישור הקבוע והייחודי של כל פוסט). כדי שמנועי חיפוש יידעו שזה הקישור לפוסט נוסיף גם ערך bookmark. את הקוד הזה נדביק ממש מעל ה-entry-content שיצרנו לפני רגע ממש:

[html] <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(‘קישור קבוע ל-%s’, ‘your-theme’), the_title_attribute(‘echo=0’) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
[/html]

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

[html] <?php /* הלולאה! */ ?>
<?php while ( have_posts() ) : the_post() ?>

<?php /* יוצר div ייחודי */ ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php /* an h2 title */ ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(‘קישור קבוע ל-%s’, ‘your-theme’), the_title_attribute(‘echo=0’) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta">
<span class="prep-author"><?php _e(‘נכתב על ידי’, ‘your-theme’); ?></span>
<span class="author"><a class="url" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( ‘הצג את כל הפוסטים שנכתבו על ידי %s’, ‘your-theme’ ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="prep-entry-date"><?php _e(‘פורסם ב’, ‘your-theme’); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time(‘Y-m-dTH:i:sO’) ?>"><?php the_time( get_option( ‘date_format’ ) ); ?></abbr></span>
<?php edit_post_link( __( ‘עריכה’, ‘your-theme’ ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?>
</div><!– .entry-meta –>

<?php /* התוכן */ ?>
<div class="entry-content">
<?php the_content( __( ‘המשך קריאה’, ‘your-theme’ )  ); ?>
<?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘עמודים:’, ‘your-theme’ ) . ‘&after=</div>’) ?>
</div><!– .entry-content –>

<?php /* קטגוריות, תגים וכל השאר */ ?>
<div class="entry-utility">
<span class="cat-links"><span class="eprep-cat-links"><?php _e( ‘קוטלג תחת’, ‘your-theme’ ); ?></span><?php echo get_the_category_list(‘, ‘); ?></span>
<span class="meta-sep"> | </span>
<?php the_tags( ‘<span class="tag-links"><span class="prep-tag-links">’ . __(‘תגיות’, ‘your-theme’ ) . ‘</span>’, ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?>
<span class="comments-link"><?php comments_popup_link( __( ‘אין תגובות’, ‘your-theme’ ), __( ‘תגובה אחת’, ‘your-theme’ ), __( ‘% תגובות’, ‘your-theme’ ) ) ?></span>
<?php edit_post_link( __( ‘עריכה’, ‘your-theme’ ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?>
</div><!– #entry-utility –>
</div><!– #post-<?php the_ID(); ?> –>

<?php /* סוגרים את הלולאה */ ?>

<?php endwhile; ?>
[/html]

ניווט פנימי

עכשיו נוסיף אפשרות לנווט בין העמודים. בעמוד הראשי מוצגת כמות מסויימת של פוסטים (ברירת המחדל היא 6, אך ניתן לשנות בלוח הבקרה, תחת “קריאה”). במידה ויש לכם יותר פוסטים ממה שהגדרתם שיוצג בעמוד הראשי כדאי שתהיה אפשרות לנווט בין העמודים הללו. לשם כך נשתמש בשני תגי-תבנית: next_posts_link() ו- previous_posts_link().
על פניו נראה שהשמות של התגים מסבירים את עצמם הכי טוב, אבל לא:

  • next posts link – יוצר קישור לפוסטים הקודמים, הוא נקרא “next posts” סתם כדי לבלבל (נשבע לכם, זו ההגדרה בקודקס של וורדפרס)
  • previous posts link – יוצר קישור לפוסטים הבאים, הוא נקרא “previous posts” סתם כדי לבלבל (שוב, נשבע לכם!)

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

[html] <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<?php } ?>
[/html]

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

[html] <?php /* ניווט עליון */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( ‘<span class="meta-nav">&laquo;</span> Older posts’, ‘your-theme’ )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( ‘Newer posts <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )) ?></div>
</div><!– #nav-above –>
<?php } ?>
[/html]

 

[html] <?php /* ניווט תחתון */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( ‘<span class="meta-nav">&laquo;</span> Older posts’, ‘your-theme’ )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( ‘Newer posts <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )) ?></div>
</div><!– #nav-below –>
<?php } ?>
[/html]

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

[html] <?php get_sidebar(); ?>
[/html]

נתראה בפוסט הבא!

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

יש מצב שתאהבו גם את זה