Карта листовок на Wordpress ⇐ Php

[Anonymous]

Итак, последние два часа я пытался выяснить, как использовать Leaflet Map для моего пользовательского типа сообщения, которое я создал... Итак, проблема в том, что мне нужно, чтобы карта отображалась только в archive.php этого пользовательского сообщения. типа, а не по постам... И вроде нет такого плагина, который позволит мне это сделать. Я запланировал создать 2 настраиваемых поля, одно для долготы, а другое для широты, и сделать карту динамической, где пользователи при добавлении нового кампуса должны будут добавлять координаты, которые будут отмечены на странице archive.php... Вот как выглядит мой файл function.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');

}

Я прочитал документацию, в которой мне нужно поместить назначенный div с идентификатором в мой файл archive.php, а также я отредактировал 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: '© [url=http://osm.org/copyright]OpenStreetMap[/url] contributors'
}).addTo(map);

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

Я пробовал установить листовку с помощью NPM и подключить ее к node_modules, но безуспешно... Я не знаю, что я здесь делаю не так?
Также при просмотре на моей вкладке консоли проверки элементов отображается следующее сообщение об ошибке: «Uncaught ReferenceError: L не определено»

Подробнее здесь: https://stackoverflow.com/questions/642 ... -wordpress