Здравствуйте, дамы и господа, в этой статье я расскажу о том, как подключить собственный CSS к плагину WordPress. Например, это будет полезно, если вы решите не делать дочернюю тему для WP, или вам нужно сделать определённый файл стилей для задачи, не связанной с темой. Или, в конце концов, когда дочерняя тема — расширение к основной и тоже обновляется. Давайте приступим.
Инструкция по подключению CSS в собственном плагине
Если не знакомы с темой обсуждения, то для начала прочитайте инструкцию по созданию кастомного плагина. Это очень просто. Сейчас же мы переходим к тонкостям. Предположим, вам нужно подключить CSS к плагину. И это довольно просто. Для начала создайте кастомный плагин по инструкции. В той же папке создайте файл стилей. Назовите его тем же именем, что и плагин.
Например, у меня будет два файла:
- buro-plugin-custom.php
- buro-plugin-custom.css
Теперь открываем наш основной файл плагина — 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.
