<style> 标签已从 woocommerce 电子邮件模板中删除答案

【问题标题】：<style> tag has been removed from woocommerce email templates<style> 标签已从 woocommerce 电子邮件模板中删除
【发布时间】：2020-06-01 21:20:44
【问题描述】：

我正在尝试在我的 woocommerce 电子邮件模板中添加一个“样式”标签，以包含一个 font-face 属性，但没有成功。

我已经尝试过的是：

直接在模板文件中添加（例如email-header.php）
将其添加到“woocommerce_email_header”过滤器中

add_action('woocommerce_email_header', 'add_style_tag_to_email', 10);
function add_style_tag_to_email() {
            echo '
                <style type="text/css">
                @font-face {
                  font-family: 'Montserrat';
                  font-style: normal;
                  font-weight: 300;
                  src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format('woff2');
                  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
                }
                </style>
            ';
        }

似乎有一个过滤器可以去除整个模板中的“样式”标签。那是因为当我转换上面的代码而不是添加字体时，字体被成功渲染。这当然不会影响任何事情，因为 'style2' 不是有效标签。

【问题讨论】：

天啊！！为什么一个人可以决定这是否是重复的！！！两个答案都指的是电子邮件模板的样式，而不是如何在模板中添加

标签： wordpress woocommerce

【解决方案1】：

@Sephsekla 评论给了我下面的想法，关于如何在电子邮件模板中添加标签以覆盖默认剥离。

不是一个很好的技术，但它有效！

解决方案的第一部分是将 CSS 代码的一部分包含在另一个标签中（即使该标签无效）而不是 'style' 以避免首先被剥离，如下例所示：

        <style-inline>
            @font-face {
                font-family: 'Montserrat';
                font-style: normal;
                font-weight: 400;
                src: url(http://fontdomain-example.com/Montserrat-Regular.woff) format('woff');
            }
        </style-inline>

如果我们保持原样，那么我们的代码将呈现在我们的电子邮件代码中。

所以接下来的事情是添加一个钩子到“woocommerce_mail_content”过滤器（低优先级，以便成为最后一个运行的过滤器）用“style”字符串替换“style-inline”。

add_filter( 'woocommerce_mail_content', 'woocommerce_mail_content_callback', 9999 );
public function woocommerce_mail_content_callback($mail_content){
            $mail_content = str_replace([
                '<style-inline>',
                '</style-inline>'
            ], [
                '<style>',
                '</style>'
            ], $mail_content);
            return $mail_content;
        }

上述技术对我有用，让我可以成功添加字体。

【讨论】：

检查我的答案，它更好更容易:)

【解决方案2】：

我对此做了一些研究，看起来确实有一个功能可以去除样式标签https://docs.woocommerce.com/wc-apidocs/source-class-WC_Email.html#495

您应该能够使用woocommerce_email_styles 挂钩而不是尝试将整个样式块添加到电子邮件中，而不是将规则添加到默认样式块。

我找到了here 过程的记录，但它的要点是这样的：


add_filter( 'woocommerce_email_styles', 'add_custom_styles_to_email' );

function add_custom_styles_to_email( $css ) {
    $css .= '@font-face {
                  font-family: "Montserrat";
                  font-style: normal;
                  font-weight: 300;
                  src: local("Montserrat Light"), local("Montserrat-Light"), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format("woff2");
                  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
                };'
    return $css;
}

作为旁注，我已将样式字符串中的单引号更改为双引号，否则它们不会被转义。这可能会导致一些问题，因为 php 可能会认为您正在尝试将字符串与一些变量连接起来。

【讨论】：

嗨，Sephsekla。 'woocommerce_email_styles' 过滤器将 css 转换为内联样式。例如 body{ background-color: #333333 } 变成 ' 。这就是为什么您的方法不能与必须包含在“样式”标签中的@font-face 一起使用的原因
你是对的，我的错。我不知道是否可以完全删除该函数，因为它是在send 函数docs.woocommerce.com/wc-apidocs/source-class-WC_Email.html#553 中调用的，而不是通过过滤器调用的。也许您可以尝试通过使用woocommerce_mail_content 过滤器将样式添加到消息正文中，该过滤器在样式内联后运行。 $message = apply_filters( 'woocommerce_mail_content', $this->style_inline( $message ) ); $return = wp_mail( $to, $subject, $message, $headers, $attachments );
您的回答让我知道了如何解决这个问题。这不是正确的技术，但它是迄今为止唯一的方法。我将其发布在单独的答案中。

【解决方案3】：

这是由 Emogrifier 引起的，它试图将所有 <style> 标签（和其他标签）转换为内联样式。您可以通过更改设置来防止这种情况：

add_action('woocommerce_emogrifier', function($emogrifier){
    $emogrifier->disableStyleBlocksParsing();
});

【讨论】：