יצירת תבנית בת בוורדפרס באופן ידני
נכתב ע"י יוחאי ירמיהו13 שאלות
תיאור קצר לשיעור: בשיעור הקודם למדנו איך ליצור תבנית בת באמצעות תוסף לוורדפרס. בשיעור זה ניכנס יותר לצד הטכני ונבין איך ליצור את תבנית הבת גם באופן ידני.
אורך השיעור: 9:22 דקות
קורסים המכילים את השיעור וידאו:
תוכן השיעור:
בשיעור הקודם למדנו מה זה תבנית בת וגם איך ליצור תבנית בת באמצעות תוסף. בשיעור הזה ננסה לצלול לפן הטכני יותר וננסה להבין איך ליצור את התבנית באופן ידני ללא סיוע של תוספים.
יצירת תיקייה של תבנית בת בשרת האחסון
השלב הראשון שאנחנו צריכים לעשות בשביל ליצור תבנית זה להיכנס אל שרת האחסון וליצור תיקייה חדשה שמכילה את שם התיקייה הישנה עם התוספת של המילה child.
לצורך הדוגמא עם השם של התבנית הקיימת הוא: astra ניצור תבנית חדשה בשם astra-child. חשוב לציין שבחירת השם יכולה גם להיות שונה אבל נהוג פשוט להוסיף את המילה child לשם של התיקייה הקיימת וזה מאפשר גם ליצור יותר סדר וארגון כאשר יש יותר מתיקייה אחת של התבנית כך נדע בוודאות ש-2 התבניות מקושרות.
העתקת קובץ צילום מסך של התבנית
כעת אנחנו מתחילים להעתיק את הקבצים כדי ליצור את התבנית בת בתצורה תקינה. הקובץ הראשון שאנחנו רוצים ליצור זה קובץ עם השם screenshot.png או screenshot.jpg שיציג את צילום המסך של התבנית כאשר אנחנו נכנסים אל פאנל הניהול בוורדפרס. לא חובה להעתיק את התמונה ואם לא נעשה את זה התבנית פשוט תוצג ללא תמונה.
התהליך מאוד פשוט ולא צריך להסתבך, פשוט קחו את התמונה הקיימת בתבנית הרגילה של astra והעתיקו אותה אל תבנית הבת שכרגע יצרנו שהיא astra-child.
יצירת קובץ style.css
השלב הבא בתהליך יהיה יצירת קובץ CSS המכיל את פרטי תבנית הבת. את התוכן שאתם צריכים להכניס בתוך הקובץ תוכלו להעתיק מתוך הקוד מתחת. אם אתם משתמשים בתבנית אחרת אז תצטרכו לשנות את הפרטים בהתאמה כפי שאסביר בסרטון של השיעור שפתוח רק למשתמשים רשומים.
/* Theme Name: Astra-Child Template: astra */
יצירת קובץ CSS נוסף בשם child-style.css
כעת בשונה מהתוסף אני מעדיף לא לבצע שינויים בתוך הקובץ של style.css ואני אצור קובץ נוסף שנקרא child-style.css ומתוך הקובץ הזה אנחנו נבצע את השינויים בהמשך הדרך.
את הקובץ הזה אנחנו הולכים לטעון בפסקה הבאה באמצעות הקובץ functions.php.
יצירת קובץ functions.php
הקובץ הבא שאנחנו הולכים ליצור זה הקובץ functions.php ומתוך הקובץ הזה אנחנו נוכל לעשות שינויים מורכבים יותר באמצעות קוד PHP שאנחנו יכולים להוסיף לאתר על מנת לשנות את הצורה שבה התבנית פועלת או את הצורה שבה כל המערכת של וורדפרס פועלת.
כמובן ששינוי זה מצריך ידע יותר נרחב בוורדפרס והקובץ הזה פחות מתאים למתחילים.
בשביל לטעון את קובץ ה-child-style.css נכניס לתוך הקובץ functions.php את הקוד מתחת שהמטרה שלו היא לטעון את הקובץ CSS שנוכל לעשות בו שינויים במידה ונרצה בכך.
<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?>
<?php
add_action('wp_enqueue_scripts', function() {
wp_register_style( 'yy_child_style', esc_url( get_stylesheet_directory_uri() . '/child-style.css' ) );
wp_enqueue_style( 'yy_child_style' );
}, 999999999);
?>בדיקה שהכל עובד באופן תקין
לאחר שסיימנו לבצע את השינויים מה שנותר לעשות זה לוודא שהכל עובד באופן תקין וכמו שצריך. תחילה ניכנס אל אזור הניהול ונפעיל את תבנית הבת שכרגע הגדרנו.
אם עשינו את הכל בהצלחה תופיע לנו תבנית בת שנוכל פשוט לבחור באותה צורך שהופיעה התבנית כאשר יצרנו את התבנית באמצעות התוסף בשיעור הקודם.
לאחר הפעלת התבנית השלב הבא יהיה לקחת את הקובץ child-style.css שכרגע יצרנו ואל תוך הקובץ הזה נכניס את הקוד הבא לשינוי הרקע הלבן לשחור ואם זה יעבוד זה אומר שביצענו את התהליך באופן תקני.
body { background: #000 !important; }
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- לבנות אתר ב-10 ימים 56 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 7: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הלימודים (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
הטבה שאסור לפספס 60% הנחה
מחיר רגיל 750 ש"ח
299 ₪
ניתן לחלק ל-12 תשלומים של 25 ₪
רכשו את הקורס 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 ימים
הטבה שאסור לפספס 40% הנחה
מחיר רגיל 5,999 ש"ח
3,499 ₪
ניתן לחלק ל-12 תשלומים של 292 ₪
רכשו את הקורס 771 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג'ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
13 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
היי יוחאי,
אחרי שביצעתי את כל השלבים של הוספת תבנית בת וניסיתי לבדוק את האתר, האתר פשוט לא עולה. ניסיתי לנקות קאש, ctrl+F5 שום דבר לא עוזר. מחקתי את התבנית בת וניסיתי לחזור לתבנית אסטרה הראשית וגם היא לא עובדת, האתר פשוט לא עולה. אין שום הודעת שגיאה אלא פשוט מקבל דף לבן. מחקתי גם את האסטרה ונישארתי רק עם הלו אלמנטור אך נשאר אותו דבר. מה זה יכול להיות לדעתך?
חייב לציין שכל העמודים שיצרתי משיעורים קודמים נשארו כמו שהיו אך לא ניתן להציג אותם דרך לוח הבקרה.
תודה,
שרגא
היי שרגא,
אם אני מבין נכון כרגע יש לך גישה לאזור ניהול של האתר ופשוט לא רואים את התוכן ברגע שאתה מנסה להיכנס לדומיין הראשי נכון?
מחקת את התבנית בת מתוך אזור ניהול של הדומיין ולאחר מכן הפעלת מחדש את התבנית של אסטרה? אם אתה מוחק את התבנית בת מבלי להפעיל תבנית אחרת אז זה עשוי לגרום להבעיה הזאת.
ברגע שאתה מוחק את תבנית הבת ומחזיר את התבנית הראשית לפעילות זה אמור לפתור את הבעיה אז זה קצת מוזר.
תנסה להיכנס מתוך האזור ניהול אל התיקייה הראשית של הדומיין. תראה אם בתוך התיקייה הזאת יש לך קובץ שנקרא error_log ובמידה וכן תנסה להעתיק לכאן את השגיאה שאתה מקבל.
היי יוחאי,
איכשהוא זה הסתדר אחרי עדכון גרסת וורדפרס.
תודה בכל אופן
שרגא
ערב טוב יוחאי
רציתי לשאול למה בעצם לערוך את העיצוב בקובץ חדש child-style.css ולא בקובץ style.css
הרי ממילא זה קובץ שהוא בתבנית הבת ולא במקורי
ועוד שאלה, איך בעצם האתר יודע לטעון ולהעדיף את השינויים בתבנית החדשה על פני התבנית הבסיסית
תודה מראש
היי איציק, הקובץ של Style.css משפיע על נתונים של התבנית שמוצגים גם במערכת של וורדפרס.
במידה ואתה משנה את הנתונים הלא נכונים אני חושב שזה עשוי לגרום בעיות ובגלל זה אני מעדיף לערוך את העיצוב מקובץ אחר ולא מתוך style.css.
ובקשר לשאלה השנייה עד כמה שאני זוכר הקבצים של התבנית בת נטענים לאחר הקבצים של התבנית הרגילה ובגלל זה השינויים של הקבצים האלו משפיעים גם על שינויים של הקבצים של התבנית הרגילה.
וגם אם הם לא נטענים אחרי אז השינויים עדיין מופיעים אם אין התנגשות של קוד גם בתבנית האחרת.
לפי מה שענית עכשיו, כדאי ליצור קובץ נוסף בשם child-functions.php או שבמקרה הזה להישאר על המקורי (בתיקיית הבת כמובן)
לא, ב-Function אין צורך ליצור קובץ חדש. זה בסדר לעבוד על הקובץ כמו שהוא (עוד לא נתקלתי בבעיה עם הקובץ).
היי יוחאי התקנתי תבנית בת בשני השיטות שלימדת, רציתי לשאול שאני עובד עם אלמנטור ואני מוסיף CSS, אני ממשיך להוסיף רגיל דרך CSS מותאם באלמנטור ?
היי מרדכי, כן שום דבר לא השתנה.
יש לך עכשיו את האפשרות אם אתה רוצה להוסיף את הקוד מתבנית הבת או דרך אלמנטור. אם עד היום הוספת את ה-CSS דרך אלמנטור אתה יכול להמשיך באותה שיטה.
אני ברוב המקרים מעדיף לבצע את השינוי CSS בקובץ נפרד דרך תבנית הבת אבל אני יודע שהרבה בוני אתרים היום מעדיפים להוסיף את זה לתוך אלמנטור ואם זה יותר נוח לך אתה לא חייב להשתמש בקבצים של תבנית הבת.
תודה על ההסבר שחכתי לציין ובזמן העדכונים לאלמנטור ולתוספים הקוד יכול להימחק אם אין תבנית בת ?תודה מראש
הקוד CSS לא אמור להימחק מאלמנטור ואם אתה משתמש בתוספים כמו Code Snippet לשינויים עם קוד PHP אז גם שם הקוד לא אמור להשתנות.
פעם את עיקר הקוד והשינויים הייתה יוצר מתוך התבנית ואם היית משתמש בתבנית הראשית אז הקוד היה נמחק אבל היום יש גם דרכים להוסיף את הקוד באלמנטור וב-Code Snippet וזה גם תחליף טוב שיאפשר לך לשמור את השינויים מבלי שהם ימחקו.
היי יוחאי, יש לי כמה שאלות קצרות:
1. יש אולי מקום מסודר שבו אני יכול לשאול אותך שאלות כלליות? לפעמים כשיש לי שאלה, אני חוזר לסרטון שקשור אליה ושואל שם בתגובות – אבל אולי יש דרך נוחה יותר?
2. אני זוכר שאמרת שלא כדאי להשתמש בכתובות URL בעברית, ועדיף באנגלית. אבל מה לגבי שילוב של מילות מפתח בעברית בתוך ה-URL, במיוחד כשאני פונה רק לקהל ישראלי?
3. אני חושב לשנות ולעצב מחדש את עמוד המוצר של ווקומרס – ממש דרך הקבצים ב־cpanel. הכוונה היא לבנות קובץ חדש עם קוד מותאם אישית שישפר את יחס ההמרה. אני יודע שצריך לעשות את זה בתבנית Child כדי שהשינויים לא יימחקו בעדכונים. אשמח לדעת מה דעתך, והאם זה בכלל שווה את ההשקעה לדעתך – כי זה נראה כמו עבודה לא קטנה.
4. בדף מוצר בווקומרס. האם כותרת המוצר היא הh1? אם כן אז בתיאור לא כדאי להוציא עוד h1 נכון ?
היי שאדי,
1) אם זה שאלות כלליות יותר כמו כאן שזה לא קשור לשיעור אז יש לנו קבוצות וואטסאפ וקבוצות פייסבוק. אני פחות פעיל בקבוצת הוואטסאפ אבל משתדל לסייע שם ואפשר
לשאול שם שאלות מהסוג הזה:
https://www.facebook.com/groups/wpschoolgroup
2) אם זה לצורך קידום אני פחות ממליץ על שימוש בכתובות URL בעברית, זה הופך את הקישור לסוג של גיבריש עם אתה מנסה להעתיק את הקישור לאחר מכן, אני אם לא חושב שיש לזה כזה אפקט משמעותי על הקידום.
3) זה לא כזאת עבודה רצינית כשאתה יודע מה לעשות, אבל יצא לי בעבר לראות ששיניתי את הקוד של העמוד תודה מתוך הקבצים ואז ווקומרס התחילו לעשות שינויים בעדכונים שפגעו בתצוגה של העמוד.
אם יש לך גישה לקורס של החנויות אז עדיף לדעתי לעצב את העמוד מחדש כל עוד זה אפשרי דרך בונה התבנית של אלמנטור. יש לך בקורס מידע על זה במודול של "עיצוב עמוד החנות + עמודי ארכיון מוצרים + עמוד מוצר"
4) כן כותרת המוצר היא H1 והעדיפות היא להשתמש בה רק פעם אחת בעמוד.