在WordPress主题中添加网站地图展示功能,可以使用Google Maps API。以下是通过在WordPress主题中添加自定义函数来实现的示例代码:
function add_custom_map_script() {
// Replace 'YOUR_API_KEY' with your own Google Maps API key
$api_key = 'YOUR_API_KEY';
// Enqueue Google Maps API script
wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=' . $api_key );
// Enqueue custom script for initializing the map
wp_enqueue_script( 'custom-map-script', get_stylesheet_directory_uri() . '/assets/js/custom-map-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_map_script' );
在上述示例代码中,首先需要将YOUR_API_KEY
替换为你自己的Google Maps API密钥。然后,使用wp_enqueue_script
函数引入Google Maps API脚本和自定义地图初始化脚本。
接下来,你需要创建一个自定义的JavaScript脚本文件(例如:custom-map-script.js
),用于在网页加载完成后初始化地图。下面是一个示例的custom-map-script.js
文件:
jQuery(document).ready(function($) {
// Initialize the map
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40.712776, lng: -74.005974 }, // Replace with your desired map center coordinates
zoom: 10 // Adjust the zoom level as per your requirement
});
// Add a marker to the map
var marker = new google.maps.Marker({
position: { lat: 40.712776, lng: -74.005974 }, // Replace with your desired marker position coordinates
map: map,
title: 'Marker Title' // Replace with your desired marker title
});
});
在上述示例JavaScript中,#map
代表用于显示地图的HTML元素的ID。你可以根据自己的需要自定义地图中心坐标、缩放级别和标记位置。
最后,将<div id="map"></div>
添加到你主题的相应页面模板文件中,这样地图就会显示在该页面上。
请注意,为了使此功能正常工作,你需要一个有效的Google Maps API密钥,并且可以将示例代码中的get_stylesheet_directory_uri()
替换为适当的路径以引用你自己的脚本文件。