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

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

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

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

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

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

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

עדכונים

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

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

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

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

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

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

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

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

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

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

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

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

1. גשו לתיקיית התבניות שלכם וצרו תיקייה חדשה לתבנית הבת, אתם יכולים לתת לתיקייה איזה שם שתרצו, בדוגמא זו אקרא לה twenty-fifteen-child.
2. כנסו לתיקייה וצרו קובץ 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' );


 

תמיכה ב RTL

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

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

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

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

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

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

סיכום

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

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

רועי יוסף

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

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

{ 10 תגובות… הוסף אחת }

השאירו תגובה

שיתופים
קראו גם את:
wordpress-pagination-no-plugin
הוספת עימוד ממוספר (Pagination) בתבנית וורדפרס

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