Как добавить пользовательский CSS в начало, выше всех CSS-файлов для определенного URL.

Содержание

Вопрос или проблема
Ответ или решение
Определение проблемы и контекста
Предложенные решения и их детали
SEO и оптимизация
Заключение

Вопрос или проблема

Я хочу добавить мой CSS файл bootstrap.min.css выше всех CSS файлов. Я использовал следующий код:

wp_enqueue_style( 'bootstrap_css', 'bootstrap.min.css' );

Но он добавляет CSS ниже файлов темы.

Проблема в том, что я не хочу изменять файл темы и хочу сделать это только из плагина. Есть ли способ, чтобы добавить мой CSS после тега с использованием какого-то хука wp_head или after_title.

Пожалуйста, помогите мне с этим.

/**
 * Подключение стилей перед другими
 */    
class EnqueueStylesheetEarly {

    function __construct() {
        add_action( 'wp_enqueue_scripts', [ $this, 'load_before_other_stylesheets' ], 5 );
    }

    /**
     * Регистрация и подключение стилей
     */
    function load_before_other_stylesheets() {
        wp_register_style(
            'bootstrap-css',
            plugin_dir_url( __FILE__ ) . 'bootstrap.min.css',
            [],
            '3.3.7'
        );

        wp_enqueue_style( 'bootstrap-css' );
    }

}

Затем вы можете загрузить это с другими вашими классами фронтенда в вашем ‘plugin.php’ вот так…

if ( ! is_admin() ) {
    require 'class-enqueue-stylesheet-early.php';
}

Приоритет 5 должен решить вашу проблему. Единственное, что обычно загружается раньше этого – это скрипты и метаданные WordPress SEO JSON-LD.

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

function wp_dequeue_script() {
   wp_dequeue_style( 'theme-scss' );
   wp_enqueue_style( 'bootstrap_css', 'bootstrap.min.css' );
   wp_enqueue_style( 'theme-css', 'YOUR THEME CSS URL' );
}
add_action( 'wp_print_scripts', 'wp_dequeue_script', 100 );

Возможно, вам придется изменить хук в зависимости от того, какой хук использует ваша тема, или увеличить его приоритет.

Ответ или решение

Вопрос касается добавления пользовательского CSS в начало всех CSS-файлов для определенного URL, используя возможности WordPress. Цель состоит в том, чтобы загрузить ваш пользовательский файл стилей до других файлов стилей темы, не изменяя файлы темы непосредственно, а используя для этого возможности плагина. Давайте рассмотрим подходы, которые помогут вам добиться желаемого результата.

Определение проблемы и контекста

У вас возникла ситуация, когда ваш файл стилей bootstrap.min.css, который вы подключаете через wp_enqueue_style, загружается после файлов стилей вашей темы. По умолчанию WordPress загружает стили в порядке их приоритетности, установленной хуками. Вам необходимо, чтобы ваш файл загружался первым, не изменяя никаких файлов в самой теме.

Предложенные решения и их детали

Изменение приоритета при подключении файлов стилей:

В WordPress можно управлять порядком загрузки стилей, изменяя приоритет хука. Пример кода, который вы приводите:
```
class EnqueueStylesheetEarly {
   function __construct() {
       add_action( 'wp_enqueue_scripts', [ $this, 'load_before_other_stylesheets' ], 5 );
   }

   function load_before_other_stylesheets() {
       wp_register_style(
           'bootstrap-css',
           plugin_dir_url( __FILE__ ) . 'bootstrap.min.css',
           [],
           '3.3.7'
       );

       wp_enqueue_style( 'bootstrap-css' );
   }
}
```
Этот подход позволяет подключить ваш CSS-файл с высоким приоритетом (5), что должно обеспечить его загрузку до других файлов стилей, за исключением тех, которые загружаются с большим приоритетом (например, JSON-LD скрипты SEO-плагинов).
Отключение стилей темы и подключение их снова:

Другой предложенный подход заключается в исключении стилей темы и повторном их подключении вместе с вашим файлом:
```
function wp_dequeue_script() {
  wp_dequeue_style( 'theme-scss' );
  wp_enqueue_style( 'bootstrap_css', plugin_dir_url( __FILE__ ) . 'bootstrap.min.css' );
  wp_enqueue_style( 'theme-css', 'YOUR THEME CSS URL' );
}
add_action( 'wp_print_scripts', 'wp_dequeue_script', 100 );
```
Обратите внимание, что идентификатор стиля темы (theme-scss) и URL необходимо заменить на актуальные значения из вашей темы. Также можно настроить приоритет, чтобы правильно управлять порядком загрузки.

SEO и оптимизация

Оптимизация ваших стилей также подразумевает обеспечение их загрузки только на тех страницах, где это необходимо. С этим учетом вы можете использовать условные теги WordPress, чтобы проверить URL:

if ( is_page( 'specific-page' ) ) {
   // Вызов функций enqueue, если условие выполнено
}

Заключение

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