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

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

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

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

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

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

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

עדכונים

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

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

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

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

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

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

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

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

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

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

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

על הדרך, הצטרפו לרשימת התפוצה !

1. גשו לתיקיית התבניות שלכם וצרו תיקייה חדשה לתבנית הבת, אתם יכולים לתת לתיקייה איזה שם שתרצו, בדוגמא זו אקרא לה twenty-fifteen-child.
2. כנסו לתיקייה וצרו קובץ css. הקובץ חייב להקרא style.css. העתיקו והדביקו את הקוד הבא לקובץ שכרגע יצרתם:

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

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

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

 

תמיכה ב RTL

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

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

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

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

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

סיכום

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

אם יש לכם טיפים לגבי תבניות בת אשמח אם תשתפו אותם איתנו, כתמיד אתם מוזמנים להגיב, לשתף ולעשות לייק 🙂

רועי יוסף

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

תגובות פייסבוק

{ 10 תגובות… הוסף אחת }
  • ליאור 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 עדיין אין יישור לימין כמו בתבנית האם?

    • רועי יוסף 13 באוקטובר 2016, 7:04

      היי שרון,
      (סליחה על התגובה המאוחרת).. האם קיים קובץ rtl.css באותו מיקום של style.css בתבנית הראשית ?

השאירו תגובה

כבר הולכים ? הרשמו לרשימת התפוצה !

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

לעולם לא נשתף את הפרטים שלכם...

קראו גם את:
האם שמעתם על Must Use Plugins בוורדפרס ?
האם שמעתם על Must Use Plugins בוורדפרס ?

Must Use Plugins בוורדפרס הינם תוספים המותקנים בספרייה מיוחדת ומופעלים אוטומטית בכל האתרים של אותה...