ווידג'ט מפה אינטרקטיבית עם Unlimited Elements & ACF

באתר הטיולים והטרקים שלי רציתי להציג ווידג'ט מפה וקטורית אינטרקטיבית שהערכים בה יגיעו בצורה דינאמית באמצעות Advanced Custom Field. לא משימה מאוד פשוטה אבל עם Unlimited Elements, גם לא מאוד מסובכת.
World map

תוכן עניינים

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

תיאור הצורך והבעיה

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

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

שלב ראשון – הכנה

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

הקובץ שתורידו יהיה או קובץ וקטורי מסוג כזה שנפתח עם Illustrator ותוכנות דומות או קובץ svg שאפשר לערוך עם כל עורך קוד.

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

vector europe map
הורדתי מפת העולם העולם ולקחתי ממנה רק את אירופה

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

שלב שני – התאמת המפה

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

  1. באמצעות תוכנה לעריכת קבצים וקטורים כמו Illustrator
  2. בעמצאות עריכת קבצי svg

התאמה באמצעות Illustrator

פתחו את הקובץ שמסתיים ב ai בתוכנת Illustrator (אם אין לכם כזה קובץ אלא svg בלבד, דלגו על השלב הזה).

כעת תוכלו למחוק אלמנטים מסוימים מהמפה – בחירה של האלמנט ומחיקה.

להגדיר צבעים של אלמנטים – בחירה ושינוי של Fill, Stroke, Opacity.

וכן משהו נחמד מאוד למפה אינטרקטיבית, להוסיף קישורים לאלמנטים. נניח קישור לעמוד וויקיפדיה של אותה מדינה – תפריט Attributes.

אני בטח תוכלו לחשוב על דברים יצירתיים מאלה. לאחר שסיימתם שמרו את הקובץ כ- svg.

התאמה באמצעות עורך קוד

אני משתמש וממליץ על Visual Studio Code אבל תוכלו להשתמש במה שנוח לכם מ notepad ועד Dreamweaver.

לפני שתתחילו, ממליץ לכם להוריד תוסף ל VS Code שנקרא Svg Preview. אם אתם משתמשים בעורך אחר חפשו תוסף תואם. אם אתם הולכים hard core ועורכים ב notepad, תדמיינו איך הנתנוים ב path הופכים לתמונה 😉

כעת נסו להבין לפי ה preview איזו תמונה מיוצגת על ידי איזה קוד, התהליך לא מסובך. פשוט מחקו path ומיד תראו איזה חלק תמונה נעלם. כעת אם החלק הוא מיותר, פשוט מחקו אותו, אחרת קראו לאותו path בשם מזהה כדי שתזהו אותו להבא. תוכלו למשל להוסיף id="France" על החלק במפה שמסמן את צרפת. אם מדינה מסוימת מיוצגת על ידי קבוצת paths שמאוגדת תחת <g>, קראו לכל הקבוצה בשם מזהה.

בצד שמאל קוד, בצד ימין תצוגה מקדימה מיידית של התמונה

כדי להשלים את שני הדברים האחרים שעשינו באמצעות Illustrator – צבעים וקישורים, נשתמש ב Style ובתגית <a>. באמצעות Style נוכל להגדיר class או כמה כאלה ולתת אותם לחלק הרלוונטי ובאמצעות <a> נוכל לתת קישור לכל path או לכל קבוצה.

