Встроенный код не будет отображаться на странице WordPress
У меня есть простой код, содержащий все HTML, CSS / стили и javascript, необходимые для отображения веб-карты в браузере. Если я запускаю его из файла на моем локальном компьютере, он правильно открывается в браузере и отображает веб-карту. Теперь я пытаюсь встроить этот код на страницу с помощью своего редактора WordPress / CMS.
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel = "stylesheet" href = "https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src = "https://js.arcgis.com/3.26/"></script>
<script src = "https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<script>
require(["esri/map", "dojo/domReady!"], function(Map) {
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75],
zoom: 13
});
});
});
</script>
<div id = "map"></div>
Я попытался установить плагин под названием «Scripts n Styles», который, как предполагается, помогает читать теги <script>, но, тем не менее, он отображается как пустой. Это совершенно новая установка Word Press, поэтому я не уверен, что мне еще нужно, или мой код просто настроен неправильно. Какие-либо предложения
Да, я использую текстовый редактор, а не визуальный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Тег <meta> лучше всего добавлять в <head>, как и link (хотя в WP уже есть этот тег области просмотра, поэтому вы можете его игнорировать). Вы можете добавить остальное на самой странице (в текстовом разделе - плагин не нужен). Я бы порекомендовал создать новый шаблон, см .: Шаблоны WP
Ошибка консоли показывает несколько defines. Я вынул, казалось бы, дубликат require, и он отлично работает на странице (копирование / вставка):
<link rel = "stylesheet" href = "https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src = "https://js.arcgis.com/3.26/"></script>
<script src = "https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75],
zoom: 13
});
});
</script>
<div id = "map"></div>Хотя это работает, я все же рекомендую использовать его в шаблоне.
Хорошо, когда я вставляю его в свой текстовый редактор и публикую, он все еще отображается как пустой. Я создал новую тему. Я даже попытался поместить код на уровне страницы в Scripts n Styles для раздела head, как было предложено. Когда я проверяю консоль браузера, я получаю сообщение «Uncaught ReferenceError: require is not defined», поэтому он не читает мой компакт-диск или что-то в этом роде.
Для ясности, вы добавили 2 сценария выше (в частности, minified/require.js), а затем вызов require([... прямо под ним? Мне нужно было бы увидеть страницу / ошибки, чтобы знать, что происходит
Хорошо, это работает. Видимо, мне нужно было сначала опубликовать, и загрузка заняла всего минуту.
Вы используете режим просмотра "Текст" в редакторе?