Вопрос или проблема
В моих файлах темы я подключаю множество файлов css и js. Я хочу подключить некоторые css файлы, которые такие же, как в теме. Итак, как я могу подключить их в плагине?
ЕСЛИ я правильно понял ваш вопрос, то вы хотите подключить скрипты и таблицы стилей с помощью плагина так же, как вы это делаете с темой… …если это так, то на самом деле это не так уж и отличается:
function yourplugin_enqueue_frontend() {
wp_enqueue_style( 'yourplugin-front', plugins_url( 'yourplugin-front.css', __DIR__ ), array(), '1.0' );
wp_enqueue_script( 'yourplugin-front', plugins_url( 'yourplugin-front.js', __DIR__ ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'yourplugin_enqueue_frontend' );
Я использую plugins_url( 'path-to-file.js', __DIR__ )
, а не __FILE__
, потому что я склонен организовывать свои каталоги плагинов с большим количеством деталей. Так что все мои функции находятся в отдельных файлах, в каталоге includes
, мои файлы javascript находятся в каталоге js
, CSS в каталоге css
и т. д… так что это просто облегчает возможность предоставить правильный путь для каждого из скриптов и таблиц стилей, которые я подключаю.
Основное отличие заключается в том, что в темах вы используете:
get_template_directory_uri() . 'theme-stylesheet.css'
Но в плагине вы используете:
plugins_url( 'theme-stylesheet.css', __DIR__ )
Остальное почти идентично.
ОБНОВЛЕНИЕ
Хорошо, я действительно не думаю, что вы должны делать это таким образом, потому что тогда вы делаете плагин зависимым от темы, что означает, что если вы измените тему, вы потеряете доступ к файлу, если новая тема не имеет его или если новая тема имеет его в другом месте… например, я поместил файл внутрь каталога с названием /css/
, но если вы переключите темы, и новая тема имеет тот же файл, но на этот раз он находится в /assets/css/
, то ваше подключение сломается.
Тем не менее, поскольку вы это запросили, вот оно…
function yourplugin_enqueue_frontend() {
wp_enqueue_style( 'yourplugin-front', plugins_url( 'yourplugin-front.css', __DIR__ ), array(), '1.0' );
//ЭТА СЛЕДУЮЩАЯ СТРОКА ПОДКЛЮЧАЕТ СКРИПТ ИЗ ТЕМЫ
wp_enqueue_style( 'notagoodidea', get_template_directory_uri() . '/css/shouldnt-do-this.css', array(), '1.0' );
wp_enqueue_script( 'yourplugin-front', plugins_url( 'yourplugin-front.js', __DIR__ ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'yourplugin_enqueue_frontend' );
Я протестировал это, и это работает…
<link rel="stylesheet" id="notagoodidea-css" href="http://domain.com/wp-content/themes/thisisthetheme/css/shouldnt-do-this.css" media="all">
Основываясь на ваших комментариях в ответ на других, вы хотите зарегистрировать таблицу стилей в вашей теме и подключить её из плагина. В этом случае вы можете вызвать wp_enqueue_script()
только с хэндлом, который вы использовали с wp_register_script()
, и без других аргументов.
Итак, в вашей теме зарегистрируйте таблицу стилей.
add_action(
'wp_enqueue_scripts',
function() {
wp_register_style( 'my-stylesheet-handle', get_theme_file_uri( 'css/my-stylesheet.css' ) );
}
);
Затем в вашем плагине вы можете подключить таблицу стилей так:
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_style( 'my-stylesheet-handle' );
},
20
);
Одна вещь, о которой вам нужно помнить, это то, что плагины загружаются перед темами, поэтому, когда вы подключаетесь к wp_enqueue_scripts
из плагина, вы должны указать приоритет больше 10
, чтобы это сработало после регистрации таблицы стилей темой.
function custom_user_scripts() {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'style', $plugin_url . "/css/style.css");
}
add_action( 'admin_print_styles', 'custom_user_scripts' );
Ответ или решение
Для того чтобы подключить CSS-стили в вашем плагине WordPress из файлов темы, вы можете следовать определённой последовательности действий. Важно понимать, что правильное подключение стилей и скриптов обеспечивает единообразие и функциональность вашего сайта. Ниже приведены детальные шаги, которые помогут вам в этом процессе.
Шаг 1: Регистрация стилей в теме
Сначала вам необходимо зарегистрировать ваши стили в файлах темы. Это нужно для того, чтобы плагин мог использовать их. Ниже приведен пример того, как это можно сделать в файле вашей темы (обычно, в functions.php
):
add_action('wp_enqueue_scripts', function() {
wp_register_style('my-stylesheet-handle', get_theme_file_uri('/css/my-stylesheet.css'));
});
В этом коде мы используем функцию wp_register_style()
, чтобы зарегистрировать стиль, который находится в папке css
вашей темы. Обратите внимание, что мы задаем уникальный идентификатор стиля (my-stylesheet-handle
), который мы будем использовать в плагине для его подключения.
Шаг 2: Подключение стилей из плагина
Теперь, когда стиль зарегистрирован в теме, вы можете подключить его в своем плагине. Поскольку плагины загружаются до тем, убедитесь, что вы указали приоритет действия больше 10, чтобы ваш код выполнен после регистрации стилей темой:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('my-stylesheet-handle');
}, 20);
В этом фрагменте кода мы используем wp_enqueue_style()
вместе с идентификатором стиля, чтобы подключить его. Указание приоритета 20 гарантирует, что подключение произойдет после его регистрации в теме.
Шаг 3: Проверка работоспособности
После внесения изменений необходимо проверить, что стиль действительно подключается. Вы можете сделать это, открыв исходный код страницы или используя инструменты разработчика в браузере. Ищите строку, которая ссылается на ваш CSS-файл:
<link rel="stylesheet" id="my-stylesheet-handle-css" href="http://example.com/wp-content/themes/your-theme/css/my-stylesheet.css" media="all">
Важные замечания
-
Избегайте зависимости плагина от темы: Лучше всего избегать подключения стилей и скриптов темы напрямую в плагине, чтобы не порождать зависимость от темы. Каждый раз, когда вы смените тему, это может создать проблемы с доступностью стилей.
-
Используйте уникальные идентификаторы: Всегда используйте уникальные хэндлы для ваших стилей и скриптов, чтобы избежать конфликта с другими стилями и плагинами.
-
Оптимизация производительности: Подключение необходимых файлов стилей и скриптов в нужные моменты и в нужном порядке поможет вам оптимизировать производительность вашего сайта.
Заключение
Правильное подключение CSS-файлов из темы в плагине WordPress требует внимания к деталям и понимания работы системы загрузки хуков. Следуя указанным шагам, вы сможете обеспечить надёжную и эффективную интеграцию стилей, что positively impacts user experience and aesthetic consistency.