如何避免 WooCommerce 电子邮件模板中的样式注入

Question

模板中有一些 HTML 元素，例如第 41 行 templates/emails/email-header.php table#template_container，没有内联样式：

<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container">

但是在前端渲染的时候会出现很多内联样式：

<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container"
style="background-color: #ffffff; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); border-radius: 3px;">

这种样式注入是如何以及在哪里完成的？

如何避免这种样式注入？

我想在模板中编写自己的内联样式。正确的做法是什么？

我注意到有些注入，比如上面的例子，依赖于元素的 ID，所以我可以删除它们的 ID，但其他情况是在变量中，比如第 48 行的 templates/emails/email-header.php:

<h1><?php echo $email_heading; ?></h1>

渲染为：

<h1 style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; text-shadow: 0 1px 0 #ffffff; color: #202020; background-color: inherit;">HTML email template</h1>

感谢任何帮助。谢谢。

Answer 1

1) 来自 #template_container 的样式注入可以在第 58 - 63 行的 templates/emails/email-styles.php 中找到 @version 4.0.0.

#template_container {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    background-color: <?php echo esc_attr( $body ); ?>;
    border: 1px solid <?php echo esc_attr( $bg_darker_10 ); ?>;
    border-radius: 3px !important;
}

2) $email_heading是在调用模板文件时传递的，见includes/class-wc-emails.php line 263 - 270 @version 2.3.0

/**
 * Get the email header.
 *
 * @param mixed $email_heading Heading for the email.
 */
public function email_header( $email_heading ) {
    wc_get_template( 'emails/email-header.php', array( 'email_heading' => $email_heading ) );
}

然而，样式注入也通过第 176 - 185 行的 templates/emails/email-styles.php @version 4.0.0

进行

h1 {
    color: <?php echo esc_attr( $base ); ?>;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 150%;
    margin: 0;
    text-align: <?php echo is_rtl() ? 'right' : 'left'; ?>;
    text-shadow: 0 1px 0 <?php echo esc_attr( $base_lighter_20 ); ?>;
}

所以回答你的问题：

如果您想应用自己的样式，或想修改现有样式。您将不得不覆盖模板文件。可以通过将模板文件复制到 yourtheme/woocommerce/emails/email-styles.php.

来覆盖模板文件

另见：Template structure & Overriding templates via a theme - How to Edit files

如何避免 WooCommerce 电子邮件模板中的样式注入

How to avoid style injection in WooCommerce email templates

php

wordpress

templates

woocommerce

email-notifications