Intereting Posts
Добавление дополнительных атрибутов в тег скрипта для сторонних JS Обновление пользовательской почты Meta Even if Draft Условные размеры изображения для использования с помощью настройки пользовательского режима Пользовательский налоговый запрос со специальными символами Как отключить Добавление новых пользователей на дочерних сайтах в Multisite? Многоузловое, доменное сопоставление и SSL? Принудительно обновлять все сообщения в настраиваемом типе сообщений, без изменений содержимого Ссылка на домашнюю страницу в меню Принуждение к верхушке должности Дубликаты сообщений с разбивкой по страницам Архив настраиваемого типа сообщений с динамической таксономической фильтрацией PHP: вводят HTML в тег if / else? ajaxt возвращающий объект объекта Создание панели страницы администратора WordPress Как добавить список всех галерей на мою боковую панель?

Как правильно вставить таблицу стилей в wp_head

Я создаю критический CSS для каждой страницы и категории. На данный момент я вставляю таблицу стилей через functions.php как это, просто используя echo .

 function criticalCSS_wp_head() { if (is_front_page() ){ echo '<style>'; include get_stylesheet_directory() . '/css/critical/ccss-index.min.css'; echo '</style>'; } elseif (is_category('orange') ){ echo '<style>'; include get_stylesheet_directory() . '/css/critical/ccss-orange.min.css'; echo '</style>'; } elseif (is_page('hello-world') ){ echo '<style>'; include get_stylesheet_directory() . '/css/critical/ccss-hello-world.min.css'; echo '</style>'; } elseif (is_single() ){ echo '<style>'; include get_stylesheet_directory() . '/css/critical/ccss-single.min.css'; echo '</style>'; } } add_action( 'wp_head', 'criticalCSS_wp_head' ); 
  1. Что было бы лучшим способом включить эти таблицы стилей в отношении стиля кодирования лучшей практики и чистой неустанной скорости , что означает, чтобы избежать вызовов PHP, вызовов базы данных и т. Д.
  2. Лучше ли прямо жестко закодировать критический CSS в шаблоне страницы, возможно, как написано в этой статье (№10), связанной с официальной документацией по оптимизации WordPress ?

edit Поскольку на этот вопрос был дан ответ, я забыл упомянуть, что критический CSS должен быть встроенным в DOM и не связан с файлом, чтобы избежать блокировки отображения. Поэтому я все еще ищу способ использовать критический CSS с wp_enqueue_scripts . Возможно, сохраните содержимое файла в переменной и выведите его, когда wp_enqueue_scripts запрашивает его?

Вы можете сделать это так, поместите его в свои functions.php :

Это правильный способ сделать это «способом WordPress».

 <?php // Check if function exisits if (!function_exists('rg_templateScriptSetup')) { // if not, create one function rg_templateScriptSetup() { // Register styles in WordPress wp_register_style('prefix-basic-css', get_template_directory_uri(). '/css/basic-style.css'); // Register styles in WordPress wp_register_style('first-css', get_template_directory_uri(). '/css/first-style.css'); // Register styles in WordPress wp_register_style('second-css', get_template_directory_uri(). '/css/second-style.css'); if (is_page('your_page_name') { // enqueue your first style wp_enqueue_style('first-css'); } else if(is_page('your_other_page_name')) { // enqueue your second style wp_enqueue_style('second-css'); } etc... } // End of Stylesheet logic / setup add_action('wp_enqueue_scripts', 'rg_templateScriptSetup'); ?> 

Зачем?

Потому что WordPress предоставляет вам все инструменты, необходимые для достижения этой цели.

Что здесь происходит:

  1. во-первых, мы проверяем, существует ли функция
  2. если это не так, мы создаем нашу функцию
  3. то мы «регистрируем наши стили», в основном говоря WordPress: вот, возьмите эти CSS », так что .. WordPress имеет наши таблицы стилей в кармане, но пока не использует их
  4. то мы используем встроенную функцию WordPress is_page в сочетании с оператором if (if (is_page ('your-page-name'))
  5. в случае если оператор возвращает bool 'true', мы активируем css в соответствии с нашим условием (в вашем случае – именем страницы).

Надеюсь, это поможет.

В случае, если этот ответ помог вам, отметьте его как правильно, а не просто возьмите код, спасибо.

Личный вопрос: что вы имеете в виду под критическим? Очень важно!

Лучший и общепринятый правильный способ добавления CSS или JS заключается в том, чтобы вставить их в очередь. Таким образом, если вы скажете тему + 2 плагина, которые все хотят вставить в очередь jQuery, вы получите только одну копию – не 3.

В functions.php:

 add_action('wp_enqueue_scripts', 'my_enqueues'); function my_enqueues() { if(is_front_page()) { wp_enqueue_style('front-page', get_stylesheet_directory() . '/css/critical/ccss-index.min.css', array(), '', 'screen'); } elseif(is_category('orange')) { wp_enqueue_style('orange', get_stylesheet_directory() . '/css/critical/ccss-orange.min.css', array(), '', 'screen'); } } 

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

 add_action('wp_enqueue_scripts', 'my_inline_enqueues'); function my_inline_enqueues() { wp_add_inline_style('front-page', '.myfrontpageclass { font-size:6em; }' ); } на add_action('wp_enqueue_scripts', 'my_inline_enqueues'); function my_inline_enqueues() { wp_add_inline_style('front-page', '.myfrontpageclass { font-size:6em; }' ); } 

Заключительное предложение – я не знаю содержание ваших таблиц стилей, но я бы предположил, что загрузка этих страниц может быть проще и быстрее, если вы просто style.css все CSS в файл style.css темы вместе. Используйте body_class для таргетинга на все, что вам нужно, и сохраните все в одном мини-файле.