דף הבית » טריקים וטיפים, מומלצים, סקירת תבניות

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

25 בדצמבר 2010 | מאת רמי | 21 תגובות | תגיות: , , ,

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

תבנית  Twenty Ten בעברית

תבנית Twenty Ten בעברית

יצירת תבנית בת

יצירת תבנית בת היא פשוטה למדי, יש ליצור ספרייה חדשה תחת ספריית התבניות (wp-content/themes/) ובה ליצור קובץ style.css חדש.

  • wp-content
    • themes
      • twentyten
      • child-theme
        • style.css

בתוך קובץ ה-style.css נגדיר מספר הגדרות כמו שם התבנית, התיאור, יוצר התבנית וכו… ההגדרה הכי חשובה לצורך יצירת תבנית-בת היא ההגדרה Template שבעזרתה אנו מגדירים מי היא תבנית-האם של התבנית שלנו. דוגמא בסיסית להגדרות ש בתוך קובץ ה-style.css בתבנית-בת:

/*
Theme Name:     Twenty Ten Child Theme
Theme URI:      http: //www.wp-tricks.co.il/
Description:    Child Theme for the Twenty Ten theme
Author:         Author Name
Author URI:     http: //www.wp-tricks.co.il/
Template:       twentyten
Version:        1.0
*/

דוגמא לשינויים בתבנית בת

על מנת להמחיש את התהליך, אנו ניצור תבנית-בת בשם Test Theme שתשתמש בכל התכונות של התבנית Twenty Ten אבל נכניס מספר שינויים קטנים שימחישו לכם באיזו קלות ניתן לבנות תבנית-בת.

שינויים בקובץ style.css

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

/*
Theme Name: Test Theme
Template:   twentyten
*/

@import url("../twentyten/style.css");
#site-title a { color: #990000; }

בקובץ style.css שיצרנו ייבאנו את קובץ ה-CSS מהתבנית המקורית (בעזרת @import), שינינו את הצבע של site-title לאדום.

הערה: המערכת מחליפה את קובץ ה-CSS של התבנית המקורית בקובץ ה-CSS של התבנית הבת לכן יש צורך לבצע יבוא של הקובץ המקורי (בעזרת @import).

שינויים בקובץ הפונקציות function.php

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

function site_favicon() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="'. get_bloginfo('stylesheet_directory') .'/images/favicon.ico" />';
}
add_action('wp_head', 'site_favicon');

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

שינויים בקבצי התבנית

ניתן גם לשנות את כל קבצי התבנית – index.php, archive.php, category.php, tag.php וכו… יש לזכור שכל קובץ שאתם מוסיפים לתבנית הבת, מחליף את אותו הקובץ בתבנית המקורית.

הערות סיכום

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

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

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

