בית הספר לוורדפרס » יצירת תבנית בת (Child Theme) בוורדפרס באמצעות תוסף

יצירת תבנית בת (Child Theme) בוורדפרס באמצעות תוסף

נכתב ע"י יוחאי ירמיהו18 שאלות

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

אורך השיעור: 9:13 דקות

קורסים המכילים את השיעור וידאו:

תוכן השיעור:

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

יצירת תבנית בת באמצעות תוסף

הדרך הראשונה והפשוטה ליצירת תבנית בת היא ליצור את תבנית הבת בוורדפרס באמצעות התוסף Child Theme Configurator. אתם יכולים להיכנס אל פאנל הניהול של וורדפרס ולהתקין את התוסף.

לאחר הפעלת התוסף יש להיכנס אל פאנל הניהול ושם תחת הכפתור של "כלים" בתפריט הצדדי יש לבחור באפשרות של Child Themes ושם להתחיל ביצירה של התבנית החדשה.

בעמוד שיפתח תחילה נבחר את התבנית שאנחנו רוצים לייצר עבורה תבנית בת והיא תבנית Astra ולאחר מכן נלחץ על הכפתור של Analyze בשביל לנתח את הנתונים.

בחלון הבא שיפתח נשאיר את ההגדרות כמו שהם ונלחץ על הכפתור של "Create New Child Theme" על מנת לבצע את התהליך של יצירת תבנית הבת בוורדפרס.

איך לבחור את תבנית הבת באתר

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

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

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

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

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

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

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

body {
    background: #000 !important;
}

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

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

אז מה שנעשה זה להיכנס לקובץ function.php ובתחתית הקובץ נכתוב את שורת הקוד הבאה שתייצא קוד אל תוך העמוד.

echo "hello world from functions.php";

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

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

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

הצטרפו לקהילות המובילות של בוני האתרים בישראל

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

קורסים מקיפים ומומלצים ללימוד בניית אתרים

לבנות אתר ב-10 ימים

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

לבנות אתר ב-10 ימים 56 שיעורים שילמדו אותך הכל על בניית אתרים
בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
בונוס 4: אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
בונוס 5: קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
בונוס 7: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
תמיכה לשנה לשאלות בעמודי השיעורים
גישה לקבוצת הפייסבוק
גישה לכל החיים
תעודה הכשרה בסיום הלימודים (קובץ PDF)
גישה לעדכונים ושיעורים חדשים
100% החזר כספי ל-14 ימים

רכשו את הקורס 1092 סטודנטים לפניך (-:

מסלול וורדפרס Expert

למעלה מ-10 קורסים מלאים ומעל 700 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.

בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
וורדפרס Beginner לימוד בניית אתרים למתחילים – (2,250 ₪)
וורדפרס Tool Kit הצעת מחיר + אפיון + צ'ק ליסט + התנהלות עם לקוחות
וורדפרס Next Level מחיר 2,500 ₪
וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
: אלמנטור Ninja הקורס שיהפוך אותך לנינג'ה באלמנטור – (999 ₪)
אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
בונוס 6: Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
בונוס 14: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
בונוס 15: קידום אתרים ל-AI איך להופיע ולקבל כניסות מכל כלי ה-AI השונים
779 שיעורים למתחילים + למתקדמים
תמיכה לשנה לשאלות בעמודי השיעורים
גישה לקבוצת הפייסבוק של הקורס
גישה לכל החיים
תעודה הכשרה בסיום הקורס (קובץ PDF)
גישה לעדכונים ושיעורים חדשים
100% החזר כספי ל-14 ימים

רכשו את הקורס 771 סטודנטים לפניך (-:

יוחאי ירמיהו

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

גדעון לוי
וורדפרס Expert
ערב טוב אצלי בהוסטינגר זה י פנל ?
מה ההתייחסות ואני אני ניגש
1. יוחאי ירמיהו
  הנהלת האתר
  היי גדעון, ערב טוב.
  אני לא בטוח שהבנתי את מה שאלת.
  אבל אם אתה רוצה ליצור תבנית בת עם תוסף אתה יכול ליצור את זה באותה צורה גם בהוסנטינגר.
  והפאנל ניהול של הוסטינגר מאוד דומה לפאנל ניהול של cPanel.
  אז אם אתה צריך לבצע שינוי בקבצים של האתר יש להם גם אזור שמאפשר לך לצפות בקבצים ולבצע שינויים במידה ואתה רוצה. זה פשוט עשוי להיות קצת שונה מ-cPanel רגיל.
  אם לא עניתי לך על השאלה תנסה לכתוב את השאלה פעם נוספת באופן יותר מפורט.
דימה אסכינדזה
וורדפרס Expert
לאחר יצירת תבנית בת, אפשר להסיר את התוסף Child Theme Configurator? או שהוא חייב להישאר פעיל?
1. יוחאי ירמיהו
  הנהלת האתר
  היי דימה, אתה יכול להפעיל את התוסף.
  עד כמה שאני זוכר בדקתי את זה וזה עבד בצורה טובה גם ללא התוסף.
  הצורה הכי פשוטה לבדוק את זה היא לכבות את התוסף ואם אתה רואה שהאתר עובד כמו שצריך ואין בעיות אז אתה יכול גם למחוק אותו אם אתה רוצה.
אוראל רוזנראוך
וורדפרס Expert
היי יוחאי,
עשיתי תבנית בת, הפעלתי אותה באתר ושמתי את הקודים בהתאם למה שאמרת.
אבל בתבנית אחרת- twenty twenty one
הקודים לא עובדים לי.
יכול להיות בגלל התבנית? או שאולי לא עשיתי נכון
1. יוחאי ירמיהו
  הנהלת האתר
  היי אוראל, תבנית הבת היא ייעודית לתבנית האם.
  זאת אומרת שאם יש לך תבנית בשם astra ותבנית בשם twenty אז התבנית בת תתאים רק לתבנית שעבורה יצרת את תבנית הבת.
  אז אם יצרת תבנית בת ל-astra היא תעבוד רק עבור התבנית הזאת. ואם את רוצה להשתמש בתבנית בת עבור twenty את צריכה ליצור תבנית בת לתבנית הזאת או לשנות את ההגדרות ולהתאים אותה אל התבנית של twenty.
  1. אוראל רוזנראוך
    וורדפרס Expert
    תודה על המענה,
    אבל לא לזה התכוונתי.
    אני לא משתמשת בASTRA כפי שהצגת בסרטון, אני משתמשת בtwenty
    יצרתי לה תבנית בת מהתוסף, כפי שהצגת.
    והכנסתי את הקודים לבדיקה, וזה לא שינה לי את הרקע או הוסיף את המשפט.
    אז השאלה שלי אם זה קשור בתבנית בת או שפשוט לא עשיתי את זה נכון
    1. יוחאי ירמיהו
      הנהלת האתר
      שתי האפשרויות יכולות להיות נכונות אבל רוב הסיכויים שעשית משהו לא טוב.
      1) שיצרת את התבנית בת ווידאת שסימנת את האפשרות הנכונות?
      2) אחרי שיצרת את תבנית הבת בדקת שהפעלת אותה בתוך האתר?
      וזה קצת יותר מורכב אבל יש אופציה נוספת ליצור את התבנית גם באופן ידני:
      https://wp-school.co.il/manual-child-theme/
      ובאופן כללי אם את לא מתכננת לעשות שינויים בתבנית ברמת הקוד לפחות כרגע את לא חייבת תבנית בת.
