Question

好的，我想在我的Wordpress页面中实现一个响应式图像。为此我找到了一篇文章，让我学会了使用Picturefill。

这是我在TINYMCE编辑器中的代码：

<span data-picture data-alt="My responsive image">
    <span data-src="http://localhost:88/mywpwebsite/wp-content/uploads/2014/03/picture_200.png"></span>
   <span data-src="http://localhost:88/mywpwebsite/wp-content/uploads/2014/03/picture_300" data-media="(min-width: 768px)"></span>
   <span data-src="http://localhost:88/mywpwebsite/wp-content/uploads/2014/03/picture_400.png" data-media="(min-width: 1200px)"></span>
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="picture_200.png" alt="My responsive image">
    </noscript>
</span>

当我从TINYMCE编辑器更改为wisywyg编辑器而不是将我的代码删除到此时：

<span data-picture="" data-alt="My responsive image"><span data-picture="" data-alt="My responsive image">



<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --><noscript>
        <img src="picture_200.png" alt="My responsive image">
</noscript></span></span>&nbsp;

当我留在TINYMCE并保存页面时它可以工作，但我的浏览器有一些空格。如果我查看源代码，我会看到：

<span data-picture data-alt="My responsive image"><br />
    <span data-src="http://localhost:88/Controle_direct_WP/wp-content/uploads/2014/03/energieprestatiecertificaat_200.png"></span><br />
   <span data-src="http://localhost:88/Controle_direct_WP/wp-content/uploads/2014/03/energieprestatiecertificaat_300.png" data-media="(min-width: 768px)"></span><br />
   <span data-src="http://localhost:88/Controle_direct_WP/wp-content/uploads/2014/03/energieprestatiecertificaat_400.png" data-media="(min-width: 1200px)"></span><br />
</span><br />
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --></p>
<noscript>
        <img src="picture_200.png" alt="My responsive image"><br />
    </noscript>

我认为由于span标签而出现的问题。但我似乎无法找到一个好的解决方案。我无法禁用wisywyg编辑器，因为我的客户端将来必须更改内容

Wordpress TinyMCE＆amp; wisywyg strip＆amp;改变跨度

0 个答案: