Как добавить перекрестное происхождение и целостность в wp_register_style? (Шрифт Awesome 5)

Я обновляю Font Awesome 4 до версии 5, которая вводит в <link rel="stylesheet">разметку как целостность, так и перекрестные атрибуты .

В настоящее время я использую:

wp_register_style('FontAwesome', 'https://example.com/font-awesome.min.css', array(), null, 'all' );
wp_enqueue_style('FontAwesome');

Который выводит как:

<link rel="stylesheet" id="FontAwesome-css" href="https://example.com/font-awesome.min.css" type="text/css" media="all" />

С Font Awesome 5 он вводит два новых атрибута и значения ( integrityи crossorigin), например:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

Поэтому мне нужно выяснить, как я могу добавить как целостность, так и перекрестное происхождение к wp_register_style, я пробовал, но мои попытки использовать wp_style_add_dataне удалось, может показаться, что этот метод поддерживает только conditional, rtlи suffix, altи title.

style_loader_tag
style_loader_tag является официальным API WordPress, см. документацию: https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Фильтрует тег HTML-ссылки в стиле в очереди.

Сначала поставьте свою таблицу стилей в очередь, см. Документацию: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );

$handleЭто 'font-awesome-5'
я nullтак , что нет номера версии. Таким образом, он будет кэширован.

Простое str_replace
Простого str_replace достаточно для достижения того, что вы хотите, см. Пример ниже

function add_font_awesome_5_cdn_attributes( $html, $handle ) {
    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_font_awesome_5_cdn_attributes', 10, 2 );

Добавление разных атрибутов
Ниже приведен пример добавления разных атрибутов в (несколько) разных таблиц стилей.

function add_style_attributes( $html, $handle ) {

    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }

    if ( 'another-style' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='blajbsf' example", $html );
    }

    if ( 'bootstrap-css' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='something-different' crossorigin='anonymous'", $html );
    }

    return $html;
}
add_filter( 'style_loader_tag', 'add_style_attributes', 10, 2 );

Добавление атрибутов ко всем стилям.
Ниже приведен пример добавления одинаковых атрибутов к нескольким таблицам стилей.

function add_attributes_to_all_styles( $html, $handle ) {

        // add style handles to the array below
        $styles = array(
            'font-awesome-5',
            'another-style',
            'bootstrap-css'
        );

        foreach ( $styles as $style ) {
            if ( $style === $handle ) {
                return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
            }
        }

        return $html;
}
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );

script_loader_tag
Я также хотел бы объяснить script_loader_tag, потому что это также удобно, но этот API работает в сочетании с wp_enqueue_script .

API script_loader_tag практически одинаков, только небольшие отличия см. В документации: https://developer.wordpress.org/reference/hooks/script_loader_tag/

apply_filters( 'script_loader_tag', $tag, $handle, $src )
Фильтрует HTML-тег сценария сценария в очереди.

Ниже приведен пример отложить один скрипт

