בזמן הקרוב אני רוצה לכתוב סדרת פוסטים על אחד מתוספי הוורדפרס הטובים והמרגשים שיצא לי לעבוד איתם – Dynamic Content For Elementor (או בקיצור DCE או dynamic.ooo).
כתבתי כבר פעם שאם יש תוסף אחד שחייבים בעבודה על אתר מורכב עם אלמנטור, זה התוסף.
כמו שמובן משם התוסף, הוא מיועד למשתמשי אלמנטור אבל הוא לא עוד תוסף ווידג'טים לאלמנטור כמו עשרות אחרים שקיימים בשוק. מדובר בתוסף שהוא עולם שלם של יכולות ועל חלקן אני אעבור בסדרת הפוסטים הזאת.
הפוסט הראשון בסדרה יהיה על הוספת כפתור "הוסף למועדפים" לפוסטים.
למה צריך כפתור "הוספה למועדפים"
הסיבה היא פשוטה, זה טוב לגולש ומה שטוב לגולש טוב גם לכם כבעלי האתר כי הגולשים ירצו לחזור לאתר שלכם.
נניח יש לכם אתר מתכונים או טיולים או דירות להשכרה וכן הלאה. הגולש נכנס לאתר רואה כמה דברים שהוא אוהב ורוצה לשמור אותם ברשימה משלו כדי שיוכל לחזור אליה אחר כך. אם אין לכם אופציה של שמירת מועדפים, הוא יצטרך לשמור כל דף כזה במועדפים שלו או לשמור את הכתובת בכל מקום אחר וזה תסכימו איתי, פחות נוח.
אם יהיה לכם באתר כפתור כזה, זה יקל עליו מאוד וגם יגרום לו לרצות לחזור לאתר שלכם דווקא כי שם המידע שהוא צריך כבר מחכה לו. בנוסף אולי זה גם יגרום לו להירשם לאתר שלכם כדי שהנתונים ישמרו לתמיד תחת הפרופיל שלו.
איך אפשר להוסיף ולהציג תוכן מועדף
לפני שניגע ישירות ב DCE, נבין ברמה התיאורטית מה הדרישות כדי לממש יכולת כזאת. ניתן לחלק את הפעולה לשניים, חלק ההוספה וחלק ההצגה כשמידע צריך לעבור בין החלקים:
- צריכים מן הסתם כפתור כדי שהמשתמש יוכל ללחוץ עליו כדי להוסיף משהו למועדפים
- צריכים מקום להציג את המועדפים שאותו משתמש הוסיף
אבל מה קורה מאחורי הקלעים? המידע הזה צריך להישמר איפשהו כדי שנוכל להציג את מה שנוסף למועדפים.
זה אומר שאנחנו צריכים לזהות את ההוספה ולשמור מידע עליה ובעת ההצגה נדע להציג את מה שנוסף. את זה אפשר לעשות בכמה שיטות.
- משתמש מחובר – אם המשתמש מחובר, נשמור את המידע הזה בטבלת משתמשים ונציג את המידע לאותו משתשמ בלבד.
- קוקי / עוגיה – אם המשתמש לא מחובר, נוכל לשמור את המידע על ידי קוקי ונציג את המידע לכל מי שיגלוש באותו דפדפן עם הקוקי השמור. המידע ישמר כל עוד לא עבר ה expiration time וכל עוד המשתמש לא ניקה קוקיז מהדפדפן.
- גלובלית – אופציה זו תשמור את המידע בטבלת options של וורדפרס ותהיה זמינה בצורה גלובלית.
אם אתם שואלים את עצמכם איזה שימוש יכול להיות בהוספה של מועדפים בצורה גלובלית, התשובה היא שכך נוכל לעשות משהו כמו "פוסט דביק" למשל לכל האתר.
איך שומרים מועדפים עם dynamic.ooo
חלק ראשון – הוספה למועדפים
לצורך זה, השתמשו בווידג'ט שנקרא Add To Favorites. גררו אותו לאיזשהו מקום בדף אלמנטור.
במידה ואתם לא מתכוונים להוסיף את הכפתור רק לדף ספציפי, הדרך הנכונה לעשות את זה היא על ידי הוספה של הווידג'ט ל single post template בעזרת theme builder כך שהכפתור יופיע בקביעות בסוג הפוסט המדובר.
ככה נראות הגדרות הווידג'ט לאחר הוספה:
נעבור על ההגדרות.
Scope: פה נבחר את שיטת השמירה של המידע. כמו שראינו לעיל, ניתן לשמור את המידע על המועדפים בסקופ של המשתמש המחובר, בסקופ של קוקי או בצורה גלובלית.
Show counter: במידה ובחרנו בסקופ של משתמש או קוקי, נוכל להציג ליד הכפתור את מספר הפעמים שתוכן זה הוסף למועדפים.
Favorite Lists: ניתן להגדיר רשימות על פי הצורך ולתת להם שם מתאים.
Key: זהו הערך החשוב להתייחסות לאחר מכן כשנרצה להציג את המועדפים. ניתן לתת כל שם ייחודי באנגלית ללא רווחים.
Title: תוכלו לכתוב מה שאתם רוצים. בהמשך ניתן לבחור הודעה ואייקון מותאמים להוספה ולהסרה.
Can remove: האם נותנים אופציה להסרה.
Ajax: האם ההוספה/הסרה יעשו בעזרת ajax. אם תבחרו שכן, לא תצטרכו לרענן את הדף בשביל שהפעולה תתבצע.
החלקים הכי חשובים פה הם: Scope ו- Key. נצטרך להתחשב בבחירה שלנו פה בשביל החלק השני שהוא הצגה של התוכן המועדף.
זכרו שבהתאם לסקופ שנבחר, התוכן יוצג למשתמש מחובר, למשתמש עם קוקי שמור או בצורה גלובלית.
חלק שני – הצגת מועדפים
בשביל החלק הזה נצטרך להשתמש בווידג'ט שנקרא Views. זהו ווידג'ט שאעשה עליו עוד פוסט נפרד אבל כרגע נתמקד רק בצורך שלנו – הצגת מועדפים. יצרו דף חדש או השתמשו בקיים לפי מה שמתאים לכם וגררו אליו את הווידג'ט.
כעת בהתאם לבחירת הסקופ שלנו, נגדיר את ה view.
במקרה שבחרנו סקופ של קוקי, נגדיר כך.
נוכל גם לרשום ישירות במקום להשתמש ב token wizard:
[system:cookie:my_favorites]
ובמקרה של יוזר נגדיר כך:
ואם בחרנו באופציה הגלובלית, נרשום כך:
[option:my_favorites]
שימו לב במקום my_favorites אתם צריכים להכניס את ה key שנתתם לרשימה שלכם.
עיצוב רשימת המועדפים
מה שעשינו עד עכשיו זה לתת את הקריטוריון הנכון לשליפת הנתונים אבל יש עוד חלק שצריך לטפל בו וזה אופן ועיצוב התצוגה של התוצאות.
ווידג'ט views כולל אפשרויות מתקדמות לטפל בזה. זה מתחלק לשניים. החלק הראשון מגדיר את בסיס התצוגה לכל פריט וכן את סוג התצוגה. והחלק השני הוא עיצוב הסגנון על בסיס מה שבחרנו בחלק הראשון.
לגבי החלק השני אין כל כך מה לפרט, פשוט כנסו ללשונית המתאימה בווידג'ט ועצבו כרצונכם כמו בווידג'ט אלמנטור רגיל.
החלק הראשון הוא המעניין. הוא כולל, שוב פעם שני חלקים (אני שם לב שהרבה דברים פה כוללים שני חלקים).
- Select – פה נבחר איך להציג פריט. האם טקסט, שדות או תבנית.
- טקסט: html שבונה את התצוגה הבסיסית של כל פריט. במקרה של שמירת פוסט למועדפים זה יכלול למשל, תמונה ראשית, תקציר וכפתור "קרא עוד".
- שדות: במקרה זה במקום לבנות תצוגה על ידי html אפשר לבחור שדות מהפוסט.
- תבנית: זה האופציה העיצובית המתקדמת ביותר. היא מאפשרת לבנות טמפלייט לתצוגה של פריט (כמו Loop לפוסטים). אתם בונים טמפלייט באלמנטור על פי עיצוב מותאם ואז נותנים ל view להשתמש בו. אפשרויות העיצוב בלתי מוגבלות.
- Skin – באיזה אופן לרנדר את כלל התוצאות. גריד, טבלה, רשימה או מצגת.
סיכום
כעת יש לכם גם את האופציה להוסיף פריטים באתר למועדפים וגם להציג אותם בצורה מעוצבת ויפה. ווידג'ט views הוא הרבה יותר מהצגת מועדפים אבל על זה נראה בהמשך.
אם אתם רוצים לראות דוגמה של הוספה למועדפים בפעולה, כנסו לאתר הטרקים והטיולים שלי ותראו.
אם אהבתם את התוסף ותרצו לרכוש אותו, אשמח אם תרכשו דרך הקישור שלי – Dynamic Content for Elementor.
