html - WordPress 图像不一致

Question

我正在为教师开发交互式电子类(class)计划生成器。在将其发送到我大学的 WordPress 页面之前，我正在测试所有内容都是 JSbin。

我有一堆带有 align="left"属性的图像。这在 JSbin 中完美运行，但在 WordPress 上它们呈对 Angular 线下降。这可以在第三个框中(共 4 个)的实时 RIT 页面中看到。这是 WordPress 中的已知错误还是我在复制代码时做错了什么？

< JSbin link />

< Live RIT page />

给我带来麻烦的代码块:

<p>Select Parts:</p>
<div id="bin3">
<img id="drag1" src="http://i.imgur.com/KliLtQ6.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag3" src="http://i.imgur.com/uGvqbbK.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag6" src="http://i.imgur.com/7Q6ym4O.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag8" src="http://i.imgur.com/dywyFeu.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag12" src="http://i.imgur.com/v76St3j.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag14" src="http://i.imgur.com/vO6a0ae.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag15" src="http://i.imgur.com/50c1YvW.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag16" src="http://i.imgur.com/BHn8uyJ.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN1" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN2" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE1" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE2" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<div id="RedLine"></div>
<div id="GreenLine"></div>
<div id="BlueLine"></div>
</div>

感谢您对这个元素的所有帮助!

Answer 1

我认为到目前为止的答案都很好，但我也认为您需要认识到问题的根源。这是 wordpress 中的默认行为，即在您的内容中注入(inject) p-tags 和 br-tags 而不是空行和后图像等。我宁愿称其为功能 而不是错误。不管喜欢与否。

对于普通的博客内容，它通常还不错。它可能会改善对 HTML 或其他类型一无所知的普通 WP 用户的生活。但可以肯定的是，当您不希望那些标 checkout 现时，这确实很烦人。

您可以过滤内容。删除 p/br 标签，但这几乎改变了 wordpress 的默认行为:

• > https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content
• > https://wordpress.stackexchange.com/a/130185/56491

还有插件:

• > https://wordpress.org/plugins/ps-disable-auto-formatting/
• > https://wordpress.org/plugins/toggle-wpautop/

就我个人而言，我不喜欢为每一件小事都添加一个插件。我可能会使用自定义页面模板(您的页面看起来足够自定义)，因此对于该特定页面，您可以使用单独的 html(php) 文件:

• > https://developer.wordpress.org/themes/template-files-section/page-template-files/#creating-a-custom-page-template-for-one-specific-page

我相信还有其他解决方法。