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

【问题标题】：Embedded code will not display in WordPress page嵌入代码不会显示在 WordPress 页面中
【发布时间】：2019-04-18 19:46:58
【问题描述】：

我有一些简单的代码，其中包含在浏览器中显示 web 地图所需的所有 html、css/样式和 javascript。如果我从本地文件启动它，它会在浏览器中正确打开并显示 web 地图。我现在正在尝试使用我的 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 html wordpress embed

【解决方案1】：

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

控制台错误显示多个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 部分。当我检查浏览器控制台时，我收到“未捕获的 ReferenceError：未定义要求”，因此它没有读取我的 cdn 或其他内容。
为了清楚起见，您添加了上面的 2 个脚本（特别是 minified/require.js），然后在下面添加了 require([... 调用？我必须查看页面/错误才能知道发生了什么
好的，它的工作。显然，我必须先发布，加载只需一分钟。