Question

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

我已经尝试过的是：

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

  add_action（'woocommerce_email_header'，'add_style_tag_to_email'，10）;
函数add_style_tag_to_email（）{
            回声
                
            ';
        }

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

Answer 1

我对此进行了一些研究，似乎确实有一个剥离样式标签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可能认为您正在尝试使用一些变量将字符串连接起来。

Answer 2

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

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

解决方案的第一部分是将CSS代码的一部分包含在除“样式”之外的另一个标签中（即使此标签无效），以避免首先剥离，例如以下示例：

        <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;
        }

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

Answer 3

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

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

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

3 个答案: