פרויקט גמר – תוסף CPT Map Marker

CPT Map Marker​​

פרויקט גמר, קורס פיתוח אתרים – פרוג.

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

התוסף תומך גם ב CPT, ומכאן שמו…

שימושים אפשריים, רשימת סניפים, פוסטים לפי מיקום וכדו'.

השימוש בתוסף הוא קל וקליל, להתקין ולעבוד.

שלב א'

בהגדרות התוסף נגדיר באלו סוגי פוסטים לתמוך.

New Project

כמו"כ נגדיר את אייקון ברירת המחדל לפוסטים שלא נגדיר להם אייקון מותאם.

New Project (1)

שלב ב'

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

  • הצגה / הסתרה על המפה
  • מיקום על המפה לפי קואורדינטות.
  • חיפוש לפי כתובת.
  • קליק על המיקום במפה.
  • אייקון מותאם אישית.
  • טקטס - פופ אפ.
  • קישור לפוסט - וטקסט מותאם אישית.
New Project

שלב ג'
הצגת המפה

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

ניתן לממש שורטקוד ברירת מחדל  [ cptmm_map ].
או שורטקוד מורחב עם ארגומנטים, [ cptmm_map width='600px' height='300px' lat='51.505' lng='-0.09' ]
הגדרת גובה ורוחב המפה, וכן מרכוז המפה.

 דוגמא:

כמה מילים לסיום…

השקעתי חשיבה רבה על UI ו UX ע"מ ליצור חווית שימוש ולא רק אפקטיביות.

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

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

דוגמא של התוסף באתר שבניתי , https://koshertirol.com/map/

עמוד התוסף בהגדרות http://shtain.prog-sites.co.il/wp-admin/admin.php?page=CPT-map-marker

 

 

אתגר מעניין לספר עליו:

function cptmm_save_metadata($ID = false, $post = false){

    if(isset($_POST['action']) && $_POST['action'] == 'elementor_ajax'){

        return;

    }

    if(isset($_POST['cptmm_show_on_map'])){//check if send in post

        update_post_meta($ID, 'cptmm_show_on_map', $_POST['cptmm_show_on_map']);

        update_post_meta($ID, 'cptmm_coordinate', $_POST['cptmm_coordinate']);

        update_post_meta($ID, 'cptmm_icon_url', $_POST['cptmm_icon_url']);

        update_post_meta($ID, 'cptmm_popup_text', $_POST['cptmm_popup_text']);

        update_post_meta($ID, 'cptmm_link_to_post', $_POST['cptmm_link_to_post']);

        update_post_meta($ID, 'cptmm_text_link_to_post', $_POST['cptmm_text_link_to_post']);

    }else if(get_post_meta($ID, 'cptmm_show_on_map')){//if not check if is change now

        update_post_meta($ID, 'cptmm_show_on_map', '');

    }

}

add_action('save_post', 'cptmm_save_metadata');

תודה רבה...

השאר תגובה

כתובת המייל שלך לא תפורסם, שדות חובה מזומנים בכוכבית. *