בלוג

עורך האתר החסין ללקוחות: מדריך theme.json

השתמשו ב-theme.json כדי להגדיר גבולות בעורך האתר של WordPress, כך שלקוחות יוכלו לערוך תוכן מבלי לשבור את העיצוב שלכם.

סיכום

כשלקוח פותח את עורך האתר של WordPress בפעם הראשונה, היכולת לערוך כל בלוק, צבע ופריסה יכולה להרגיש כמו תכונה עבורו — וכאיום עבורך. מאמר זה מסביר כיצד להשתמש ב-theme.json כדי לשרטט קו ברור בין עריכת תוכן לשליטה בעיצוב. במקום להילחם בעורך האתר, אתם מגדירים קביעות מוקדמות, ברירות מחדל וגבולות שהופכים את העדכון של האתר לבטוח עבור לקוחות לא טכניים. נעבור על מה לנעול, מה להשאיר פתוח, ולמה נעילה מוגזמת היא סיכון אמיתי. הגישה בנויה על אסימוני עיצוב ואילוצים ברמת תבנית, כך שהיא עובדת באופן עקבי בכל אתר לקוח שאתם מתחזקים. בסוף, יהיה לכם תהליך עבודה חוזר למסירת עורך האתר בלי למסור את המפתחות למערכת העיצוב שלכם.

מה הדבר הראשון שאתם עושים כשלקוח שולח אימייל ואומר שהוא "רק ניסה לעדכן את הכותרת" וכל מרווחי האתר קרסו?

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

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

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

בואו נעבור על איך לחשוב על זה, כי רוב המדריכים מתמקדים במה ש-theme.json יכול לעשות למפתחים. השאלה עבור סוכנות היא שונה: איך משתמשים בו כדי להפוך את הלקוחות לבטוחים מבלי שירגישו כלואים?

למה עורך האתר מרגיש כל כך מסוכן?

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

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

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

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

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

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

הנה טבלה מעשית של מה לנעול, מה להשאיר פתוח, ולמה:

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

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

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

איך מגדירים גבולות בלי שהעורך ירגיש כמו מלכודת?

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

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

אותו עיקרון חל על תבניות. אפשר להשתמש בתכונת ה"נעילה" בבלוקים ספציפיים בתוך תבנית — למשל, לנעול את מבנה העמודות של בלוק המלצה כך שהלקוח יוכל לשנות את טקסט הציטוט אבל לא להפוך שלוש עמודות לשתיים. אם עדיין לא השתמשתם בנעילת בלוקים, היא זמינה בסרגל הכלים של העורך; כשאתם נועלים בלוק, אפשר לבחור אם הלקוח יכול לערוך תוכן, להזיז אותו, או שניהם. אפשר אפילו ליישם זאת ב-theme.json עבור ברירות מחדל ברמת בלוק.

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

אם אתם משתמשים בסוגי פוסטים מותאמים אישית, אותם עקרונות חלים מעבר לתבניות ברירת המחדל — ראו את המדריך שלנו על הרחבת theme.json לסוגי פוסטים מותאמים אישית ולפלט של תוספים.

מה קורה כשנועלים יותר מדי?

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

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

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

איך הופכים את זה לחזרתי אצל לקוחות?

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

התחילו ביצירת ערכת בלוקים "מתחילים". כך בונים ערכת בלוקים מותאמת אישית עם theme.json — לאחר שפיתחתם ותיעדתם אותה, העתקתה ללקוח חדש היא עניין של החלפת צבעי מותג וגופנים. אתם לא ממציאים את הגלגל מחדש; אתם מחליפים אסימונים. זו בדיוק המנטליות של להפסיק לבנות מחדש כל אתר WordPress, אבל מיושמת על העורך במקום על הקצה האחורי.

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

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

מה עם לקוחות שממשיכים לבקש "עוד צבע אחד"?

הפלטה שלכם היא הבטחה. אם אתם מגדירים חמישה צבעי מותג, ולקוח מבקש צבע שישי, התשובה אינה "לא" — אלא "כן, אבל הוא מגיע כתוספת מושכלת לפלטה, לא כקוד hex חד-פעמי בכותרת." כשאתם מוסיפים צבע ל-theme.json, הוא הופך לזמין בכל האתר באופן עקבי. זו הדרך הנכונה לטפל בבקשות כאלה.

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

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

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

Sources (5)