איך ליצור עמודים דינמיים ב-Wix באמצעות CMS
- 26 ביולי
- זמן קריאה 6 דקות
עמודים דינמיים ב-Wix מאפשרים לעצב עמוד אחד ולהשתמש בו כתבנית עבור פריטים רבים: פרויקטים, אנשי צוות, שירותים, נכסים, סניפים, קורסים, המלצות או כל תוכן אחר שחוזר על עצמו במבנה קבוע.
במקום לבנות ידנית עמוד נפרד לכל פרויקט, ניתן ליצור אוסף תוכן ב-CMS, מחברים אליו עמוד דינמי ו-Wix מייצרת גרסה ייחודית של העמוד עבור כל פריט באוסף, כולל כתובת URL משלו.
המדריך מתייחס ל-Wix Studio Editor. ב-Wix מתבצעים לעיתים עדכונים הדרגתיים לממשק, ולכן השמות או המיקום של חלק מהכפתורים עשויים להיראות מעט אחרת.
מהו CMS ב-Wix?
ראשי התיבות של CMS הם Content Management System - מערכת לניהול תוכן.
ב-Wix, המידע נשמר בתוך Collections, או בעברית: אוספים. כל אוסף נראה קצת כמו טבלה: השורות הן פריטי התוכן והשדות הם סוגי המידע שנשמרים עבור כל פריט.
לדוגמה, באוסף בשם "פרויקטים" אפשר ליצור את השדות הבאים:
שדה | סוג השדה | מה יישמר בו |
שם הפרויקט | טקסט | כותרת הפרויקט |
תמונה ראשית | תמונה | התמונה שתופיע בראש העמוד |
תקציר | טקסט | תיאור קצר |
תיאור מלא | Rich Content | תוכן הפרויקט |
תחום | טקסט או Reference | קטגוריית הפרויקט |
גלריה | Media Gallery | תמונות נוספות |
תאריך | תאריך | מועד הפרויקט |
Slug | טקסט | חלק מכתובת העמוד |
לאחר חיבור האוסף לעמוד דינמי, אותו עיצוב יציג בכל פעם תוכן משורה אחרת בטבלה.
עמוד דינמי הוא לא אוסף התוכן עצמו
חשוב להבחין בין שלושה חלקים במערכת:
אוסף / Collection הוא המקום שבו נשמר התוכן.
דאטהסט / Dataset הוא החיבור בין האוסף לבין האלמנטים בעמוד.
עמוד דינאמי / Dynamic Page הוא העמוד המעוצב שמציג את התוכן.
אפשר לחשוב על האוסף כעל מאגר המידע, על העמוד הדינמי כעל התבנית ועל ה-Dataset כעל מה שמחבר ביניהם. בדרך כלל אין צורך לגעת בקוד כדי ליצור את החיבור הזה.
אילו סוגים של עמודים דינמיים קיימים?
ב-Wix קיימים שני סוגים מרכזיים של עמודים דינמיים:
עמוד פריט דינמי - Dynamic Item Page
עמוד פריט מציג פריט אחד מתוך האוסף. אם באוסף קיימים 30 פרויקטים, אותו עמוד דינמי יוכל לייצר 30 כתובות שונות, אחת לכל פרויקט. העיצוב נשאר זהה, אבל הכותרת, התמונות, התיאור ושאר הפרטים מתחלפים לפי הפריט שנבחר.
עמוד רשימה דינמי - Dynamic List Page
עמוד רשימה מציג כמה פריטים יחד, בדרך כלל באמצעות Repeater, גלריה או טבלה. כל כרטיס ברשימה יכול להוביל לעמוד הפריט המתאים. באתר תיק עבודות, לדוגמה, עמוד הרשימה יהיה עמוד "פרויקטים", ועמוד הפריט יהיה העמוד המלא של כל פרויקט.
ההמלצה של Wix היא בדרך כלל לשלב בין שני סוגי העמודים: רשימה שממנה ניתן לעבור לעמודי הפריטים. אפשר לקרוא עוד במדריכים הרשמיים של Wix על עמוד פריט דינמי ועל עמוד רשימה דינמי.
שלב 1: יצירת אוסף ב-CMS
כדי להתחיל, יש לפתוח את חלונית CMS ב-Wix Studio ולבחור באפשרות ליצירת אוסף חדש.
ברוב המקרים יש לבחור ב-Multiple Item Collection, מכיוון שהאוסף אמור להכיל פריטים רבים. לאחר יצירת האוסף אפשר להוסיף את השדות הדרושים ולהזין כמה פריטי תוכן לדוגמה.
כדאי לתכנן את מבנה האוסף לפני תחילת העיצוב. אם כל פרויקט זקוק לכותרת, תמונת נושא, תקציר, גלריה ותיאור מלא - עדיף ליצור את כל השדות מראש ולמלא לפחות שניים או שלושה פריטים. כך אפשר לבדוק שהעיצוב מתאים גם לתוכן קצר וגם לתוכן ארוך.
שלב 2: יצירת העמוד הדינמי
לאחר שהאוסף מוכן, יש לפתוח את CMS, לעבור אל Your Collections, לאתר את האוסף הרצוי ולבחור ב-Add Dynamic Page.
בשלב זה אפשר להוסיף:
או Item Page עבור עמוד נפרד לכל פריט.
או List Page עבור עמוד שמציג כמה פריטים יחד.
או את שני סוגי העמודים באותו תהליך.
ב-Wix נוסף Dataset לעמוד שמחובר אוטומטית לאוסף. מכאן אפשר להתחיל לעצב את התבנית: להוסיף כותרות, תמונות, טקסטים, כפתורים, גלריות וכל אלמנט אחר שנדרש.
שלב 3: חיבור האלמנטים לשדות באוסף
כדי לחבר אלמנט לתוכן הדינמי, יש לבחור אותו בעמוד וללחוץ על Connect to CMS.
בחלונית החיבורים יש לבחור את ה-Dataset המתאים, ולאחר מכן את השדה שממנו האלמנט יקבל את התוכן.
לדוגמה:
כותרת ראשית מתחברת לשדה "שם הפרויקט".
תמונת Hero מתחברת לשדה "תמונה ראשית".
פסקה מתחברת לשדה "תקציר".
גלריה מתחברת לשדה מסוג Media Gallery.
כפתור יכול להתחבר לכתובת URL, לקובץ או לעמוד דינמי אחר.
לא כל טקסט בעמוד חייב להיות מחובר ל-CMS. משפטים קבועים כמו "פרויקטים נוספים" או "רוצים לדבר על הפרויקט הבא?" יכולים להישאר כטקסט רגיל ולהופיע בכל גרסאות העמוד.
שלב 4: יצירת עמוד הרשימה
אם נוצר גם עמוד רשימה, בדרך כלל יופיע בו Repeater בסיסי. כל כרטיס ב-Repeater מציג פריט אחר מהאוסף, אבל שומר על אותו עיצוב.
יש לחבר את רכיבי הכרטיס לשדות המתאימים: תמונה, שם, תקציר וקטגוריה. לאחר מכן יש לחבר את התמונה או הכפתור לעמוד הפריט הדינמי. כך, לחיצה על פרויקט מסוים ברשימה תפתח את הגרסה הנכונה של עמוד הפרויקט, ולא סתם את אותה כתובת עבור כל הכרטיסים.
אם קיימים פריטים רבים, אפשר להגדיר ב-Dataset כמה פריטים יוצגו בכל טעינה ולהוסיף כפתור Load More. אפשר גם להגדיר מיון, סינון או אמצעי סינון למבקרים באמצעות Dropdown, תגיות בחירה או כפתורים.
שלב 5: בדיקת כתובת העמוד
לכל עמוד פריט דינמי צריכה להיות כתובת ייחודית. מבנה טיפוסי יכול להיראות כך: www.example.com/projects/project-name
החלק projects קבוע, ואילו project-name נלקח משדה משתנה באוסף.
אפשר לשנות את המבנה דרך: Pages & Menu → Dynamic Pages → More Actions → SEO
כדאי להשתמש בשדה שמכיל ערך ייחודי וברור. אם לשני פריטים יש בדיוק אותו ערך בשדה המשמש לכתובת, Wix עלולה שלא ליצור גרסה נפרדת עבור שניהם.
לא מומלץ לשנות כתובות של עמודים שכבר פורסמו בלי לבדוק את ההפניות. באתר עם דומיין מחובר Wix יכולה ליצור הפניה מהכתובת הישנה לחדשה, אבל עדיין חשוב לבדוק שהקישורים ממשיכים לעבוד. מידע נוסף נמצא במדריך הרשמי על יצירת כתובות ייחודיות לעמודים דינמיים.
שלב 6: התאמת הגדרות ה-SEO
עמוד דינמי אינו עמוד "שקוף" לגוגל. כל גרסה יכולה לקבל כתובת, כותרת SEO ותיאור משלה, בתנאי שההגדרות מחוברות נכון לשדות האוסף. בהגדרות ה-SEO אפשר להשתמש במשתנים דינמיים. לדוגמה:
כותרת SEO:
{שם הפרויקט} | ABCreative
מטא-תיאור - Meta Description:
מידע על {שם הפרויקט}, כולל {תקציר הפרויקט}
כך לא צריך לכתוב ידנית כותרת ותיאור לכל פריט, ועדיין מתקבלים נתונים ייחודיים יחסית לכל עמוד.
כדאי גם לחבר את ה-Alt Text של התמונות לשדה טקסט מתאים באוסף. שם הפרויקט או תיאור קצר של התמונה יהיו בדרך כלל שימושיים יותר משם קובץ אוטומטי.
בדיקת העמודים לפני הפרסום
בתוך העמוד הדינמי אפשר לעבור בין פריטי האוסף ולראות כיצד התבנית מתנהגת עם תוכן שונה.
לא כדאי להסתפק בפריט אחד. מומלץ לבדוק לפחות:
פריט עם כותרת ארוכה.
פריט עם מעט תוכן.
פריט עם תיאור ארוך במיוחד.
פריט עם כמה תמונות.
פריט שבו אחד מהשדות אינו מלא.
הבדיקה האחרונה חשובה במיוחד. שדה ריק עלול להשאיר רווח מיותר, כותרת ללא תוכן או אזור שנראה לא גמור. במקרים כאלה אפשר לשנות את מבנה העיצוב, לוודא שכל השדות החיוניים מלאים, או להשתמש ב-Velo כדי להסתיר אלמנטים כאשר אין בהם תוכן.
טעויות נפוצות ביצירת עמודים דינמיים
חיבור כל העמוד לשדה הלא נכון
כאשר שמות השדות דומים, קל לחבר כותרת לתקציר או תמונה לשדה שאינו מתאים. לאחר החיבור כדאי לעבור בין כמה פריטים ולוודא שכל אלמנט מציג את המידע הנכון.
מחיקה של ה-Dataset
ה-Dataset אינו מוצג באתר החי, אבל הוא החיבור בין העמוד לבין האוסף. מחיקה שלו תנתק את האלמנטים מהתוכן.
כתובת שאינה ייחודית
אם השדה המשמש בכתובת חוזר על עצמו, ייתכן שלא ייווצר עמוד נפרד לכל פריט. לכן כדאי לבחור Slug ייחודי או להוסיף משתנה נוסף למבנה הכתובת.
עיצוב שמתאים רק לפריט אחד
כותרת קצרה יכולה להיראות נהדר, בעוד שכותרת ארוכה תשבור את העיצוב. צריך לבדוק את התבנית עם מגוון אמיתי של תכנים ובכל נקודות השבירה.
הרשאות אוסף לא מתאימות
אם הרשאות האוסף אינן מאפשרות הצגת תוכן, העמוד עשוי לעבוד בתוך העורך אבל להופיע ריק באתר החי. באוסף שאמור להיות ציבורי יש לוודא שהרשאת הצפייה מאפשרת הצגת תוכן לכלל המבקרים.
הוספת פריט בלי למלא את השדות החשובים
אחד היתרונות הגדולים של CMS הוא האפשרות להוסיף תוכן בלי לערוך את העמוד עצמו. אבל אם נשכחים כותרת, תמונה, Slug או תיאור SEO, התוצאה עלולה להיראות חלקית. מבנה אוסף ברור ושמות שדות מובנים מצמצמים טעויות כאלה.
האם צריך קוד כדי ליצור עמודים דינמיים ב-Wix?
לא. יצירת אוסף, עמודי רשימה, עמודי פריט וחיבורים בין האלמנטים לשדות יכולה להתבצע ללא קוד.
קוד Velo הופך לרלוונטי כאשר נדרשת התנהגות מורכבת יותר: הסתרה אוטומטית של אזורים ריקים, סינון מתקדם, חיבורים בין כמה אוספים, יצירת ממשק מותאם להזנת תוכן או שינוי התצוגה לפי תנאים שונים.
ברוב האתרים כדאי להתחיל בכלים המובנים של Wix ולהוסיף קוד רק כאשר קיימת סיבה ברורה לכך.
למי עמודים דינמיים מתאימים?
עמודים דינמיים מתאימים במיוחד לאתרים שבהם מופיעים פריטי תוכן רבים בעלי מבנה דומה: תיקי עבודות, אינדקסים, קטלוגים, צוותים, קורסים, שירותים, סיפורי לקוחות, סניפים, אירועים או נכסים.
היתרון אינו מסתכם בחיסכון בזמן ההקמה. לאחר שהמערכת בנויה נכון, אפשר להוסיף פריט חדש דרך ה-CMS בלבד. העיצוב נשאר קבוע, החיבורים נשמרים והעמוד החדש נוצר כחלק מהמערכת הקיימת.
לסיכום
יצירת עמודים דינמיים ב-Wix מבוססת על תהליך פשוט: שומרים את המידע באוסף CMS, יוצרים תבנית של עמוד דינמי ומחברים את רכיבי העמוד לשדות המתאימים באמצעות Dataset.
החלק החשוב באמת הוא התכנון: מבנה נכון של האוסף, כתובות ייחודיות, חיבור מדויק של השדות ובדיקה עם סוגים שונים של תוכן. כאשר כל אלה מוגדרים היטב, אפשר לנהל עשרות ואפילו מאות עמודים בלי לבנות ולעדכן כל אחד בנפרד.
ב-ABCreative אנחנו משתמשים בעמודים דינמיים כדי לבנות אתרים שקל להרחיב ולנהל לאורך זמן, בלי להפוך כל הוספת פרויקט או פריט חדש למשימת עיצוב מחדש. אפילו אצלינו באתר יש לנו CMS ועמודים דינאמיים, למשל בתיק העבודות.