מיכל יוגב
גישה ל-Expert ל-3 חודשים
הי יוחאי .
במידה ואני בתבנית הלו , וכבר הוספתי בתוך האתר תמונות וטקסטים
אם אני עכשיו יוצאת לזה תבנית בת , זה ימחוק לי את השיניים שביצעתי בעמודים ?
1. יוחאי ירמיהו
  הנהלת האתר
  היי, זה לא אמור לגרום לבעיות (לפחות בתיאוריה) אם את תבני תבנית בת.
  אבל זה גם לא קריטי אם לא תשני את התבנית ותישארי עם התבנית הקיימת.
  היום רוב בוני האתרים כבר כמעט ולא עושים שינויי קוד אז זה לא חובה. אפשר להוסיף קוד CSS עם אלמנטור ואם את רוצה להוסיף קוד PHP אפשר להשתמש בתוספים כמו Code Snippets וזה חוסך את היצירה של תבנית חדשה.
  https://wordpress.org/plugins/code-snippets/
שאדי חמוד
וורדפרס Expert
שלום, אני לא מבין למה חשוב ליצור תבנית בת. כשנעשה זאת, התבנית הבת לא תקבל את העדכונים של התבנית המקורית, בעוד שהתבנית המקורית תתעדכן. אני מחפש דרך לשמור על התבנית מעודכנת וגם לשמור על השינויים שביצעתי, אבל להבנתי, תבנית בת לא מאפשרת להשיג את שניהם, נכון? אלה אם יש דרך העבר את השינויים לקבצים החדשים של התבנית המקורית אשר סביר להניח שהקוד שלהם עודכן
1. יוחאי ירמיהו
  הנהלת האתר
  היי, זה די הפוך. אם אתה מבצע שינויים ברמת התבנית או ברמת הקוד של המערכת אז ברגע שאתה עושה אותם בתבנית הבת השינויים יישארו כי הם התבנית לא מתעדכנת.
  לצורך הדוגמה אם הרקע של האתר בתבנית הרגילה הוא בצבע לבן אבל בתבנית הבת אתה עוקף את העיצוב הזה ומגדיר צבע שחור אז גם כאשר אתה מעדכן את התבנית הרגילה השינוי עדיין יישאר כי תבנית הבת לא עודכנה.
  אם אתה משתמש בתבנית הבת כדי ליצור קוד אישי ולשנות את האופן שבו המערכת של וורדפרס עובדת (יותר למתקדמים) אז השינויים יישארו גם כאשר אתה מבצע עדכון לתבנית המקורית.
  אבל היום בגלל שאלמנטור כל כך התפתחו ואתה מבצע את רוב השינויים ואת העיצוב באמצעות אלמנטור אז אתה כבר לא חייב להתקין בתוך האתר תבנית בת ואתה יכול להישאר רק עם התבנית הראשית של האתר.
