在WordPress主题中添加谷歌地图显示功能,可以使用谷歌地图的JavaScript API来实现。首先,你需要在谷歌云平台上创建一个项目,并获取到一个API密钥。
在WordPress主题的某个文件(例如functions.php)中添加以下代码来加载谷歌地图的JavaScript API:
function enqueue_google_maps_api() {
if (is_single() && get_post_type() == 'your_custom_post_type') { // 可以根据需要自定义条件
wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), null, true);
}
}
add_action('wp_enqueue_scripts', 'enqueue_google_maps_api');
注意,将 YOUR_API_KEY
替换为你在谷歌云平台上获取的API密钥。
接下来,在你希望显示地图的模板文件(例如单个自定义文章类型的模板文件)中添加以下代码:
<div id="map"></div>
<script>
function initMap() {
var location = {lat: 37.7749, lng: -122.4194}; // 设置初始位置的经纬度
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13, // 设置地图缩放级别
center: location // 设置地图中心位置
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
initMap();
});
</script>
这段代码将在地图标记(marker)中设置初始的经纬度,并在地图上显示一张具有默认缩放级别的地图。你可以根据需要自行调整初始位置的经纬度和地图的缩放级别。
最后,在自己的WordPress后台中,创建一个新的自定义文章类型,并启用这个主题。当在发布新文章时,你应该能够在前端看到一个带有谷歌地图显示功能的页面。
请注意,以上代码仅为示例,实际上可能需要根据你的需求进行相应的修改和扩展。