Как добавить стиль в плагин WordPress из файлов темы?

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

В моих файлах темы я подключаю множество файлов 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">

Важные замечания

  1. Избегайте зависимости плагина от темы: Лучше всего избегать подключения стилей и скриптов темы напрямую в плагине, чтобы не порождать зависимость от темы. Каждый раз, когда вы смените тему, это может создать проблемы с доступностью стилей.

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

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

Заключение

Правильное подключение CSS-файлов из темы в плагине WordPress требует внимания к деталям и понимания работы системы загрузки хуков. Следуя указанным шагам, вы сможете обеспечить надёжную и эффективную интеграцию стилей, что positively impacts user experience and aesthetic consistency.

Оцените материал
Добавить комментарий

Капча загружается...