תוֹכֶן
מילת המפתח שהודיעה את עבודתי בשנים האחרונות הייתה 'גמישה'. אתר אינטרנט צריך להיות גמיש למשתמש הקצה, ולהפוך אותו לפגוש אותו במכשיר שבחר. אבל מחברי התוכן שלנו זקוקים גם לגמישות באופן שהם יוצרים תוכן לאתר. הם צריכים להיות מסוגלים לערבב סוגים שונים של תוכן כדי ליצור אתר משכנע.
חידד את כישורי WordPress שלך בעזרת מדריכים מבריקים אלה
אחת הדרכים בהן אנו מדברים על גמישות זו הן למשתמשים והן למחברים היא שימוש במונח 'תוכן מודולרי'. תוכן מודולרי מוגדר באופן רופף פירושו לפרק את התוכן שלנו לנתחים קטנים יותר שניתן לשלב בדרכים רבות ושונות.
זה לא רעיון חדש, אבל זה רעיון שמקבל דחיפות חדשה על ידי הרשת החדשה שלנו עם מספר רב של מכשירים. דף 'הוא פשוט יחידה גדולה מדי - עליו לפרק לרכיבים קטנים יותר כדי לאפשר לו להתכופף ולשנות כדי לשרת טוב יותר את מחבריו ומשתמשיו.
לוורדפרס יש כמה אפשרויות בהן ניתן להשתמש כדי להוסיף חלק מהגמישות הזו ל- CMS. שדות ההתאמה האישית המתקדמת של אליוט קונדון היוו זה מכבר תוסף חיוני להרחבת יכולותיו של וורדפרס על מנת לבנות CMS מותאמים אישית.
לתוסף יש שתי תכונות שמתאימות היטב למטרות שלנו ליצור CMS התומך במערכת העיצוב הגמישה שלנו, כלומר שדה התוכן הגמיש ושדה המשחזר.
מאפיינים אלה מאפשרים למעצבים ולמפתחים ליצור מודולים ולסמן מלאכה כדי לייצג את אותם מודולים, אך הם גם מעניקים למחברי התוכן גמישות באופן שבו הם מזמינים את המודולים האלה.
אז במקום להזדקק לתבניות עמודים רבות ושונות, נוכל להשתמש במספר קטן יותר של סוגי תוכן ותבניות גמישים שמסוגלים לעבד מגוון רחב של עמודים אפשריים.
זיהוי המודולים שלנו
נתחיל בדוגמא: תבנית דף פרטי מוצר. תרחיש נפוץ הוא שיש תמונה גדולה ומעוררת בראש, הנתמכת על ידי קטע (או קטעים) המדגיש תכונות בודדות (עם תמונה אופציונלית).
לבסוף, חסימות הסבר למוצרים קשורים עשויות להתבצע. נוכל להתחיל בזיהוי מערכת העיצוב שלנו. ישנן מספר דרכים לעשות זאת, אך כרגע אני רוצה לשרטט את התבניות האפשריות של האתר שלי ובמה הם יצטרכו לתמוך.
לאחר שעשיתי זאת, אני מתחיל להקיף מבנים חזותיים נפוצים שיכולים לתמוך באותם מודולי תוכן. משם אני יכול לעבור למסגרות קוויות המזהות בבירור את המודולים האלה.
בתרחיש המוצג בתמונה בעמוד 111, התבנית קוראת לשלושה מודולים: A) תמונה ברוחב מלא עם טקסט מרובד מלמעלה, B) תמונה מרוכזת עם טקסט שעובר מתחתיה ו- C) סדרה של גושי הסבר. עם תמונה ממוזערת עם טקסט מרובד מעל.
המטרה שלנו היא תבנית שיכולה לתמוך בכל אחת מהבלוקים הללו, בכל סדר: ABC, ACB, BAC, BCA, ABBC וכן הלאה. הזמנות מסוימות יהיו הגיוניות יותר בהתחשב בהיררכיה הרצויה של הדף, אך אנו רוצים להיות מסוגלים לתמוך בכל האפשרויות.
יצירת מודולים בוורדפרס
כעת, כשיש לנו מושג באילו סוגי תוכן נצטרך לתמוך, נוכל להתחיל ליצור את המודולים שלנו בוורדפרס. נשתמש ב- Advanced Custom Fields Pro, תוסף בתשלום הכולל שדה תוכן גמיש ושדה מהדר.
לאחר הפעלת התוסף ACF Pro, עבור לפריט התפריט החדש שדות מותאמים אישית> שדות מותאמים אישית והוסף קבוצת שדות חדשה. קוראים לזה 'מודולי ליבה'. לאחר שיצרת קבוצת שדות, תוכל להוסיף לה שדות.
צור שדה יחיד שנקרא 'תוכן גמיש'. בחר תוכן גמיש כסוג השדה. שדה תוכן גמיש נותן לך אפשרות ליצור מספר פריסות. אותם מודולים שזיהינו קודם? הם ממפים ישירות לפריסות שתיצור כאן. כשאתה יוצר את השדה הוא אמור ליצור עבורך באופן אוטומטי את הפריסה הראשונה שלך.
קדימה ותייג את הפריסה הראשונה 'שכבת טקסט תמונה', עם השם 'תמונה_טקסט_שכבה'. שם זה חשוב מכיוון שכך תתייחס לשדה בקובץ תבנית ה- PHP שלך.
צור שדה שכותרתו 'תמונת רקע' (שם: 'רקע_דימוי') והגדר את סוג השדה לתמונה. הוסף שדה נוסף שכותרתו 'טקסט כיסוי' (שם: 'כיסוי_טקסט') עם סוג שדה טקסט. זהו זה עבור הפריסה הראשונה.
לאחר שתסיים עם הפריסה הראשונה שלך, העבר את העכבר מעל המילה פריסה בעמודה השמאלית. מספר אפשרויות צריכות להופיע אפשרויות, כולל הוסף חדש. לחץ על זה כדי ליצור את הפריסה השנייה שלך. תייגו אותו כ'חסום תמונה וטקסט '(שם:' image_and _text_block '). הוסף שדה שכותרתו 'תמונה מוצגת' (שם: 'featured_image', סוג שדה: תמונה).
הוסף שדה נוסף, שכותרתו 'תיאור טקסט' (שם: 'תיאור_טקסט', סוג שדה: עורך Wysiwyg). פריסה זו ממפה לתמונה שבמרכזה עם גוש טקסט מתחתיה. לבסוף, צור את הפריסה האחרונה שלך. תייגו אותו כ- 'Call Blocks' (שם: 'callout_blocks').
צור שדה חדש שכותרתו 'חסום אוסף' (שם: 'block_collection', סוג שדה: משחזר). מהדר הוא דרך ליצור מספר אוספי שדה.
בקטע שדות משנה בשדה המשחזר צור שדה שכותרתו 'חסום תמונה' (שם: 'block_image', סוג שדה: תמונה). צור שדה טקסט שכותרתו 'חסום טקסט' (שם: 'block_text').
העמוד הבא: שדות מוסברים ועיצוב תבנית
