Здравствуйте, дамы и господа, в этой статье я расскажу о том, как подключить собственный CSS к плагину WordPress. Например, это будет полезно, если вы решите не делать дочернюю тему для WP, или вам нужно сделать определённый файл стилей для задачи, не связанной с темой. Или, в конце концов, когда дочерняя тема — расширение к основной и тоже обновляется. Давайте приступим.

Инструкция по подключению CSS в собственном плагине

Если не знакомы с темой обсуждения, то для начала прочитайте инструкцию по созданию кастомного плагина. Это очень просто. Сейчас же мы переходим к тонкостям. Предположим, вам нужно подключить CSS к плагину. И это довольно просто. Для начала создайте кастомный плагин по инструкции. В той же папке создайте файл стилей. Назовите его тем же именем, что и плагин.

Например, у меня будет два файла:

  • buro-plugin-custom.php

  • buro-plugin-custom.css

Таблица стилей в собственном плагине для WordPress

Теперь открываем наш основной файл плагина — buro-plugin-custom.php, у вас он, конечно же, будет называться по-своему. Учтите, этот код верен только в том случае, если CSS создаёте в корневой папке.

Следует добавить в него такой код:


<?php
function mycustom_buro_plugin_styles() {
    wp_register_style( 'buro-plugin-custom', plugins_url( 'buro-plugin-custom.css', __FILE__ ) );
    wp_enqueue_style( 'buro-plugin-custom' );
}
add_action( 'wp_enqueue_scripts', 'mycustom_buro_plugin_styles');
?>

В самом CSS-файле не нужно ничего указывать, как в CSS дочерней темы. По крайней мере, названия плагина и прочее там не нужно. Можно сразу начать вносить стили в него.

Обратите внимание, если в вашем плагине уже есть <?php то не нужно добавлять данный тег, а также закрывающий тег ?>. Добавляйте только то, что находится между ними. Теперь к частностям.

Если вы решите разместить CSS в отдельной папке, пусть она условно будет называть styles, то в третьей строке нужно будет указать директорию:


wp_register_style( 'buro-custom-plugin', plugins_url( 'styles/buro-plugin-custom.css', __FILE__ ) );

Вам не нужно указывать абсолютный путь или URL, ибо мы уже указали, что файл стилей находится в директории плагина. А если указать URL, то при переносе на другой домен придётся его менять.

Теперь о приоритетах, в отличии от скриптов таблицы стилей можно подключить в любом порядке, соответственно, приоритеты особой роли не играют. Да, теоретически файл CSS, который грузится позже, должен переопределять стили файла, который грузится раньше. В таком случае можно попробовать изменить строку:


add_action( 'wp_enqueue_scripts', 'mycustom_buro_plugin_styles', 99);

99 — это приоритет. Но, вероятнее всего, это ни на что ни повлияет. Впрочем, попытаться можно. Но даже когда выставлял приоритет 10000, это не всегда приводило к результату.

Кстати, если стили переиначивает какой-то скрипт, то он будет менять ваш css независимо от того, в каком порядке он будет грузится.

Конечно, можно выдумать ещё какие-нибудь способы, но пока у меня срабатывали эти варианты. А если что делает JS, то приходится это менять с помощью javascript.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 0 / 5. Количество оценок: 0

Оценок пока нет. Поставьте оценку первым.