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

קצת על תבניות בת בוורדפרס (Child Themes)

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

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

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

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

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

עדכונים

במידה ותשנו את תבנית האב ללא שימוש בתבנית בת יש ברשותכם שתי אפשרויות:

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

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

ארגון וסדר בקוד

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

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

יצירת תבנית בת בוורדפרס

יצירת תבנית בת הינה פעולה מאד פשוטה. בכדי ליצור תבנית בת לתבנית האב שלכם אתם נדרשים לבצע את שלושת הפעולות הבאות:

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

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

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

הצטרפו לרשימת התפוצה!
  • גשו לתיקיית התבניות שלכם וצרו תיקייה חדשה לתבנית הבת, אתם יכולים לתת לתיקייה איזה שם שתרצו, בדוגמא זו אקרא לה twenty-fifteen-child.
  • כנסו לתיקייה וצרו קובץ CSS. שימו לב כי הקובץ חייב להקרא style.css. העתיקו והדביקו את הקוד הבא לקובץ שכרגע יצרתם:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://yourwebsite.com/twentyfifteen-child/
Description: My first child theme, based on Twenty Fifteen
Author: Roee Yossef
Author URI: https://savvy.co.il
Template: twentyfifteen
Version: 1.0.0
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen
*/

שתי השורות ההכרחיות בקוד מעלה הן בשורות 2 ו 7. שורה 2 אומרת לוורדפרס את שם התבנית שלכם וזו תוצג בלוח הבקרה של וורדפרס. שורה 7 אומרת לוורדפרס לאיזו תבנית עליה להתייחס כתבנית האב כאשר שם זה צריך להיות שם התיקייה של תבנית האב. שאר השורות די מדברות בעד עצמן חוץ מהשורות Text Domain ו Tags.

Text Domain צריך להיות ייחודי לתבנית ובו תשמשו במידה ותשתמשו בפונקציות של תרגום לתבנית. תנו מבט כאן לעוד פרטים. Tags הוא רשימת כל התגיות של התבנית הבאות לידי בטוי אך ורק ב WordPress Theme Repository, בדוגמא זו העתקתי אותן מהקובץ style.css של תבנית האב.

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

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

<?php 

function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

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

תמיכה ב RTL

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

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

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

הוספה / קריאה לקבצים בתבנית הבת

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

function enqueue_parent_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
	wp_enqueue_style( 'rtl-style', get_template_directory_uri().'/rtl.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

שימו לב – במידה ואתם צריכים להוסיף או לקרוא לקבצי Javascript וקבצי CSS הנמצאים בתיקייה של תבנית הבת שלכם, עליכם להשתמש בפונקציה get_stylesheet_directory ולא בפונקציה get_template_directory_uri כפי שאתם רואים בשורה מספר 4.

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

הנה דוגמה אגב, שבמקרה זה אינה מתייחסת לנכסי CSS ו Javascript,  אך משתמשת ב require_once ומראה כיצד ניתן להשתמש ב get_stylesheet_directory על מנת לקרוא לקובץ PHP מסויים הנמצא בתיקייה של תבנית הבת:

require_once( get_stylesheet_directory() . '/my_included_file.php' );

מאחורי הקלעים – המכניקה של תבניות בת

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

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

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

סיכום

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

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

רועי יוסף
רועי יוסף

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

{ 24 תגובות… הוסף אחת }
  • ליאור 27 ביוני 2015, 22:55

    תודה! עשה לי סדר בראש!

  • שלומי כהן 16 ביולי 2015, 7:21

    אחלה מאמר!
    תודה רבה. בהחלט גרם לי לא לפחד מיצירת תבנית בת.

    שתי שאלות:
    1. מה דעתך לגבי שימוש בתוסף שיוצר תבנית בת?
    2.בתבנית (פרימיום) שכבר יצרו לה תבנית בת, זה אומר שהכל מוכן כבר?

    • מנהל מערכת 17 ביולי 2015, 20:00

      היי שלומי, תודה על התגובה !

      לגבי שאלותיך,
      1. איני רואה את הטעם להשתמש בתוסף, יצירת תבנית בת היא תהליך מאד פשוט…
      2. כן, זה אומר ש״הכל״ מוכן כבר…

      בהצלחה !

  • הראל 31 ביולי 2015, 8:36

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

  • רימון 19 בינואר 2016, 13:12

    שלום לך,

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

    תודה רבה. רימון

  • Michael 22 במאי 2016, 11:25

    כדאי להוסיף בקובץ הפונקציות..

    // Exit if accessed directly
    if ( !defined('ABSPATH')) exit;
  • יוסי 9 באוגוסט 2016, 21:46

    תודה רבה! עזרת לי בעיקר עם ה RTL.

  • שרון 6 באוקטובר 2016, 18:26

    מה הסיבה שגם אחרי הוספת שורת ה- RTL עדיין אין יישור לימין כמו בתבנית האם?

  • vicky 3 בינואר 2018, 9:48

    שלום רועי,

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

  • זמיר 7 בפברואר 2018, 20:13

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

    • רועי יוסף 7 בפברואר 2018, 20:22

      היי זמיר 🙂

      הערך של תבנית בת היא מעבר ליכולת לערוך את ה CSS. מעבר לכך, הרבה יותר נוח למפתחים לעבוד מול ה IDE המועדף עלייהם מאשר לשנות את הקוד בלוח הבקרה של וורדפרס, בדיוק כמו שנוח יותר לערוך את functions.php או כל קובץ אחר ב IDE מסודר. מה גם שבמידה ונדפק מסד הנתונים, מכל סיבה שהיא, ה Custom CSS של התבנית יימחק.

      עריכה של קוד צריכה להתבצע ב IDE כגון PhpStorm מהרבה מאד סיבות…

  • אליאור 27 באפריל 2018, 15:23

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

    • רועי יוסף 27 באפריל 2018, 15:30

      היי אליאור,

      בצע חיפוש בבלוג ל״הוספת נכסים״ ותמצא מדריך מפורט על הוספת קבצי css ו javascript באתרי וורדפרס… אני פשוט לא מול מחשב בשביל לשלוח לך לינק..

      • אליאור 27 באפריל 2018, 19:00

        רועי יא גבר, הבנתי בסוף מה שאלתי אותך חח , משהו אחרון לגבי התבנית בת –

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

  • אליאור 28 באפריל 2018, 20:19

    טוב אז כנראה שכחתי משהו כי היא לא מופיעה לי בתור תבנית בלוח בקרה ..

  • אליאור 28 באפריל 2018, 20:55

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

    Broken Themes
    The following themes are installed but incomplete.
    Name Description
    OceanWP Child The parent theme is missing. Please install the "OceanWP" parent theme.

    יש פתרון לזה?

  • שלי 15 ביולי 2018, 1:25

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

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

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

    • רועי יוסף 16 ביולי 2018, 16:43

      היי שלי 🙂

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

השאירו תגובה

פעימות
Up!
איפוס סיסמה בוורדפרס דרך phpMyAdmin
איפוס סיסמה בוורדפרס באמצעות phpMyAdmin

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