מהן תבניות בת בוורדפרס ואיך ליצור אותן?

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

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

השימוש בתבנית בת (Child Theme) פותר בעיה זו. תבנית בת מאפשרת לבצע שינויים בתבנית האב ללא חשש שיידרסו בעת עדכון התבנית. אז מה בעצם היתרונות השימוש בתבנית בת וכיצד עובדת?

אם פשוט בא לכם להוריד תבנית בת ללא הסברים מיותרים אתם מוזמנים להוריד תבנית בת בקישור זה. שימו לב כי עליכם לשנות את הפרטים הרלוונטים בקובץ style.css בהתאם למה שציינתי בשלב ב׳ המופיע בהמשך הפוסט.

מדוע כדאי להשתמש בתבניות בת?

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

לטובת עדכונים

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

• לבחור לא לעדכן את תבנית האב ולהמשיך לעבוד עם תבנית שאינה מעודכנת.
• לבחור לעדכן את תבנית האב ולאבד את השינויים שביצעתם.

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

לטובת ארגון וסדר בקוד

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

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

כיצד עובדת תבנית בת מאחורי הקלעים?

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

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

בואו ניתן מספר דוגמאות שימושיות ונסביר כיצד ניתן להשתמש בתבנית בת על מנת לשנות פונקציונליות של התבנית המקורית:

דריסת קובץ תבנית (template file) באמצעות תבנית בת

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

שימו לב – מדובר על קבצי תבנית בלבד (Template Files) ולא על נכסים כמו קבצי CSS וקבצי Javascript למשל…

כעת באפשרותכם לבצע שינויים כמה שתרצו להאדר של התבנית שלכם באמצעות שינוי הקובץ header.php בתבנית הבת, וזאת כאשר הקובץ המקורי של תבנית האב יישאר ללא שינוי.

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

אז ניתן לדרוס בצורה זו כל קובץ תבנית (Template File) הקיים בתיקייה הראשית של תבנית האב. אך מה אם אתם מעוניינים לדרוס קובץ שאינו קיים בתיקייה הראשית אלא בתיקיית משנה כלשהי?

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

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

תנו מבט בפוסט הבא בכדי להבין את השימוש בתבניות ספציפיות ואת ההיררכיה של תבניות קובץ בוורדפרס.

דריסת פונקציה בתבנית אב באמצעות תבנית בת

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

אז איך ליצור תבנית בת בוורדפרס?

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

• ליצור תיקייה לתבנית הבת תחת תיקיית התבניות – בד״כ /wp-content/themes.
• ליצור קובץ עיצוב בשם style.css המכיל את האינפורמציה על תבנית הבת שלכם.
• לגרום לתבנית הבת לטעון את קובץ העיצוב של תבנית האב.
• לטעון את קובץ העיצוב של תבנית הבת לאחר שקובץ העיצוב של תבנית האב נטענה.

שלב א' – יצירת תיקייה לתבנית הבת

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

שלב ב' – יצירת הקובץ style.css של תבנית הבת

כנסו לתיקייה וצרו קובץ בשם style.css ,לאחר מכן העתיקו והדביקו את הקוד הבא לקובץ זה:

/*
Theme Name: Your Child Theme Name
Template: parent-theme-folder
*/

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

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

שלב ג׳ – יצירת functions.php וטעינת קובץ העיצוב של תבנית האב

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

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

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

<?php
function savvy_child_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

add_action( 'wp_enqueue_scripts', 'savvy_child_styles' );

שלב ד׳ – טעינת קובץ העיצוב של תבנית הבת

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

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

<?php
function savvy_child_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', 'parent-style');
}

add_action( 'wp_enqueue_scripts', 'savvy_child_styles' );

בשלב זה כל שינוי שתבצעו בשלב בקובץ style.css של תבנית הבת ידרוס את הגדרות העיצוב הקיימות בתבנית האב.

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

עוד פרטים על הנושא במדריך כיצד להוסיף קבצי CSS ו Javascript באתרי וורדפרס.

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

כיצד להוסיף תמיכה בעברית (RTL) לתבנית בת?

בכדי לשמור על תמיכה ב RTL בתבנית צרו קובץ בשם rtl.css בתיקייה הראשית של תבנית הבת והוסיפו לקוד המדובר ב functions.php את השורה הבאה:

wp_enqueue_style( 'child-style-rtl', get_stylesheet_directory_uri().'/rtl.css' );

שימו לב – אם קיים קובץ rtl.css בתבנית האב פשוט העתיקו אותו לתיקיית תבנית הבת.

במידה והאתר שלכם מוגדר כ RTL, במילים אחרות – אם הפונקציה ()is_rtl מחזירה true הקובץ rtl.css אם קיים בתבנית הבת ייטען בצורה אוטומטית.

סיכום

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

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

אתם מוזמנים אגב להוריד את תבנית הבת שיצרנו בקישור זה, אך שימו לב לשנות את הקוד בקובץ style.css בהתאם לשם תיקיית תבנית האב שלכם. אם יש לכם טיפים לגבי תבניות בת אשמח אם תשתפו אותם איתנו, כתמיד אתם מוזמנים להגיב ולדבר… 🙂