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

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

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

如下例 googlemap.php

<?php 
 $target = get_post_meta($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)

另外一種做法: function.php

這個作法指需要修改function.php即可,
最好能先搞懂什麼是Wordpress的HOOK, 以及the_content()的定義, 還有一些前人的解法

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

發表迴響