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

ברוכים הבאים לחלק השביעי במדריך "בונים ביחד תבנית וורדפרס". בפרק זה ניקח את קובץ index.php אשר יצרנו בחלק השישי ונעשה לו וורדפדיזציה… זה אומר שנחלק אותו לשלושה חלקים ונכניס בו פקודות הכרחיות לפעילות התקינה של וורדפרס.

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

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

מחלקים את INDEX.PHP לשלושה חלקים

בפרק הקודם יצרנו את השלד / הקוד הבסיסי של דף הבית שלנו בקובץ INDEX.PHP. למעשה בנינו מכלים (DIV'ים) המהווים את המבנה הבסיסי של האתר שלנו. בפרק זה נחלק את הקוד שבנינו אל שלושה קבצים והם:

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

מתחילים עם header.php

  • 1. נפתח את הקובץ index.php ואת הקובץ header.php
  • 2. נגזור את הקוד משורה 1 בקובץ index.php ועד שורה 7 ונדביק אותו בקובץ בתוך header.php
  • 3. כעת בקובץ index.php בראש המסמך שלנו נוסיף את הפקודה <?php get_header(); ?>
  • 4. בקובץ header.php ממש לפני התג </head> נוסיף בתוך הערות קוד את הפקודה <?php wp_head(); ?>
  • 5. שמרו את שני הקבצים וסיימנו עם header.php
מבט על הרשימה מותיר אותי עם המחשבה שרשימת פעולות בכתב בלבד מקשה מאוד להבין מה יש לעשות בשלב זה ולכן הנה סרטון וידאו קצר בן 60 שניות של הפעולות המצוינות כאן למעלה. לחצו על הסרטון להפעלה וכתבו לנו תגובה אם חסר לכם מידע.

מתחילים עם footer.php

  • 1. נפתח את הקובץ index.php ואת הקובץ footer.php
  • 2. נגזור את הקוד משורה 27 בקובץ index.php ועד שורה 39 ונדביק אותו בקובץ בתוך footer.php
  • 3. כעת בקובץ index.php בתחתית המסמך שלנו נוסיף את הפקודה <?php get_footer(); ?>
  • 4. בקובץ footer.php ממש לפני התג </body> נוסיף בתוך הערות קוד את הפקודה <?php wp_footer(); ?>
  • 5. שמרו את שני הקבצים וסיימנו עם footer.php

לחצו על הסרטון להדגמה של פעולות אלו

* זכרו לבחור באיכות HD כדי לראות את הסרטונים בצורה חדה.

מבינים את פקודות WP

פקודת get_header

פקודה זאת אומרת לוורדפרס לחפש קובץ בשם header.php ולכלול אותו במיקום בו הפקודה ניתנת ובמקרה זה בראש הקובץ index.php

פקודת get_footer

פקודה זאת אומרת לוורדפרס לחפש קובץ בשם footer.php ולכלול אותו במיקום בו הפקודה ניתנת ובמקרה זה בתחתית הקובץ index.php

פקודת wp_head

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

פקודת wp_footer

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

פקודות "עוגן" – תיאוריה למתקדמים

בחלק הקודם הסברתי בקצרה מה כל פקודה אשר שילבנו בקבצי header.php וfooter.php אומרת לוורדפרס לעשות. בחלק הבא אני רוצה להכנס לעומק להסבר על פקודות עוגן או כפי שהן נקראות בוורדפרס hooks. הסבר זה הוא לא הכרחי אך לדעתי חשוב להבין מה הן פקודות עוגן כיוון שנתייחס אליהן בהמשך ובכלל.

מה הרעיון מאחורי נקודות עוגן (hooks) בוורדפרס

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

דוגמה של פונקציה בתוך functions.php שמתייחסת אל footer.php

function exampleFooter() {
	echo 'טקסט זה יופיע בתחתית האתר!';
}
add_action('wp_footer', 'exampleFooter');

מידע נוסף על Hooks

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

בפרק הבא – תגי מטא בוורדפרס

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

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

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

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