אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: בניית הדף
מה נלמד בשיעור הזה?
- נייצר CCT של "הסניפים שלנו" עבור המפה הדינמית כולל יצירת שדה מטא מסוג "Map"
- נגדיר את המפה דרך שימוש בLeaflet כספק מפה ובOpenstreet Map ומקודד מיקומים
- נראה איך לייצר פוסטים בCCT ולהוסיף להם מיקומים דרך השדה הייחודי
- נייצר ליסטינג מתאים ונחבר אותו בהתאם
- נחבר את הכל אל הווידג'ט Map Listing בדף הנחיתה ונתאים את הסטיילינג שלו
- נראה דוגמא לשימוש במפה דינמית באתר של עזרום
וקצת יותר בפירוט...
בשיעור "יצירת מפה דינמית" בקורס בניית דף הנחיתה של מרפאת "דנטליס", התלמידים לומדים כיצד לשלב מפות אינטראקטיביות שמציגות נתוני מיקום דינמיים. תחילה, יוצרים CCT (Custom Content Type) חדש בשם "הסניפים שלנו", הכולל שדה מטא ייחודי מסוג "Map". שדה זה מאפשר להגדיר בקלות מיקומים מדויקים עבור כל סניף, ומספק גמישות מרבית בתצוגת נתוני המפה.
המפה מוגדרת באמצעות Leaflet כספק מפה, בשילוב OpenStreetMap, המספקת פתרון אמין ויעיל להצגת מיקומים. כחלק מהשיעור, התלמידים מתנסים בקידוד מיקומים בצורה ידידותית, כך שניתן להוסיף נתונים גיאוגרפיים בקלות לכל פוסט ב-CCT. היכולת להוסיף ולנהל מיקומים ישירות מתוך לוח הבקרה של וורדפרס הופכת את המערכת לדינמית ונוחה לשימוש.
לאחר הכנסת המידע, יוצרים ליסטינג שמותאם אישית ומחברים אותו למפה באמצעות הווידג'ט Map Listing. חיבור זה מאפשר להציג את המיקומים בצורה מאורגנת ואינטראקטיבית בדף הנחיתה. בנוסף, מתבצעת התאמת סטיילינג באמצעות CSS על מנת להבטיח שהמפה תשתלב באופן הרמוני עם העיצוב הכללי של האתר, תוך שימת דגש על אסתטיקה ונגישות.
כדי להדגים את הפוטנציאל של מפות דינמיות, מוצגת דוגמה חיה מהאתר של עזרום, הממחישה כיצד אלמנט זה יכול לשפר את חוויית המשתמש ולספק מידע שימושי בצורה אטרקטיבית. שיעור זה מעניק למשתתפים כלים מתקדמים לעיצוב וניהול של מפות דינמיות, המותאמות אישית לצרכים של אתרי וורדפרס, ומאפשר להם להציע פתרונות עיצוביים וטכניים מתקדמים עבור פרויקטים עתידיים.