wordpress 表中未保留内联样式答案

【问题标题】：Inline styles not preserved in wordpress tablewordpress 表中未保留内联样式
【发布时间】：2018-04-29 10:09:57
【问题描述】：

我们公司开发了一些非常简单的基于表格的可点击 html 电子邮件签名供客户使用，我们希望在 http://scottleroymarketing.com/email-signature 上将它们展示为可点击，但正如您所见......嗯。

除了使用表格进行布局和内联 CSS 与样式表（这两者都是我们发现在电子邮件提供商中工作的最简单方法，尤其是我们大多数客户使用的 Gmail/GSuite）之外，还有什么在 wordpress 中会覆盖/弄乱表格的内联样式？据我所知，内联样式胜过主题中的全局 CSS，但可能存在我不知道的例外情况。我对 Wordpress 非常缺乏经验，所以我可能一直在用谷歌搜索错误的东西（我一直在寻找“wordpress 表格样式”和“wordpress 内联样式”，但我发现的只是有关如何将样式应用于表格的教程，并修复了页面上未显示的 html/富文本编辑器）。我们可以截取应显示的模板，并将其放在页面上，但如果可能的话，我们宁愿演示元素如何全部可点击而不是图像块签名。

我已经在 Chrome 和 Firefox 上预览了该页面，我认为它在其他浏览器上看起来基本相同，因为我使用的所有元素在每个浏览器上呈现大致相同。我不确定我们使用的是哪个版本的 Wordpress，或者如何找到它。

这是该页面上显示的第二个签名的代码，已经过调整，至少列的宽度有些正确：

<!-- Begin Signature #2 !-->
<div class="slmsignature1">
<table style="width: 80%; max-width: 700px; min-width: 300px; border: none; border-collapse: collapse; background: url('http://i.imgur.com/SizXUrg.jpg'); background-color: black; color: #fff; font-family:sans-serif;">
    <tbody>
        <tr>
            <td style="width: 200px; font-family:'Gill Sans MT', Tahoma, sans-serif;">
                <img style="width: 100%; max-width: 195px; margin: 0px;" src="http://i.imgur.com/ectryVc.jpg" alt="Scott Le Roy's Head Shot" />
            </td>
            <td style="vertical-align: bottom; font-family:'Gill Sans MT', Tahoma, sans-serif;">
                <img style="max-width: 160px;" src="http://i.imgur.com/Uns6X52.png" alt="Keller Williams Logo" />
                <p style="font-size: 6pt; margin-bottom: 0px;">
                    Each Keller Williams Office
                    <br />
                    Is Independently Owned And Operated
                </p>
            </td>
            <td style="vertical-align: top; text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif;" colspan="2">
                <h1 style="font-family: sans-serif; margin: 0px 5px 0px 0px;">
                    Scott Le Roy
                </h1>
                <h2 style="font-family: sans-serif; font-size: 15px; margin: 0px 5px 5px 0px;">
                    CEO/Digital Marketer
                </h2>
                <p style="margin: 0px 5px 0px 0px;">
                    <a style="color: #fff; text-decoration: none;" href="tel:123-456-7890">
                         C: 123-456-7890
                    </a>
                </p>
                <p style="margin: 0px 5px 0px 0px;">
                    <a style="color: #fff; text-decoration: none;" href="tel:321-654-0987">
                         O: 321-654-0987
                    </a>
                </p>
                <p style="margin: 5px 5px 0px 0px;">
                    <a style="color: #fff; text-decoration: none;" href="mailto:scott@scottleroymarketing.com">
                         Scott@ScottLeRoyMarketing.com
                    </a>
                </p>
                <p style="margin: 0px 5px 0px 0px;">
                    <a style="color: #fff; text-decoration: none;" href="http://scottleroymarketing.com">
                         www.ScottLeRoyMarketing.com
                    </a>
                </p>
            </td>
        </tr>
        <tr style="height: 25px; text-decoration:none; font-size:8pt;">
            <td style="text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif;">
                <a href="https://www.facebook.com/groups/scottleroymarketing/">
                    <img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/ES2mp6u.png" alt="Facebook Icon" />
                </a>
                <a href="https://www.twitter.com/">
                    <img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/E2iChYF.png" alt="Twitter Icon" />
                </a>
                <a href="https://www.pinterest.com/">
                    <img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/dJARSqo.png" alt="Pinterest Icon" />
                </a>
                <a href="https://www.linkedin.com/">
                    <img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/Ucw1EDq.png" alt="Linkedin Icon" />
                </a>
                <a href="https://www.instagram.com/">
                    <img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/lFx5fpA.png" alt="Instagram Icon" />
                </a>
            </td>
            <td style="text-align: center; width 40%; font-family:'Gill Sans MT', Tahoma, sans-serif;">
                123 E. Main St #201
                <span style="color: #b40101;">
                    |
                </span>
                 Anytown, VA 12345
            </td>
            <td>
                Another Placeholder
            </td>
        </tr>
    </tbody>
</table>

更新：我又玩了一些，看起来 Wordpress“文本”/代码编辑器也将代码中的换行符视为内容中的换行符，并删除了 <br /> 标记。我已经更新了链接页面以显示该更改，但是“可视”编辑器的显示方式与实时页面不同。呃。

Screenshot of the "Visual" editor in Wordpress

Screenshot of the actual live page

已解决

何利见鬼，那是另一回事。对于每个人 <td> 和所有内容，您必须在 wordpress 中使用您的标记非常具体，否则它会尝试将默认样式应用于该数据，即使您在实际表格中告诉它不要这样做。幸好电子邮件服务不是这样的......

无论如何，最终的判断是使用一个插件，该插件允许您禁用页面的“wpautop”插件，以便在呈现时它不会将代码中的换行符转换为<br />，然后是“Don 't Muck My Markup" 插件使其不会将 <br /> 转换为相同的换行符。

该签名的最终代码块在http://scottleroymarketing.com/email-signature（第二个）上显示得非常正确：

<!-- Begin Signature #2 !-->

<div class="slmsignature1">
    <table style="width: 80%; max-width: 700px; min-width: 300px; border: none; border-collapse: collapse; background: url('http://i.imgur.com/SizXUrg.jpg'); background-color: black; color: #fff; font-family:sans-serif;">
        <tbody>
            <tr>
                <td style="width: 200px; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
                    <img style="width: 100%; max-width: 195px; margin: 0px;" src="http://i.imgur.com/ectryVc.jpg" alt="Scott Le Roy's Head Shot" />
                </td>
                <td style="vertical-align: bottom; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
                    <img style="max-width: 160px;" src="http://i.imgur.com/Uns6X52.png" alt="Keller Williams Logo" />
                    <p style="font-size: 6pt; margin-bottom: 0px;">
                        Each Keller Williams Office
                        <br />
                        Is Independently Owned And Operated
                    </p>
                </td>
                <td style="vertical-align: top; text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;" colspan="2">
                    <h1 style="font-family: sans-serif; margin: -5px 5px 0px 0px;">
                        Scott Le Roy
                    </h1>
                    <h2 style="font-family: sans-serif; font-size: 15px; margin: -5px 5px 5px 0px;">
                        CEO/Digital Marketer
                    </h2>
                    <p style="margin: -5px 5px 0px 0px;">
                        <a style="color: #fff; text-decoration: none;" href="tel:123-456-7890">
                             C: 123-456-7890
                        </a>
                    </p>
                    <p style="margin: -5px 5px 0px 0px;">
                        <a style="color: #fff; text-decoration: none;" href="tel:321-654-0987">
                             O: 321-654-0987
                        </a>
                    </p>
                    <p style="margin: -5px 5px 0px 0px;">
                        <a style="color: #fff; text-decoration: none;" href="mailto:scott@scottleroymarketing.com">
                             Scott@ScottLeRoyMarketing.com
                        </a>
                    </p>
                    <p style="margin: -5px 5px 0px 0px;">
                        <a style="color: #fff; text-decoration: none;" href="http://scottleroymarketing.com">
                             www.ScottLeRoyMarketing.com
                        </a>
                    </p>
                </td>
            </tr>
            <tr style="height: 25px; width: 200px;text-decoration:none; font-size:8pt;">
                <td style="text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<table style="border:none; border-collapse:collapse; padding:0px; margin:0px;">
<tr>
<td style="padding:0px;border:none;">
<a href="https://www.facebook.com/groups/scottleroymarketing/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/ES2mp6u.png" alt="Facebook Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.twitter.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/E2iChYF.png" alt="Twitter Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.pinterest.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/dJARSqo.png" alt="Pinterest Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.linkedin.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/Ucw1EDq.png" alt="Linkedin Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.instagram.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/lFx5fpA.png" alt="Instagram Icon" /></a>
</td>
</tr>
</table>
                </td>
                <td colspan="2" style="text-align: center; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
                    123&nbsp;E.&nbsp;Main&nbsp;St&nbsp;#201&nbsp;<span style="color: #b40101;">|</span>&nbsp;Anytown,&nbsp;VA&nbsp;12345
                </td>

            </tr>
        </tbody>
    </table>
</div>


<!-- End Signature #2 !-->

【问题讨论】：

我强烈建议不要使用 WP 编辑器来编码您的电子邮件。让 HTML 电子邮件在浏览器中正确呈现有很多挑战。此外，您可以通过在电子邮件发送时捕获电子邮件中发送的 HTML 或在电子邮件客户端中使用“查看源代码”来更有效地解决此问题。
（而且 - 几乎需要使用表格和内联 CSS 才能让 HTML 电子邮件在各种不同的电子邮件客户端中正确呈现！）
试一试排除WP编辑器干扰是问题的原因wordpress.org/plugins/dont-muck-my-markup
@cale_b 谢谢！我们没有使用 wordpress 编辑器来创建签名，我们只是想在该页面上展示已经创建的签名，以便人们可以看到它们是如何工作的。
@Ihazkode Gracias！我会看看我的老板是否想试试那个插件。

标签： html css wordpress html-table inline-styles

【解决方案1】：

最后的判断是使用一个插件（有几个）允许您禁用页面的“wpautop”插件，这样它就不会将“文本”编辑器中代码中的换行符转换为@987654321 @ 渲染时，“不要弄脏我的标记”插件让它不会将 <br /> 转换为相同的换行符。

另一件事是您必须进入每个 <td> 元素并告诉它不显示边框等，因为 Wordpress（显然）会忽略添加到“文本”编辑器中的 <style> 元素，因此您不能为所有<td>s 应用一个样式，你必须单独做它们：-/

在左下角显示的社交媒体图标中（本文中提到的特定签名），只需将它们添加到带有 <a> 和 <img> 标记的表格单元格中，它们就不会像这样显示它们内联应该这样，您必须在该单元格中创建另一个<table>，并在同一个<tr> 中使每个图标都有自己的<td> 没有填充，还记得做“border：none;”在每个<td>上。

感谢@ihazcode 为我指明“Don't Muck My Markup”插件的方向！

【讨论】：