‫מרדכי ניסנוב‬‎
וורדפרס Expert
היי יוחאי עברתי על השאלות גם של הסרטון הבא בהתקנה של תבנית בת, לא הצלחתי להבין האם היום גם יש צורך להשתמש בתבנית בת, במידה ואני מוסיף HTML ו- CSS ?
1. יוחאי ירמיהו
  הנהלת האתר
  היי מרדכי, זה תלוי באופן שבו אתה בונה אתרים. לרוב בונה האתרים היום מספיק אלמנטור והם לא יוצרים קוד מותאם ובמקרים כאלו אתה לא חייב להתקין תבנית בת.
  אתה יכול להוסיף את הקוד CSS מתוך אלמנטור ואתה יכול להוסיף קוד PHP באמצעות תוסף שנקרא Code Snippets:
  https://wordpress.org/plugins/code-snippets/
  אני בדרך כלל אוהב שיש לי את הקוד CSS, JS ואת הקודים של ה-PHP במקום מסודר אז אני עדיין עובד עם תבנית בת אבל אם אתה לא כותב קוד מותאם לאתרים היום כבר אין בזה צורך.
  1. דוד בייטנר
    וורדפרס Expert
    היי יוחאי,מה זה קוד מותאם תן ,דוגמא פרקטית של המציאות של היום מבחינת תועלת לבונה אתרים
    1. יוחאי ירמיהו
      הנהלת האתר
      היי דוד, קוד מותאם זה בעיקר קוד CSS שמשנה את העיצוב.
      אז למשל בעבר הרחוק ההתאמה של אלמנטור לא הייתה מושלמת ואני הייתי מוסיף קוד CSS משלי שמשנה את העיצוב ומחפה על שינויים שלא הצלחתי לעשות באלמנטור.
      ברמות היותר מתקדמות אפשר גם לשנות את כל המערכת של וורדפרס עם קוד מותאם, אז בתבנית שלי יש קוד שמבטל למשל יצירה של מספר גדלים של תמונה בוורדפרס, יש קוד שמבטל חלקים במערכת כדי לשפר מהירות.
      האתר של בית הספר של וורדפרס למשל וכל המערכת קורסים נבנתה בפיתוח אישי והקוד של המערכת נמצא בתוך תבנית הבת.
      אבל בתכלס בשונה מבעבר הרחוק היום אתה לא חייב להוסיף תבנית בת, את רוב השינויים לעיצוב אתה כנראה תעשה עם אלמנטור ואלמנטור מאפשרים גם להוסיף CSS בתוך העיצוב.
      ואם תצטרך בעתיד להוסיף קוד ולשנות את המערכת (שזה יותר למתקדמים) יש תוספים כמו Code Snippets שהזכרתי בתגובה מעל שמאפשרים לך לעשות את זה ללא תבנית בת:
      https://wordpress.org/plugins/code-snippets/
      אז היום זה כבר לא חובה להשתמש בתבנית בת.
      1. דוד בייטנר
        וורדפרס Expert
        עוד לא הבנתי במילים פשוטות במה זה עוזר כל כך ,אבל לפי ההסבר שלך זה כשה אני יהיה מתקדם
        ויהיה לי אתר ,אבל דפים מסוימים באתר לא יהיו בדירוגים שרציתי נגיד דף ראשון באחד המיקומים למשל, אז יכול להיות שבזכות קוד אני יוכל לשפר את האתר מבחינת מהירות יותר טובה נגיד ממה שהיה ואז יכול להיות שזה יבדיל ביני לבין המתחרים וייתן לי בוסט למעלה ? בהנחה והאתר שלי הוא
        "לפי הספר"
        אני יבהיר את השאלה בהנחה ועשיתי את כל המסלול כולל המתקדם ,ובניתי אתר לפי כל ההנחיות שלך .. אבל קוד לא למדתי אבל אני יגיע גם לקורס האחרון של ה ai שעשיתה..
        
        יוחאי ירמיהו
        הנהלת האתר
        אפשר לבצע את השינויים של המהירות גם ללא תבנית בת, כי יש תוספים שמאפשרים לעשות את זה, אז בגדול היום לא חייב להתקין תבנית בת אם כרגע אתה לא יודע מה תעשה איתה.
        וכן שתגיע לקורס של ה-AI אני מדבר שם על כתיבת קוד וכתיבת CSS עם AI וגם שם אני מציג איך להוסיף את הקוד ללא תבנית בת.
        אז בשורה התחתונה לפחות כרגע אתה לא צריך תבנית בת ואם בעתיד תיתקל במשהו שמצריך את זה אז תחזור לשיעור ותיצור אותה.