wordpress文章內實作Google Map嵌入代碼

1. 先作出一份可以重覆使用的代碼, 姑且就叫作 googlemap.php

可以先看這份Google Map 快速指南, 看完至少根據你的需求產生對應的嵌入碼smple

如下例 googlemap.php

&lt;?php 
 $target = <a href="http://blog.wpjam.com/function_reference/get_post_meta/">get_post_meta</a>($post-&gt;ID, 'MapPoint', $single = true); //會去讀取自定欄位MapPoint的值assign給$target 
?&gt;

&lt;div class="googlemap"&gt;
 &lt;?php 
 if ( !empty($target) )
 {
 echo '&lt;iframe width="750" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q='. $target .'&amp;key=填入你申請的API金鑰" allowfullscreen&gt;&lt;/iframe&gt;'; 
 }
 ?&gt;
 
&lt;/div&gt;

<?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

<?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()的定義, 還有一些前人的解法

function add_googlemap($content) { 
 global $post;
 $target = get_post_meta($post-&gt;ID, 'MapPoint', $single = true);
 $map_str = '&lt;div class="googlemap"&gt;';
 if ( !empty($target) )
 {
 $map_str .= '&lt;iframe width="750" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q='. $target .'&amp;key=填入你申請的API金鑰" allowfullscreen&gt;&lt;/iframe&gt;'; 
 }
 $map_str .= '&lt;/div&gt;';
 
 $content = $content ." ". $map_str ;
 $map_str = " ";
 return $content;
}
add_filter('the_content', 'add_googlemap');

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');

另外一種做法: function.php

發表迴響取消回覆