1. 先作出一份可以重覆使用的代碼, 姑且就叫作 googlemap.php
可以先看這份Google Map 快速指南, 看完至少根據你的需求產生對應的嵌入碼smple
如下例 googlemap.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php $target = <a href="http://blog.wpjam.com/function_reference/get_post_meta/">get_post_meta</a>($post->ID, 'MapPoint', $single = true); //會去讀取自定欄位MapPoint的值assign給$target ?> <div class="googlemap"> <?php if ( !empty($target) ) { echo '<iframe width="750" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q='. $target .'&key=填入你申請的API金鑰" allowfullscreen></iframe>'; } ?> </div> |
再到single.php裡面
把 <? include(googlemap.php) ?> 放到 the_content()之後…
—
可以在wordpress單篇文章內設定:
2. 必須要申請Google Map API 的金鑰(key)
- 先去申請專案
- 啟動(enable)所需的API: (Google Maps API 適用於 Web) 而我開啟下面這三個API
- Google Maps Embed API.
- Google Maps JavaScript API.
- Google Static Maps API.
另外一種做法: function.php
這個作法指需要修改function.php即可,
最好能先搞懂什麼是Wordpress的HOOK, 以及the_content()的定義, 還有一些前人的解法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function add_googlemap($content) { global $post; $target = get_post_meta($post->ID, 'MapPoint', $single = true); $map_str = '<div class="googlemap">'; if ( !empty($target) ) { $map_str .= '<iframe width="750" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q='. $target .'&key=填入你申請的API金鑰" allowfullscreen></iframe>'; } $map_str .= '</div>'; $content = $content ." ". $map_str ; $map_str = " "; return $content; } add_filter('the_content', 'add_googlemap'); |