嵌入代码不会显示在 WordPress 页面中

Question

我有一些简单的代码，其中包含在浏览器中显示网络地图所需的所有 html、css/styling 和 javascript。如果我从本地文件启动它，它会在浏览器中正确打开并显示 web 地图。我现在正尝试使用我的 WordPress editor/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 安装，所以我不确定是否还有其他需要，或者我的代码是否配置不正确。有什么建议

Answer 1

<meta> 标签最好添加在 <head> 中，link 也是如此（尽管 WP 已经有了这个视口标签，因此您可以忽略它）。您可以在页面本身内添加其余部分（在文本部分 - 无需插件）。我建议创建一个新模板，请参阅：WP Templates

控制台错误显示多个 defines。我取出看似重复的 require 并且它在页面上工作正常 (copy/paste):

<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>

虽然这可行，但我仍然建议将其放在模板上。

嵌入代码不会显示在 WordPress 页面中

Embedded code will not display in WordPress page

html

javascript

embed

wordpress