iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
WordPress

關於WordPress的二三事系列 第 17

[Day 17] 放入 Google Map 地圖!

  • 分享至 

  • xImage
  •  

前言:

旅遊部落格最重要的分享就是介紹各地景點給大家,如果可以把地點位置標示得更好話,就可以更有效的幫助瀏覽者找到他們感興趣的景觀地點,所以今天就來介紹一下該如何把 Google Map 地圖加入到 WordPress 中!


1.複製HTML程式碼

加入 Google Map 有兩種方法,第一種就是直接到 Google Map 裡找到你要的地點直接複製html程式碼到文章中。

  • 在地點的下面找到「分享」的項目。
    https://ithelp.ithome.com.tw/upload/images/20230930/20162852Axe9XqmVr9.png

  • 在分享裡面選擇嵌入地圖的地方,下面有一串html的程式碼,點選旁邊的複製就可以直接複製到 WordPress 裡了。
    https://ithelp.ithome.com.tw/upload/images/20230930/201628525wEeXlMOD9.png

  • 回到文章的地方選擇加入「自訂html」,把剛剛的程式碼複製到這邊來。
    https://ithelp.ithome.com.tw/upload/images/20230930/201628528B05bWPafj.png

  • 點選「預覽」,就可以看到我們已經成功把 Google Map 放入文章裡囉!
    https://ithelp.ithome.com.tw/upload/images/20230930/201628522UAc9Njs4u.png

2.使用Elementor編輯器

第二個方法我們可以利用Elementor這個頁面編輯器,可以利用它內建的 Google Map 工具直接加入到文章中。

  • 第一步,可以到安裝外掛裡安裝Elementor。
    https://ithelp.ithome.com.tw/upload/images/20230930/20162852f6eT8P2XAB.png

  • 安裝完成後,在編輯文章的史後選擇使用Elementor的編輯器,在他提供的小工具欄裡找到 Google Map 的選項
    https://ithelp.ithome.com.tw/upload/images/20230930/20162852ce2R8aJIdY.png

  • 在位置的欄位中輸入你要的地點,就會直接定位到那邊啦!
    https://ithelp.ithome.com.tw/upload/images/20230930/20162852HUZeGJF5fp.png

以上提供兩種方法加入 Google Map 到 WordPress 裡,完成後記得更新和儲存到前台check一下呦!

謝謝大家看到這邊/images/emoticon/emoticon07.gif
明天繼續囉!
倒數13天


上一篇
[Day 16] 安裝網站分析工具 - Site Key By Google
下一篇
[Day 18] 修改網頁字型-Custom Fonts
系列文
關於WordPress的二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言