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

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

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

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

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

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

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

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

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

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

ניווט פנימי

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

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

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

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

 

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

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

Leave a Reply

Your email address will not be published.