时间戳

首页 > 解决方案 > 如何避免 WooCommerce 电子邮件模板中的样式注入

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

问题描述

模板中有一些 HTML 元素，例如第 41 行的 templates/emails/email-header.phptable#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>

任何帮助表示赞赏。谢谢你。

标签： phpwordpresstemplateswoocommerceemail-notifications

解决方案

1)样式注入#template_container可以在templates/emails/email-styles.php第 58 - 63 行 @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 行 @version 4.0.0 上的 templates/emails/email-styles.php进行

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.

另请参阅：模板结构和通过主题覆盖模板 - 如何编辑文件

推荐阅读