מדריך ליצירת תבנית בת (Child Theme) בוורדפרס

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

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

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

יצירת התבנית

דיברתי מספיק, הגיע הזמן לתכלס.
במדריך זה ניצור תבנית בת לתבנית twentysixteen של וורדפרס.
ראשית, נפתח תיקייה בשם twentysixteen-child בתיקיית themes.
הערה: השם יכול להיות איזה שם שתרצו, התוספת "child-" היא פשוט היא תוספת מקובלת לתבנית בת.
בתוך התיקייה של תבנית הבת חייבים להיות 2 הקבצים הבאים: style.css ו-functions.php.

style.css

צרו קובץ בשם style.css והכניסו לתוכו את התוכן הבא:

/*
 Theme Name:     Twenty Sixteen Child Theme
 Template:       twentysixteen
*/

שורה מספר 2 מגדירה כי שם התבנית הוא Twenty Sixteen Child Theme.
שורה מספר 3 מגדירה כי התבנית twentysixteen היא תבנית האם.

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

functions.php

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

<?php
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'parent-rtl-style', get_template_directory_uri().'/rtl.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

אני רוצה שתשימו לב ל-2 נקודות חשובות:
1. קובץ ה-PHP נפתח אך לא נסגר.
2. שורה מספר 3 הוסיפה את קובץ rtl.css, נכתוב את שורה זו רק במידה והתבנית שלכם תומכת rtl (אם יש בתיקיית התבנית rtl.css – היא תומכת).

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

יצירת תבנית בת ללא קוד

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

סיכום

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

בהצלחה!

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


רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)

10 תגובות בנושא “מדריך ליצירת תבנית בת (Child Theme) בוורדפרס”

  1. למה שהעדכון יעלם , לא ככ הבנתי ?
    לא ככ הבנתי עד הסוף – למה צריך תבנית בת .
    אשמח אם בא לך להרחיב

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

  2. אם לא עשיתי תבנית בת כשפתחתי את הבלוג, אלא עכשיו שנתיים אחרי שהבלוג באויר. איך אני מעבירה את השינויים שנעשו עד כה לתבנית הבת?

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

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

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *