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

טוב, אז בחלק הראשון של המדריך יצרנו את הבסיס לתבנית שלנו. יצרנו את מבנה ההטמל הבסיסי ומתוכו גזרנו את ה-headerת ה-footer וה-index. עכשיו צריכים להמשיך.

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

תבנית Header

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

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

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

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

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

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

המילה "Page" שלאחריה מופיע שם התיקייה של תבנית העיצוב היא המילה שיהיה אפשר לתרגם אותה בסופו של דבר.

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

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

טוב, אחרי שסיימנו (בינתיים) את האזור הזה, נחזור ל-Header שלנו. במקום שתי השורות

נכניס את הקוד המטורף הבא. הוא קצת מפחיד, אבל מיד אחריו אנסה להסביר אותו קצת:

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

מידע על תוכן העמוד

קישור לקובץ העיצוב שלנו

קריאה לסקריפט על מנת שנוכל להשתמש בתגובות משורשרות כשנגיע לחלק של התגובות (עוד מעט!)

קישור ואישור (חרוז!) לפלאגינים ולעדכוני רסס ופינגבאקים

זהו, לא מספיק?

מתחילים להציג דברים ממשיים

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

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

אז עכשיו נלך יחדיו לקובץ ה-header.php שלנו ונמצא את ה-div שנקרא branding. בתוך ה-div הזה נשתול את כל מה שחפרתי עליו בפסקה למעלה – את שם הבלוג ואת התיאור שלו. זה אמור להיות משהו כזה:

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

ומציגים אותה בתוך הקישור של שם הבלוג

ואח"כ אנחנו מציגים את תיאור הבלוג

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

כך שלמעשה, כשמסתכלים על כל אזור התפריט, מה שיש לנו זה את זה:

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

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

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

Leave a Reply

Your email address will not be published.