המדריך המלא לעמודים דינאמיים בוויקס
# הפוסט נכתב בשיתוף עם עידו פרום מ-simply-code.net, מתכנת מומחה לוויקס קוד, חובב פתרונות יצירתיים וחכמים.
קפצו לתוכן שמעניין אתכם:
יתרונות העמודים הדינאמיים בוויקס
מה זה בכלל עמודים דינמאיים, ולמה זה טוב?
הדוגמא הכי טובה כשבאים להסביר מהם עמודים דינאמיים ולמה כדאי להשתמש בהם היא דרך פייסבוק: דמיינו שכל פעם שמשתמש חדש נרשם לפייסבוק, אחד המתכנתים בפייסבוק היה צריך לפתוח דף חדש שקוראים לו www.facebook.com/newusername - כמה זמן עבודה זה היה דורש עבור 2 מיליארד דפים? ואם פייסבוק היו רוצים לשנות את המראה של הדף האישי , אותו מתכנת מסכן היה צריך לעבור על 2 מיליארד דפים ולעצב את כולם מחדש... הפתרון למצב הזה הוא עמוד דינאמי.
עמוד דינאמי הוא למעשה תבנית של עמוד שחוזרת על עצמה, העיצוב של התבנית קבוע ונקבע על ידיכם, והתוכן הייחודי בכל עמוד משתנה בהתאם למידע במאגר נתונים שנמצא מאחורי הקלעים, אותו אתם מנהלים. חזרה לדוגמא של פייסבוק, מאגר המידע הוא הפרטים האישיים שלכם, תמונת הפרופיל שלכם, קישור לאלבומי תמונות שלכם, כל הפוסטים הפומבים שכתבתם וחלקתם, וכל המידע הפומבי שחברים שמו לכם על ה"קיר"- והתבנית היא העיצוב הקבוע של כל עמוד פרופיל של כל משתמש פייסבוק (וכמובן כל ההגדרות שנמצאות מאחורי הקלעים).
יתרונות השימוש בעמודים דינאמיים באתר (או: למה צריך עמודים דינאמיים באתר שלי?)
כמובן שלא כל אתר זקוק לעמודים דינאמיים. אבל אתר שיש בו מספר (קטן או גדול) של עמודים שדומים אחד לשני ברמה העיצובית, ורק המידע בעמוד שונה, עמוד דינאמי הוא הפתרון. השימוש בעמודים דינאמיים מומלץ כי הוא מייעל מאוד את תהליך בניית ותחזוק האתר, וכן משפיע לטובה על מהירות טעינת האתר, פרמטר משמעותי כשאתם חושבים על ה- SEO שלכם.
כמה דוגמאות למצבים בהם כדאי להשתמש בעמודים דינאמיים:
באתר שיש הרבה חברי צוות ורוצים להכין עמוד על כל חבר צוות, הנה דוגמא
עמודים של בלוג, או עמודי מוצרים בחנות (למעשה בלוג או חנות הם עמודים דינאמיים שוויקס יוצרים עבורכם אוטומטית)
אתר שמציג אירועים שונים ולכל אירוע יש דף משלו
אתר שהוא רשת חברתית, ובה לכל חבר יש עמוד שמציג מידע עליו
אתר המכיל מערך של שיעורים
אז איך עובדים עם עמודים דינאמיים? בואו נתחיל לשחק...
בסרגל כלים הראשי ניכנס לניהול העמודים (הכפתור העגול העליון), ושם נבחר ב Dynamic Pages , ונלחץ על Add to Site:
נפתחת לנו עכשיו אפשרויות בחירה של טמפלט (Template) לעמוד הדינאמי שלנו
הטמפלט שאנחנו רואים כאן הוא בעצם האינדקס של כל העמודים הדינאמים שלנו. לצורך הדוגמא, נבחר בטמפלט של הTeam.
מאגר המידע של העמודים הדינאמיים
לאחר שבחרנו בטמפלט הרצוי, יתווספו לאתר שלנו שני עמודים, ומאגר מידע אחד.
נתחיל עם מאגר המידע כדי להבין איך הכל עובד:
כפי שניתן לראות בתמונה, נוצר לנו מאגר מידע בשם Team , נלחץ עליו.
הטבלה שאנחנו רואים (בתמונה התחתונה) היא מאגר המידע שלנו. כל שורה במאגר המידע היא למעשה עמוד ייחודי באתר.
בהמשך, נאפיין ונעצב את התבנית של הדף הדינאמי, שכפי שכבר אמרנו- על בסיס תבנית זו נוכל ליצור אינסוף עמודי תוכן, שימשכו את התוכן שלהם מהמאגר עליו אנחנו מסתכלים כעת.
במקרה שלנו, יש במאגר המידע שם, תמונה, תפקיד, תיאור קצר, תיאור ארוך, אתר, אימייל, טלפון, קישור לדף הדינאמי הספציפי, וקישור לדף אינדקס.
כמו (כמעט) תמיד בוויקס, ניתן לשחק עם התבנית לפי הצרכים שלכם: למחוק עמודות קיימות, לערוך אותן או להוסיף עמודות חדשות. כעת לצורך הדוגמא, נוסיף עמודה חדשה: מימין לכל העמודות הקיימות, נלחץ על סימן הפלוס, ונבחר את שם העמודה- נקרא לה "אגף". בתוך Field Key נקרא לה "Wing", ובקטגוריית field type נבחר את קטגוריית "Text", היות ומדובר באלמנט שהוא טקסטואלי:
לאחר מכן נכניס בשדה החדש שנוצר ערך לבחירתנו, עבור כל אחד מהעובדים (ופה אולי המקום להזכיר שוב כדי לעשות סדר: כל שורה מייצגת עמוד, במקרה הזה כל עמוד הינו עמוד של עובד, וכל טור מייצג אלמנט אחד מתוך האלמנטים שבעמוד- טקסט, תמונה או אלמנט אחר.
דבר שחשוב להבין לגבי מאגר המידע, זה שיש לו שני מצבים, מצב Sandbox ומצב Live:
מצב SANDBOX - במצב זה המידע שנשמר יוצג רק ב- preview mode, ולא באתר בפועל.
מצב LIVE - במצב זה המידע שנשמר יוצג למשתמש באתר עצמו, ולא ב- preview mode
לכן, עכשיו זה הזמן ללחוץ על על הכפתור Sync Sendbox to Live, ולאחר מכן על Sync itemsץ לבסוף, צאו ממאגר המידע ולחצו על Publish.
עכשיו כשהבנו איך המאגר מידע עובד - בוא נראה איך הדפים נראים בפועל, ואיך אנחנו יכולים לעצב אותם ולמשוך את המידע שאנחנו רוצים.
אפיון ועיצוב העמודים הדינאמיים
עכשיו כשהבנו איך המאגר מידע עובד - בוא נראה איך הדפים נראים בפועל, ואיך אנחנו יכולים לעצב אותם ולמשוך את המידע שאנחנו רוצים.
נכנס לעמוד שקוראים לו (TEAM (ALL. זה עמוד שמאגד את כל העמודים הדינאמים, ובו אתם מגדירים את המבנה והעיצוב המשותף של כל העמודים. שימו לב, שהעמוד נראה שונה במצב עריכה ובמצד preview. במצב עריכה העמוד נראה ככה:
במצב preview, או באתר עצמו, העמוד מושך את המידע ממאגר המידע שלנו, ונראה ככה:
כמובן שאתם יכולים לערוך ולהחליף את האלמנטים בעמוד כך שיימשכו מידע מקטגוריות במאגר המידע לבחירתכם. לשם התרגול, לחצו על קוביית הטקסט ובתפריט שלה לחצו על האייקון הימני ביותר, שנראה כמו נחש עם שני עיגולים בקצוות. זהו האייקון שמסמן חיבור למאגר המידע. כעת, נשנה את הקישור Text connect to ונחליף אותו לשדה בשם "אגף" שיצרנו במאגר המידע קודם.
וגם, נשנה את הצבע של הטקסט לורוד. סתם כי אפשר. ועכשיו נלחץ preview, רואים מה השתנה?
התצוגה שלכם אמורה להראות כעת ככה:
עכשיו, נראה שאם אנחנו לוחצים על הקישור read more, אנחנו מגיעים לדף האחרון (TEAM (NAME - סוף סוף הגענו לעמוד הדינאמי. ובמקרה שלנו, זהו עמוד ייחודי לכל עובד. ה- NAME שבסוגריים אחרי שם העמוד, היא בעצם כתובת ה- URL של כל עמוד.
בעמוד זה, ניתן ללחוץ על כל אלמנט (טקסט, תמונה, כפתור וכו'), ובאמצעות האייקון של הנחש שכבר הכרנו, לקשר את האלמנט לאחד השדות במאגר המידע.