function add_defer_jquery( $tag, $handle ) {
    if ( 'jquery' === $handle ) {
        return str_replace( "src", "defer src", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_jquery', 10, 2 );

Ниже приведен пример отложить более одного сценария

function add_defer_attribute( $tag, $handle ) {

    // add script handles to the array below
    $scripts_to_defer = array(
        'jquery',
        'jquery-migrate',
        'bootstrap-bundle-js'
    );

    foreach ( $scripts_to_defer as $defer_script ) {
        if ( $defer_script === $handle ) {
            return str_replace( "src", "defer src", $tag );
        }
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );

Итак, я объяснил как API, так style_loader_tagи script_loader_tag. И я привел несколько примеров для обоих API, я надеюсь, что это полезно для многих людей там. У меня есть опыт работы с обоими API.

ОБНОВЛЕНИЕ
@CKMacLeod Спасибо за ваше обновление, это проясняет ситуацию. Мы в основном на одной странице. Как я уже сказал, я разработчик WordPress, и если вы хотите опубликовать тему и / или плагин на https://wordpress.org, вы, по сути, вынуждены соблюдать « Стандарты кодирования WordPress », или они просто отклонят вашу тема и / или плагин.

Вот почему я призываю разработчиков использовать «путь WordPress». Я понимаю, что иногда нет никаких отличий, но это также удобство. Как вы сами сказали, вы можете скачать Font Awesome и включить его в свою тему и / или плагин, таким образом вам нужно будет только удалить функцию style_loader_tag и изменить функцию wp_enqueue_style.

И последнее, что в прошлом (5 лет назад) некоторые плагины для кеширования, объединения и минимизации не работали, и в большинстве случаев я выяснял, почему разработчики, создавшие тему, просто ставят вещи в голову в теме и / или повторил их. Большинство плагинов для кэширования, которые также (в большинстве случаев) предоставляют возможности комбинировать, минимизировать и задерживать выполнение скриптов, стали умнее и эффективнее в обнаружении плохого кода и обходе его. Но это не является предпочтительным. Вот почему я призываю людей программировать с учетом стандартов / соглашений.

Как разработчику, вы всегда должны учитывать, что люди могут делать с вашим кодом, и учитывать совместимость. Так что не просто решение, а лучшее оптимальное решение. Я надеюсь, что разъяснил свою точку зрения.

РЕДАКТИРОВАТЬ
@CKMacLeod Спасибо за (технические) дебаты, я надеюсь, что вы понимаете, насколько это важно (используя WordPress API в вашей собственной разработке). Опять же, я смотрел вокруг и даже сейчас, если я смотрю на часто задаваемые вопросы о самых популярных плагинах minify, я обычно вижу это так или иначе, например:

Вопрос: Почему некоторые файлы CSS и JS не объединяются?
Ответ: Плагин обрабатывает только файлы JS и CSS, поставленные в очередь с использованием официального метода WordPress API - https://developer.wordpress.org/themes/basics/inclusive-css-javascript/, а также файлы из одного домена (если не указано иное). в настройках).

Смотрите FAQ: https://wordpress.org/plugins/fast-velocity-minify/

Обзор script_ и style_loader_tag @Remzi Cavdar интересен, но, рискуя вызвать какое-то возмущение, и в надежде, что кто-то напомнит мне, каким будет преимущество использования очереди WP в таких случаях, как я, я ' Я рекомендую выбрать легкий путь и загрузить таблицу стилей Fontawesome через хук.

/* ADD FONTAWESOME 5.5.0 via action hook */
add_action( 'wp_head', 'sewpd_add_fontawesome' );

function sewpd_add_fontawesome() {

echo '
<!--FONTAWESOME 5.5.0 added via functions.php -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!--END FONTAWESOME -->
'; 

}

Некоторые могут даже возразить, что, если вы используете FA только для, скажем, некоторых значков в нижнем колонтитуле или в постах, вы должны добавить его ниже, в теле страницы, так как это не будет выглядеть как блокировка рендера, но, признаюсь, я никогда этого не делал ... И я не буду рекомендовать добавлять его непосредственно в header.php или другой файл шаблона. Это было бы неправильно. ;)

ОБНОВИТЬ

Remzi Cavdar был достаточно любезен, чтобы ответить на мой запрос о напоминании о том, почему простое добавление Fontawesome или аналогичного тега через ловушку wp_head () может быть менее желательным, чем использование очереди WordPress. В целом он ссылается на понятие передового опыта и, в частности, на идею о том, что плагинам кэширования может потребоваться доступ к таблице стилей через очередь.

Прежде чем углубляться в детали, я скажу, что, хотя на самом деле я не знаю каких-либо существенных конкретных оправданий, кроме того, что это своего рода «путь WordPress», мне нравится подход товарища Кавдара, и я могу использовать его сам в будущем ,

Другие его претензии на это, однако, не убедительны для меня. Может быть, он или кто-то еще может добавить к ним. Если это так, я все уши. В итоге, насколько я могу судить, после выполнения более 20 тестов на Pingdom и GTMetrix, сравнивающих «добавление через очередь» с «добавлением через голову» в тестовом блоге, нет существенной и непротиворечивой разницы с точки зрения оценки производительности, общее количество запросов страниц или время загрузки (например, «Первая краска», «Первая содержательная краска» и «OnLoad» в GTMetrix) между двумя подходами.

Что касается кеширования, то плагины для кеширования мало что могут сделать с внешними файлами, независимо от того, добавлены они в очередь WP или нет. Сами файлы останутся без изменений, и ваша страница все равно будет генерировать запрос для каждого из них.

В целом, я видел широкий спектр различных подходов для загрузки скриптов и стилей. Некоторые из них будут частично или полностью обходить очередь WP. Конечно, вполне возможно, что будут экземпляры - функция, которая использует массив дескрипторов стилей, в то же время предотвращая их загрузку на определенных страницах, скажем, - где добавление в очередь тега Fontawesome или другого стороннего тега будет минимально полезным, и что первоначальное развертывание двух функции - постановка в очередь и фильтрация - на самом деле окажутся более экономными, чем просто их загрузка.

В случае с FA таблица стилей уже уменьшена и загружается через собственный CDN FA. Его внутреннее влияние на производительность будет минимальным, однако, независимо от того, загружен ли он через wp_head () или через очередь, он все равно будет регистрировать недостатки в нескольких точках на оценщиках производительности - таких же, как Google Page Speed ​​Insights и вышеупомянутые GTMetrix и Pingdom, это снизит производительность, если вы не сэкономите несколько байтов (даже килобайт) и не оптимизируете тот или иной файл изображения.

Загрузка через wp_head, а не из очереди, может отключить проверку «правильного порядка сценариев и стилей» (даже если кто-то оценит вас выше за загрузку файла, размещенного снаружи, после локально размещенного), но, если вы действительно обеспокоены загрузкой FA в лучшем виде для вашего сайта, тогда вы попробуете локально разместить его файлы и вложенные файлы.как его стиль, так и шрифты, которые его таблица стилей вызывает через @ font-face. В этом случае вы можете поставить таблицу стилей в очередь, как и любой другой локальный файл, объединить и объединить ее с помощью оптимизирующего плагина или непосредственно «вручную». Вы даже можете сделать свои собственные удивительные модификации Fontawesome и интегрировать их с вашей таблицей стилей и структурой темы. Или (как кратко упомянуто ранее) вы можете опробовать несколько более экзотических тактик оптимизации производительности, таких как добавление встроенного CSS прямо перед тем, как это потребуется в структуре конкретной страницы.

В любом случае вам не нужно беспокоиться о новых тегах «целостности» и «перекрестного происхождения», и вам также не придется беспокоиться, если однажды Fontawesome забудет оплатить счет CDN.

Или вы, возможно, работаете над сайтом, который уже полон беспорядка, с таблицами стилей и скриптами, загруженными всеми способами, и может быть проще просто разместить ваше последнее добавление в верхней части файла functions.php, чтобы вы или следующий разработчик может легко найти его снова ...