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

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

פעם לעומת היום

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

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

מסיבה זו בשנים האחרונות תבניות וורדפרס ורסטליות (כמו Enfold, Divi או Flatstome ורבות אחרות) נהיו הרבה יותר פופולריות משום שהן מאפשרות למשתמש, באמצעות ממשק של drag and drop, לייצר מבנה מקורי משלו לתוכן העמודים השונים באתר ולפעמים גם כוללות בתוכן סוגי עמודים נוספים (כלומר חוץ מעמודי פוסטים ועמודים רגילים התבנית יוצרת post type חדש כמו עמודי פורטפוליו או עמודי קטלוג מוצרים לחנות וכן הלאה)

למה לי להיפרד מהתבנית?

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

מה מסובך בהחלפת תבנית ואיך מתגברים על זה?

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

שבירת המראה של כל התוכן

אם השתמשת באותם תבניות שמאפשרות לך בניה באמצעות ממשק drag and drop אז למעשה יצרת את העמודים שלך באמצעות short codes של אותה התבנית, כלומר, ברגע שאתה מחליף את התבנית לתבנית אחרת כל אותם פיסות קוד של התבנית הישנה כבר מאבדות את המשמעות שלהן עבור וורדפרס (כי התבנית ש'תירגמה' אותן כבר איננה) ולכן כל המבנה של העמודים באתר יתחרבש ויציג את הקוד של התבנית הישנה בלי להפעיל אותו ובקיצור – זה יראה נורא ואיום 😱

