<style> тег был удален из шаблонов электронной почты woocommerce

Question

Я пытаюсь добавить тег 'style' в мои шаблоны электронной почты woocommerce, чтобы включить атрибут font-face, но безуспешно.

То, что я уже пробовал, это:

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" во всем шаблоне. Это потому, что когда я преобразую код выше и вместо добавления, шрифт-лицо отображается успешно. Это ни на что не влияет, поскольку 'style2' не является допустимым тегом.

Answer 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-inline' строкой 'style'.

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

Приведенный выше метод помог мне успешно добавить font-face.

Answer 2

Я провел небольшое исследование по этому вопросу, и похоже, что действительно есть функция, которая удаляет теги стиля https://docs.woocommerce.com/wc-apidocs/source-class-WC_Email.html#495

Вместо того, чтобы пытаться добавить целый блок стиля к электронному письму, вы должны иметь возможность использовать woocommerce_email_styles вместо этого, чтобы добавить правила в блок стиля по умолчанию.

Я нашел описание процесса здесь , но суть его примерно такая:

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 может подумать, что вы пытаетесь объединить строку с некоторыми переменными.