21 תגובות »

  • מאור כותב :

    חשוב להזכיר שיש להשתמש במידת הצורך בקבוע STYLESHEETPATH במקום TEMPLATEPATH, כדי להתייחס למיקום תיקיית הערכה.

  • חולי כותב :

    אהלן רמי,
    תודה שוב על כל המאמרים המחכימים כאן…
    יש לי כמה שאלות… 🙂

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

    תודה רבה

    חולי

  • רמי כותב :

    חולי, ישנן כמה דרכי פעולה אפשריות, אבל במקרה כמו שתואר עדיף לשנות את שם הספרייה ואת שם התבנית (Theme Name: Test Theme) בקובץ style.css.

    לעניין האיטיות, שימוש בתבניות-בת לא מאט את פעילות האתר.

  • חולי כותב :

    תודה רמי,
    אנסה את זה מיד.

  • עומר לוי כותב :

    מאמר מצויין, אין עליך 🙂

  • נעם כותב :

    שלום
    לא הבנתי מה זאת אומרת ואיך ליצור ספרייה חדשה תחת ספריית התבניות (wp-content/themes/) ובה ליצור קובץ style.css חדש.
    איך עושים זאת???
    תודה רבה
    נעם

  • noam888 כותב :

    אשאל שוב את אותה השאלה- אך הפעם כמשתמש רשום

    שלום
    לא הבנתי מה זאת אומרת ואיך ליצור ספרייה חדשה תחת ספריית התבניות (wp-content/themes/) ובה ליצור קובץ style.css חדש.
    איך עושים זאת???
    תודה רבה
    נעם

  • רמי כותב :

    נועם, אתה צריך ליצור ספרייה חדשה בספריית התבניות (לדוגמא wp-content/themes/new-theme). איך עושים זאת? בעזרת תוכנת FTP.

  • גיא כותב :

    היי,

    תודה רבה על הפוסט המעולה!

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

    תודה רבה!

  • אודי כותב :

    רמי,

    מה לגבי שינויים בקבצי PHP בהם הכנסתי קודים של plugins שונים?
    איך שומרים את זה ב- child theme?
    תודה.

  • רמי כותב :

    אודי,
    לתבניות ניתן ליצור "תבנית-בת" כדי לרשת את התכונות של תבנית האם.

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

  • אודי כותב :

    רמי,

    ההסבר לפילטר כותב להכניס שורות קוד בעמודי ה- PHP שבהם אני רוצה שיופיע.
    מה שאני מבין זה ש child theme לא פותר את כל הבעיות שנוצרות משינויים מותאמים אישית שאני מכניס לתבנית, ואולי עדיף לשמור קובץ וורד עם תיעוד של השינויים במקום לבנות Child theme?

  • רמי כותב :

    אודי,
    אנסה גישה אחרת כדי להסביר לך את היתרון בתבנית-בת.

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

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

  • אודי כותב :

    רמי,

    זה ברור לי כמובן, עוד מהסברך הראשון 🙂
    אבל מה קורה במקרה שעורך התבנית ביצע שינויים במבנה קבצי ה-CSS או ה-PHP שנמצאים אצלי בתבנית-בת?
    הרי אצטרך לעדכן שוב גם את תבנית הבת, אני צודק?
    ושוב, תודה על התשובות…

  • רמי כותב :

    או קיי, עכשיו הבנתי מה שאלת

    בדוגמא שלך, כשבתבנית המקורית מעדכנים קבצי PHP או קבצי CSS, האם תצטרך לשנות שוב תבנית בת? זה תלוי במצב. ברוב המקרים לא תצטרך לשנות את התבנית-הבת, אבל יש מקרים שכן.

    בוא נגיד שיוצר התבנית יצר קובץ page.php ואתה יצרת בתבנית הבת שלך קובץ page.php שהחליף את הקובץ המקורי, כלומר האתר שלך משתמש ב-page.php שאתה יצרת ולא של התבנית המקורית. כשהוא יעדכן את התבנית המקורית ה-page.php החדש שלו ישפיע על האתר שלך כי תבנית-בת מחליפה את קבצי ה-PHP המקוריים.

    עכשיו בוא נדבר על עדכון על CSS. ב-CSS זה לא מחליף אלא יורש את התכונות כי אנחנו עושים @import. בתבנית הבת אנחנו משתמשים בהגדרות ה-CSS המקוריות ומוסיפים להן תכונות חדשות. כשהתבנית המקורית מתעדכנת אנחנו יורשים גם את עדכוני ה-CSS החדשים.

    מתי נצטרך לעדכן את ה-CSS בתבנית הבת? כאשר התוספות משפיעות על האתר שלנו בצורה לא רצויה.

  • איתן כותב :

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

  • רמי כותב :

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

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

    body {
      background:#eee;
    }

    ובקובץ הפונקציות:

    function remove_custom_background() {
      remove_theme_support( 'custom-background' );
    }
    add_action( 'after_setup_theme', 'remove_custom_background', 11);

    זהו, כיבינו את הכלי המובנה של וורדפרס לשינוי דינאמי של צבע רקע, והגדרנו צבע קבוע דרך ה-CSS. מקווה שהבנת.

  • גידי כותב :

    הי רמי
    יש לי שאלה בנושא

    יצרתי CHILED THEME בצעתי IMPORT לקובץ CSS המקורי
    שיניתי דברים קטנים כמו כיוונים. הכל טוב ויפה עד כאן.

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

    גיליתי די בקלות בעזרת גוגל כרום איזה שדות יש לשנות

    העניין שאני רוצה שהשינויים האלה יקרו רק ב CHILED THEME.

    פעלתי בשתי שיטות שלא עבדו משום מה

    הראשונה היא לבצע IMPORT לקובץ CSS ואז לרשום את השינויים
    @import url("../modernize/stylesheet/superfish.css");

    הצורה השנייה שניסיתי היא ליצור תחת ה CHILED THEME ספריה בשם STYLESHEET
    ואז העתקתי את הקובץ המקורי וביצעתי בו שינויים

    העניין שבשני המקרים שום שינוי לא נראה בשטח.

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

    הכתובת של האתר
    http://www.yr-law.dreamhosters.com/

    אלו השינויים שהכנסתי
    /* תפריט ראשי – יישור לימין של כל התפריט כגוש */

    .sf-menu {
    float: right;
    }

    /* תפריט ראשי – יישור לימין של כל התפריט סידור פנימי של סדר */
    .sf-menu li {
    float: right;
    }

    מקווה שזה יעזור לעוד אנשים שנתקלו בבעיה הזו של טיפול ביותר מ CSS אחד תחת CHILD THEME

    המון תודה מראש
    גידי

  • רמי כותב :

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

  • שריה כותב :

    שלום
    תודה על הפוסט 🙂

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

  • רן כותב :

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

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

    רעיונות לפתרון?

הוסף תגובה !

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

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>