<style type="text/css">
    .whiteWithBlackStroke{fill:#FFFFFF;stroke:#000000;stroke-width:0.5}
    .whiteWithBlackStroke:hover{fill:#FC0FC0;stroke:#EBCB58;}
</style>
<path class="whiteWithBlackStroke" d="M83.7,11...../>
<a xlink:href="url">
    <path class="whiteWithBlackStroke" d="M83.7,11...../>
</a>

שלב שלישי – יצירת ווידג'ט

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

זהו תוסף לאלמנטור שהערך המוסף שלו זה האפשרות ליצור וודג'יטים לאלמנטור. במקום לקנות תוספים שנותנים לנו כל מיני סוגי ווידג'טים, כאן נוכל ליצור אותם בעצמנו. רמת הקושי של השימוש בתוסף תלויה ברמת המורכבות של הווידג'ט שניצור. כדי ליצור ווידג'ט כותרת לדוגמה, לא תצטרכו להתאמץ גם אם אין לכם מושג בקוד אבל בשביל ליצור דברים מורכבים יותר שכוללים חוץ מ html גם css & js צריך יותר ידע. זה לא שתצטרכו לכתוב משהו מאפס כי תמיד אפשר את הרוב להעתיק מסניפט מוכן אבל אם תצטרכו התאמות, אתם תדרשו להבין קצת בקוד.

כנסו לתוסף וצרו ווידג'ט חדש. תנו לו כותרת מתאימה ושם חוקי. לדוגמה: My Interactive Map ו- my_interactive_map. יש כמה הגדרות נוספות שתוכלו לתת כמו אייקון, אפשרויות תצוגה מקדימה, תיאור ועוד. מה שחשוב לנו זה בחירה באפשרות של Use Dynamic Content

ב Demo Post בחרו פוסט עליו תרצו לעבוד. ובחרו ב Use Custom Fields. כעת עברו ללשונית Attributes. כאן נוכל להוסיף מאפיינים אותם נוכל לשנות בווידג'ט מתוך העורך של אלמנטור. בדוגמה שלנו נוכל להוסיף, רוחב, גובה, קישור, צבע פעיל, צבע לא פעיל, צבע מעבר ועוד כיד הדמיון. שימו לב שלכל מאפיין צריך לבחור את סוג המאפיין הנכון. לדוגמה צבע הוא Color Picker, קישור הוא שדה Link וכן הלאה.

ב Item Attributes השאירו No, במקרה של מערך תוכלו לבחור Yes.

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

למשל מאפיין צבע יראה כך:

<style type="text/css">
	.fillWithAttribute{fill:{{dynamic_color}};}
</style>

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

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

שלב רביעי – הפיכת הווידג'ט לדינאמי

כדי להשיג את המטרה הזאת נוסיף שימוש בעוד תוסף מומלץ ACF. לא חייבים אותו דווקא, אפשר ליצור את השדות ב Pods (חינם לגמרי) או ב Toolset (יקר) וגם ב JentEngine שעליו אני פחות ממליץ. לפני יצירת השדות תצטרכו לבחור האם ליצור גם פוסט חדש בשביל זה או להוסיף את השדות לפוסט קיים. אם תחליטו על פוסט חדש תוכלו להשתמש באותם כלים שהזכרתי קודם (למעט ACF) או ב CPT UI או כמובן ליצור את סוג הפוסט בקוד שזה דבר תכלס מאוד פשוט.

נוסיף שדה דינאמי מסוג שאותו אנחנו רוצים, זה יכול להיות Link או טקסט או כל דבר אחר נתן לו שם שנזכור וזהו בינתיים. כעת נחזור לעריכת הווידג'ט שלנו ב Unlimited Elements ובלשונית html נלחץ ברגל הצד על current_post. בגלל שבשלב הקודם בחרנו שהווידג'ט שלנו יתמוך בשדות מותאמים אישית דינאמית יש לנו אפשרות לבחור שדה מהפוסט הרלוונטי שגם אותו בחרנו בשלב הקודם.

כך יראה הטמעה של שדה ACF. הוספת raw בסוף תביא את הערך כמו שהוא רשום בדיוק בשדה טקסט לדוגמה.

{{current_post.your_acf_name|raw}}

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

סיכום

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

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

0 0 דרג
דרג את הפוסט

תוכן עניינים

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

הרשמה
Notify of
0 תגובות
Inline Feedbacks
הצג את כל התגובות

גם הפוסטים הבאים יעניינו אותך

0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx