wordpress 中未保留内联样式 table
Inline styles not preserved in wordpress table
我们公司开发了一些非常简单的基于 table 的可点击 html 电子邮件签名供客户使用，我们希望将它们展示为在 http://scottleroymarketing.com/email-signature 上可点击，但正如您可以看出...他们的表现不是很好。
搁置使用 tables 进行布局和内联 CSS 与样式表（这两种方法都是我们发现在电子邮件提供商中使用的最简单的方法，尤其是 Gmail/GSuite这是我们大多数客户使用的），wordpress 中是否有任何东西可以 override/mess 提升 table 的内联样式？据我所知，内联样式在主题中胜过 global CSS ，但可能存在我不知道的例外情况。我对 Wordpress 非常缺乏经验，所以我可能一直在谷歌搜索错误的东西（我一直在寻找“wordpress table 样式”和“wordpress 内联样式”，但我找到的只是关于如何应用的教程tables 的样式，并修复了 html/rich 文本编辑器未显示在页面上的问题）。我们可以截取模板的屏幕截图，因为它应该显示，并将其放在页面上，但如果可能的话，我们更愿意演示元素如何全部可点击而不是图像块签名。
我已经在 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
已解决
Ho-lee 他妈的那是另外一回事。对于每个人 <td> 和所有内容，您必须对 wordpress 中的标记超级特定，否则它会尝试将默认样式应用于该数据，即使您告诉它不要在实际 table 本身。幸好电子邮件服务不是这样的...
无论如何，最终的结论是使用一个允许您禁用页面的“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 E. Main St #201 <span style="color: #b40101;">|</span> Anytown, VA 12345
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Signature #2 !-->
最后的决定是使用一个插件（有几个）允许您禁用页面的 "wpautop" 插件，这样它就不会转换 [=30] 中代码中的换行符=] 编辑器呈现时 <br />，然后 "Don't Muck My Markup" 插件不会将 <br /> 转换为相同的换行符。
另一件事是你必须进入每个 <td> 元素并告诉它不要显示边框等，因为 Wordpress（显然）忽略了添加到 [=30] 的 <style> 元素=] 编辑器，因此您不能将样式应用于所有 <td>，您必须分别对它们进行操作：-/
并且在左下角显示的社交媒体图标中（此 post 中注明的特定签名），只需将它们添加到带有 <a> 的 table 单元格和<img> 标签不会像预期的那样内联显示它们，您必须在该单元格中创建另一个 <table>，并在同一个 [=19= 中使每个图标成为自己的 <td> ] 没有填充，还记得在每个 <td>.
上做 "border:none;"
支持@ihazcode 为我指明 "Don't Muck My Markup" 插件的方向！
我们公司开发了一些非常简单的基于 table 的可点击 html 电子邮件签名供客户使用，我们希望将它们展示为在 http://scottleroymarketing.com/email-signature 上可点击，但正如您可以看出...他们的表现不是很好。
搁置使用 tables 进行布局和内联 CSS 与样式表（这两种方法都是我们发现在电子邮件提供商中使用的最简单的方法，尤其是 Gmail/GSuite这是我们大多数客户使用的），wordpress 中是否有任何东西可以 override/mess 提升 table 的内联样式？据我所知，内联样式在主题中胜过 global CSS ，但可能存在我不知道的例外情况。我对 Wordpress 非常缺乏经验，所以我可能一直在谷歌搜索错误的东西（我一直在寻找“wordpress table 样式”和“wordpress 内联样式”，但我找到的只是关于如何应用的教程tables 的样式，并修复了 html/rich 文本编辑器未显示在页面上的问题）。我们可以截取模板的屏幕截图，因为它应该显示，并将其放在页面上，但如果可能的话，我们更愿意演示元素如何全部可点击而不是图像块签名。
我已经在 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
已解决
Ho-lee 他妈的那是另外一回事。对于每个人 <td> 和所有内容，您必须对 wordpress 中的标记超级特定，否则它会尝试将默认样式应用于该数据，即使您告诉它不要在实际 table 本身。幸好电子邮件服务不是这样的...
无论如何，最终的结论是使用一个允许您禁用页面的“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 E. Main St #201 <span style="color: #b40101;">|</span> Anytown, VA 12345
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Signature #2 !-->
最后的决定是使用一个插件（有几个）允许您禁用页面的 "wpautop" 插件，这样它就不会转换 [=30] 中代码中的换行符=] 编辑器呈现时 <br />，然后 "Don't Muck My Markup" 插件不会将 <br /> 转换为相同的换行符。
另一件事是你必须进入每个 <td> 元素并告诉它不要显示边框等，因为 Wordpress（显然）忽略了添加到 [=30] 的 <style> 元素=] 编辑器，因此您不能将样式应用于所有 <td>，您必须分别对它们进行操作：-/
并且在左下角显示的社交媒体图标中（此 post 中注明的特定签名），只需将它们添加到带有 <a> 的 table 单元格和<img> 标签不会像预期的那样内联显示它们，您必须在该单元格中创建另一个 <table>，并在同一个 [=19= 中使每个图标成为自己的 <td> ] 没有填充，还记得在每个 <td>.
支持@ihazcode 为我指明 "Don't Muck My Markup" 插件的方向！