Wordpress 上的传单地图

Question

所以在过去的两个小时里，我一直在试图弄清楚如何在我制作的自定义帖子类型上使用 Leaflet Map...所以问题是我需要地图只显示在该自定义帖子的 archive.php 上键入，而不是在帖子上......而且似乎没有这样的插件可以让我这样做。我的计划是我将制作 2 个自定义字段，一个用于经度，另一个用于纬度，并使地图动态化，用户在添加新校区时必须添加坐标，这些坐标将在 archive.php 页面上标记...这就是我的 functions.php 的外观：

function university_files() {

    wp_enqueue_script('custom.js', get_template_directory_uri() . '/js/custom.js');
    wp_enqueue_script('leaflet.js', 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js', array( 'jquery' ), false, true);
    wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'),
    // microtime() is wordpress function which stops site from caching and forces it to load js again and again, and we don't use this on live server
    NULL, microtime(), true);
    
    

    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    // microtime() forcing style.css to load everytime we refresh site and stops cahcing of the site
    wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());
    wp_enqueue_style('leaflet.css', 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css');
    wp_enqueue_style('custom.css', get_template_directory_uri() . '/css/custom.css');

}

我已经阅读了文档，其中我必须在我的 archive.php 文件中放置带有 id 的指定 div，并且我还编辑了 CSS 以及添加所需的 JS...

这就是我的 custom.css 的样子：

#map {
  height: 180px;
}

custom.js：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

我尝试使用 NPM 安装传单并将其从 node_modules 排入队列，但没有运气......我不知道我在这里做错了什么？ 同样在查看我的检查元素控制台选项卡时，它会显示以下错误消息：“未捕获的 ReferenceError：L 未定义”

Answer 1

我认为您必须添加如下脚本：

wp_register_script('leaflet', 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js', null, null, true);
wp_enqueue_script('leaflet');

发件人：https://stackoverflow.com/a/40403412/8283938