<风格>标签已从 woocommerce 电子邮件模板中删除 [英] <style> tag has been removed from woocommerce email templates

问题描述

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

I'm trying to add a 'style' tag inside my woocommerce email templates, in order to include a font-face attribute, with no success.

我已经尝试过的是:

1. 直接在模板文件中添加(例如 email-header.php)
2. 将其添加到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>
            ';
        }

好像有个过滤器把整个模板中的style"标签去掉了.那是因为当我转换上面的代码而不是添加 font-face 时，它​​会成功呈现.这当然不会影响任何事情，因为style2"不是有效标签.

It seems that there is a filter that strips the "style" tag in the entire template. That's because when I convert the code above and instead of add the font-face is rendered successfully. This does not affect anything ofcourse because 'style2' is not a valid tag.

推荐答案

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

@Sephsekla comment gave me the idea below, about how to add a tag in email template overriding the default stripping.

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

Not a nice technique but it works!

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

The first part of the solution is to include the part of the CSS code inside another tag (even if this tag is not valid) than 'style' to avoid stripping in the first place, like the example below:

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

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

If we leave it as is then our code will be rendering in our email code.

接下来是为woocommerce_mail_content"过滤器添加一个钩子(低优先级，以便成为最后一个要运行的过滤器)，用style"字符串替换style-inline".

So the next thing is to add a hook to 'woocommerce_mail_content' filter (with low priority in order to be the last filter to be run) replacing the 'style-inline' with 'style' string.

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

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

The above technique worked for me allowing me add font-face successfully.

这篇关于<风格>标签已从 woocommerce 电子邮件模板中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！