תבנית בת - מהי ולמה?

תבנית בת… מהי ולמה מתקינים?

תבנית בת בוורדפרס (Child Themes)

פלטפורמת ה-Wordpress היא מערכת CMS קוד פתוח המתבססת על תבניות בכדי ליצור את האתר אינטרנט שלנו.

לאחר התקנת ה-Wordpress בשרת אנו מקבלים את המערכת עם תבנית דיפולטיבית. נרצה לשנות עיצוב? נחליף תבנית. לא נרצה? נשאר עם אותה תבנית ברירת מחדל.

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

לתבנית הבסיסית של הוורדפרס קוראים "תבנית אם"

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

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

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

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

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

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

כשאנו מתקינים תבנית בת, אנחנו יוצרים תבנית חדשה אבל "אומרים" ל-Wordpress "להסתמך" על תבנית אחרת = "תבנית הבת"

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

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

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

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

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

מה לגבי שינויים?
כאשר תעתיקו לתיקיית "תבנית הבת" שלכם את קובץ header.php ותעשו בו שינויים כלשהם, WordPress "תעדיף" את קובץ זה ותתעלם מקובץ header.php אשר נמצא בתיקיית "תבנית האם" מכיוון שה-Wordpress מצאה אחד כזה בתיקיית תבנית הבת ומבחינתה זהו קובץ "מועדף".

ניתן למצוא ברשת/ריפו (ספריית התבניות של ה-Wordpress) תבניות בת כמעט לכל התבניות הפופולריות כיום.

תבניות מומלצות לעבודה עם אלמנטור:
Hello
Ocean WP
Astra
Generate Press

תבניות בת:
Hello
Ocean WP
Astra – באמצעות מחולל תבנית בת ל-Astra
Generate Press

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

מדריך ליצירת תבנית בת:
במדריך זה ניצור תבנית בת לתבנית Ocean WP

1. נפתח ספריה חדשה תחת תיקיית התבניות בוורדפרס (תיקיית התבניות יושבת בנתיב wp-content/themes) שנקרא לה בשם תבנית האם ונוסיף לשם את המילה child, לדוגמא: אם שם הספריה של תבנית האם נקראת oceanwp אז לספריה של תבנית הבת נקרא oceanwp-Child

2. יצירת קובץ ה CSS לתבנית הבת:

בתוך התיקיה שפתחנו ניצור קובץ בשם Style.css – הקובץ חייב להיות בשם הזה . בתוך הקובץ הזה נכתוב קוד CSS – את שם התבנית והגדרה מהי תבנית האב. בנוסף אפשר להוסיף פרטים נוספים כמו תגיות, שם היוצר, תיאור, גרסת התבנית וכו'…

דוגמא לקוד לתבנית בת Ocean WP

/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Computec Internet Solutions
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

חשוב!!! ה- Theme Name מציין לוורדפרס מה שם התבנית ואיך היא תוצג במערכת וה-Template שמסביר לוורדפרס מי תבנית האב ומאיפה היא צריכה לשאוב את הנתונים .

3. ניצור בספריה שפתחנו גם קובץ function.php וכאן נצטרך לטעון את קבצי ה-CSS של תבנית האם, מדוע?
כאשר וורדפרס מוצאת קובץ בתיקיית תבנית הבת, היא "תעדיף" אותו על פני הקובץ הקיים בתיקיית תבנית האם, במקרה של קבצי CSS, אם לא נטען אותם בכל זאת, עיצוב התבנית פשוט ייעלם.
כיצד עושים זאת? על ידי פונקציית wp_enqueue_style

נוסיף לקובץ את הקוד הבא:

<?php
/**
* Load the parent style.css file
*/
function oceanwp_child_enqueue_parent_style() {
// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
$theme = wp_get_theme( 'OceanWP' );
$version = $theme->get( 'Version' );
// Load the stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );

}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

שימו לב !!! קובץ ה-PHP נפתח אך לא נסגר.

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

יצירת תבנית בת באמצעות תוסף:
ניתן ליצור תבנית בת באמצעות תוסף המיועד לצורך כך Child Theme Configurator, תוסף שיצור עבורכם תבנית בת במהירות. (אני באופן אישי אוהב ליצור תבניות בת בקוד שאני כותב).