סקירה של תוסף MapSVG: צור מפות אינטראקטיביות בוורדפרס

סקירה של תוסף MapSVG: צור מפות אינטראקטיביות בוורדפרס

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


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

מפות אינטראקטיביות של MapSVG עבור וורדפרס

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

100+ מפות מוכנות

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

ומכיוון שרוב המפות מכוילות, ניתן להוסיף סמנים למפות באמצעות כתובת או קואורדינטות. נוסף על כך, אתה יכול ליצור מפות SVG משלך ולהעלות אותן ל- MapSVG.

כל שעליכם לעשות הוא ליצור תמונה SVG באמצעות כל תוכנת עריכה וקטורית כמו Inkscape או Adobe Illustrator, להעלות את הדבר הארור ולהתאים אישית משם..

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

חפצי מסד נתונים

MapSVG מאפשר לך ליצור אובייקטים ולהוסיף אותם לאזורים ספציפיים במפה שלך. זה מאפשר לך להעשיר את המפות שלך במידע שמציע למבקרים ברשת חוויה מדהימה.

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

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

מדריך לסינון וניתן לחיפוש

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

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

שפר את מפות Google

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

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

זכור כי מפות Google מגיעות עם מערכת פקדים. קשר את הפקדים האלה עם תכונות MapSVG ותספר את הספרות שלך בהתרגשות. הם יהיו כמו “איך לעזאזל הם עשו את זה?” תכונה זו מאפשרת לך לשפר את מפת Google שלך ​​על ידי הדגשת ציוני דרך והפיכת כל דבר ללחיצה.

עורכי CSS, JavaScript ועיצוב תבניות

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

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

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

לוח בקרה אינטואיטיבי עם תצוגה מקדימה בשידור חי

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

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

מפות תמונה

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

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

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

כיצד להגדיר MapSVG וליצור מפה

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

קבל MapSVG

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

סקירה של תוסף WordPress

הבא, היכה ב- העלה כפתור (1)בחר קובץ (2), ופגע ב התקן עכשיו (3) כפתור כמוצג להלן.

ביקורות על mapsvg

המתן מתהליך ההתקנה לסיום ולחץ על הפעל את התוסף כפתור.

סקירת mapsvg

וזה הכל; התוסף מוכן לשימוש לאחר ההפעלה. הקלק על ה MapSVG פריט במנהל WordPress כדי להפעיל את לוח הבקרה.

mapsvg

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

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

N / B: היזם ממליץ להשתמש מכויל גיאוגרפי מפות במקום לא מכויל מפות כי …

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

בחר בסין (או כל מפה אחרת שאתה אוהב) מבין מפת SVG חדשה התפריט הנפתח. אם אתה שונא את סרגל הגלילה, אל תהסס להשתמש בתיבת החיפוש.

יצירת מפה חדשה במפהsvg

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

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

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

עריכת צבעי מפות בתוסף Wordsvg WordPress

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

בחר את הצבעים שלך ואל תשכח להכות ב- שמור Ctrl + S כפתור כפי שנמחיש להלן.

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

הוספת טיפים לכלים ב- MapSVG

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

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

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

הוספת טיפים כלים בתוסף Wordsvg WordPress

לאחר מכן הוסף את הקוד הבא בעורך התבניות והקש על שמור Ctrl + S כפתור כמוצג למעלה.

מחוז: {{כותרת}}

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

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

ביקורות על mapsvg

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

הוספת שדות מותאמים אישית באמצעות אובייקטים של מסדי נתונים

MapSVG מאפשר לך להוסיף שדות מותאמים אישית למפות שלך. יש לנו כבר את השדה {{title}}, אך בוא נראה כיצד אנו יכולים להוסיף שדות מותאמים אישית נוספים. יש לך אפשרות לבחור שדות מותאמים אישית כולל טקסט, טקסטריה, תיבת סימון, תמונות, וכן הלאה. הבה נוסיף כמה תמונות למחוז Nei Mongol.

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

הוספת שדות מותאמים אישית ב- MapSVG

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

שמור את השינויים שלך על ידי לחיצה על שמור Ctrl + S כפתור. זכור תמיד לשמור את השינויים שלך.

הלהיט הבא רשימה כפתור כמוצג בתמונה למטה.

עבור למפה שלך ערוך אזורים ולחץ על אזור (בחרנו את Nei Mongol). אתה אמור לראות את השדה המותאם אישית החדש שלך (תמונות) לימין. הכה ב דפדף כפתור. ראו תמונה למטה.

במסך הבא, הוסף את התמונות שלך והקש על בחר תמונות כפתור.

תנותב חזרה אל ה- ערוך אזורים המסך בו עליכם ללחוץ על בסדר (1) כפתור. לאחר מכן לחץ על שמור Ctrl + S (2) ואז חזור אל תצוגה מקדימה (3) מצב כמוצג להלן.

אם אתה מנסה העכבר מעל Nei Mongol בשלב זה, התמונות לא יופיעו בהסבר הכלים. למה? ובכן, לא יצרנו תבנית לתמונות. בואו נעשה זאת ברגע זה.

נווט ל תפריט> תבניות> הסבר קצר על האזור ולשנות את הקוד לזה:

מחוז: {{כותרת}}
תמונה ראשונה:


כל התמונות:
{{#eachge תמונות}} {{/כל אחד}}

להלן תמונה להמחשה נוספת. זכור לפגוע ב- להציל כפתור.

כעת, נסה לרסק את האזור שבחרת (Nei Mongol במקרה שלנו). ספר לי מה אתה רואה. זה מה שמופיע על המסך שלי.

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

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

הבא, היכה ב- MapSVG כפתור כמוצג למעלה ובחר את המפה שלך. זה מוסיף את הקיצור [mapsvg id = ”17 ″ title =” סין ”] לדף וורדפרס שלך. בכל דרך, אל תהסס להוסיף את המפה בכל מקום באתר שלך באמצעות הקוד הקצר. אל דאגה, מפות שאתה יוצר באמצעות MapSVG מגיבות במאה אחוז, כלומר הן ייראו נהדרות בכל מכשירים מרובים.

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

סיכום

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map