אז מה עושים? – מהסיבה הזו, במקום להחליף את התבנית שלי בתבנית אחרת, בחרתי לבנות את האתר שלי מחדש באלמנטור, שהוא תוסף שמאפשר לך לבנות עמודים (וגם תבניות אבל על כך נתעכב בהמשך) ומה שנהדר בו במקרה שלנו הוא (מעבר ל- WSIWYG שיש לו בזמן העריכה ונוחות העיצוב והדיוק שניתן להגיע בו, שהם לדעתי הגבוהים ביותר מכל ה- page buildr-ים שיש כרגע בשוק של וורדפרס) היכולת שלו לאפשר ל'המיר' את העמודים השונים של האתר, כל אחד בנפרד! וזאת לעומת בחירה בהחלפת תבנית – מהלך שלמעשה משבית את האתר ומאלץ אתכם לתקן את כל העמודים בבת אחת באמצעות התבנית החדשה לפני שתוכלו להעלות את האתר מחדש לאוויר… אז נכון – אם יש לכם סביבת staging, היא תאפשר לכם עבודה על עותק נפרד של האתר בזמן שהאתר המקורי עדיין באוויר, אבל, עם אלמנטור, יכולתי לעבוד גם בלי סביבת staging, פשוט תיקנתי כל פעם בזמני הפנוי עמוד אחד (ועד עמוד ועוד עמוד וכו') עד שסיימתי לתקן את כולם וכך כל האתר נישאר באוויר והתעבורה אליו לא נפגעה בזמן שהתקדמתי ועד שסיימתי עם התיקונים והעיצוב מחדש בקצב שנוח לי

אך עושים את זה? – מתקינים אלמנטור > עוברים אל העמוד שרוצים 'להמיר' > בוחרים לבצע עריכה עם 'העורך הקלאסי' של וורדפרס (במקום עם העורך של התבנית) > בשלב הזה ניתן כעת לבחור בכפתור 'עריכה באמצעות אלמנטור' שמופיע בראש העמוד ואפשר להתחיל לערוך את העמוד עם העורך של אלמנטור ובכך 'להמיר' אותו, כמובן לא לשכוח לשמור בסוף, שאר העמודים (שלא נערכו באמצעות אלמנטור) ימשיכו לעבוד כרגיל עד שתטפלו גם בהם.
חשוב לציין – זה למעשה החלק הקשה והמבאס, אם יש לכם הרבה עמודים באתר והתוכן שלהם אינו אחיד בעיצוב שלו (כלומר העיצוב של העמודים באתר לא זהה לכל/רוב העמודים ולכל אחד יש ניראות אחרת במידה כזו או אחרת) אז יש לכם כעת הרבה 'עבודה שחורה' לעשות, לעבור עמוד עמוד ולהתחיל 'להמיר' אותו, היתרון הוא כאמור (מעבר לשיפור עצמו במראה העמודים שניתן להשיג עם אלמנטור) שכך אתם משחררים את עצמכם מהתבנית הישנה לאט לאט ובקצב שלכם – מבלי לאבד את כל האתר בבת אחת, אבל – אם העמודים שלכם כן אחידים בעיצוב שלהם (כלומר כל עמוד מכיל תמונות וטקסטים במקומות קבועים ורק התוכן/תמונה משתנה מעמוד לעמוד כמו לדוגמה בעמודי בלוג) אז כמובן שאתם יכולים לנצל את היכולות של אלמנטור לצור טמפלטים קבועים לעמודים ובכך לקצר לכם את תהליך העבודה בצורה שלא תיאמן…
שימו לב לחסוך לעצמכם זמן ולפני תחילת העבודה על כל העמודים להגדיר לכם הגדרות ברירת מחדל לטיפוגרפיה צבע וכו' (על כך ראו בהמשך)

ה- c.p.t של התבנית הישנה הולך לאיבוד (?)

אז עברתם על כל העמודים הרגילים באתר ועדכנתם אותם לאלמנטור, כולל עמודי הפורטפוליו, יש! אז בוא נתקין עכשיו תבנית פשוטה וקלה כלשהי (כי במילא העמודים מעוצבים באלמנטור ולא בתבנית) וסגרנו עניין, לא? – לא!
אם מעבר לעמודים רגילים ועמודי post-ים של הבלוג היו לכם סוג עמודים נוסף (custom post type) שלרוב נקרא 'פורטפוליו' (או בשם אחר אבל מניסיוני 'פורטפוליו' הוא השם הנפוץ…) ברגע שתחליפו תבנית אתם עלולים לגלות שעמודי הפורטפוליו הללו נעלמו להם. למה? כי התבנית הישנה היא זאת ש'רשמה' אותם (פעולת register) אצל וורדפרס ואם התבנית איננה אז גם 'הרישום' הנ"ל נמחק

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

אך עושים את זה? – ברוב המקרים התבנית הישנה 'רשמה' את ה custom post type שלה באמצעות קוד שיושב באחד הקבצים של התבנית, אתם צריכים פשוט למצוא אותו להשתמש בו מחדש, אני יכול להדגים מהמקרה של enfold שעליכם ללכת בקבצי התבנית לתיקיית enfold\includes\admin ולמצוא את הקובץ register-portfolio.php והקוד שנמצא בתוכו הוא הקוד שיחזיר את עמודי הפורטפוליו שלכם לתחייה

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

 חשוב לציין – אם תעשו את השלב הזה (של הפעלת הקוד הנ"ל באמצעות התוסף code snippets) לפני שהחלפתם תבנית אז כמובן שיתכן ותיווצר התנגשות בין הקוד של התבנית והקוד שלכם וגברת וורדפרס עלולה להיתקע, אם אתם בכל זאת רוצים להקדים את המאוחר code snippets מאפשר גם להכניס קוד אבל להגדיר שהוא 'כבוי', כך תוכלו להדליק אותו רק כשהזמן מתאים

קוד CSS

אנחנו מתקרבים לסוף אבל עדיין לא הכל מאחורינו, אם הכנסתם קוד CSS כלשהו בשדה ה CSS של ה-Customizer של וורדפרס, גם הוא ילך לאיבוד (כי ה- Customizer זוכר את ה CSS פר תבנית ולא באופן גלובלי לכל תבנית) כמו כן אם לתבנית גם היה עמוד הגדרות משלה שבו היה שדה CSS כזה (ולרוב ישנו כזה), אז כמובן שאחרי החלפת התבנית הקוד שהיה שם (או שמתם שם כזה) יפסיק לעבוד

אז מה עושים? – גם כאן התוסף code snippets מציל את היום ומאפשר לנו להכניס קוד CSS שירוץ באופן גלובאלי על האתר ולא יהיה תלוי בתחלופה של תבנית

אך עושים את זה? – פשוט יוצרים עם התוסף הנ"ל 'סניפט' חדש שיכיל את ה CSS שלנו, שימו לב לדוגמאות שבאות יחד עם התוסף כדי להבין אך מכניסים קוד CSS (ולא PHP כמו שעשינו בחלק הקודם)

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

טיפוגרפיה, צבעים ואופציות סטיילינג אחרות

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

אז מה עושים?אופציה ראשונה היא ללכת ולהגדיר את הגדרות ברירת המחדל הללו בהתאם למה שאתם רוצים בפאנל ההגדרות של אלמנטור על מנת שהם יהיו ברירת המחדל כאשר התבנית תוחלף (כמובן הם ישפיעו רק לכל לכל מקום שבו הם חלים עליהם ושהם ללא הגדרות ספציפיות לפונט/צבע וכו' שאולי נתתם במקומות מסוימים כשבניתם עמודים באלמנטור) אם בחרתם באופציה הזו אז חשוב גם להיכנס להגדרות של אלמנטור ולבטל את האופציות 'השבת צבעי ברירת מחדל' ו- 'השבת פונטים ברירת מחדל'.
אופציה שנייה היא להשתמש בתוסף שנקרא Style Kits for Elementor

איך עושים את זה? – אם בחרתם באופציה השניה של התוסף Style Kits for Elementor אז כדאי להבין שהוא למעשה מרכז את כל אופציות הסטיילינג (בדומה להגדרות ברירת המחדל של אלמנטור אבל עם עוד אופציות רבות נוספות) ומאפשר להחיל אותן על כל האתר או רק על עמודים מסוימים (כלומר חלק להחיל בעמודים מסוימים וחלק להחיל בעמודים אחרים וכן הלאה ולמחזר את השימוש בהן לפי הצורך)
אבל מצד שני הוא טיפה יותר מורכב לשימוש ולכן אין לי אפשרות להרחיב פה את השימוש בו ולפני שאתם בוחרים באופציה הזו פשוט כדאי לראות וידאו ו/או לקרוא את תיעוד של יוצרי התוסף ולהחליט אם זה בשבילכם (עקרונית כדאי לבחור בו לטווח הרחוק כי זה מקל מאוד, אבל השלב הראשוני עלול לדרוש יותר השקעה)

הדר, פוטר ושאר חלקי התבנית

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

אז מה עושים? – לכן מומלץ לבחור בתבנית Hello Elementor שנוצרה ע"י צוות אלמנטור עצמם בדיוק במאפיינים האלה ולמטרה הזו

אך עושים את זה? – נכנסים בוורדפרס אל עיצוב > תבניות > הוספת תבנית חדשה ובשדה החיפוש מחפשים את hello, בוחרים ומפעילים, כעת תשימו לב שההדר בכל העמודים נראה, לא מדהים במיוחד, אבל זה כמובן בכוונה תחילה, כי רצינו תבנית ריקה וכעת עם אלמנטור אתם יכולים לעצב גם הדר ופוטר ..וגם חלקי תבנית אחרים כמו ארכיון, תוצאות חיפוש, עמוד 404 וכן הלאה.. כמובן לא נסביר פה את התהליך של יצירת כל חלקי התבנית הללו כי זה חומר מספיק ארוך לעוד 4 או 5 פוסטים נפרדים אבל ניתן פה רק דוגמה לוידאו אחד שמסביר בכיף איך יוצרים לבד הדר משלכם

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

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

זהו?

אם עברתם את כל השלבים והגעתם עד לפה.. אני ממש גאה בכם.. אפילו אם לא עברתם אותם ממש אלא רק קראתם עד לא פה – סַחְתֵּין!
כן.. בגדול זהו, בשלב הזה האתר אמור להיות כולו אלמנטור (על בסיס תבנית הלו המינימלית בלבד), כולו בהתאם לעיצוב וההגדרות שלכם – יש! עשיתם את זה! 💪 עכשיו לכו פנקו את עצמכם באיזה שייק ירוק ובריא.. או בשאוורמה כבש ירושלמי עם הרבה חריף.. זה כבר תלוי בכם..

בהצלחה!

תודה שקראתם! שתפו שגם אחרים יהנו

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב pinterest
שיתוף ב reddit
שיתוף ב whatsapp
שיתוף ב email

אולי תאהבו גם את

השאר תגובה

השאר תגובה באמצעות פייסבוק

השאר תגובה

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