От автора: после разработки нескольких плагинов и тем для WordPress начинаешь все больше задумываться о производительности самодельных тем и о том, как это влияет на пользователей. Одна из таких проблем – постановка в очередь стилей и скриптов. В этой статье мы расскажем вам основные моменты по добавлению скриптов и стилей в очередь wordpress для разных случаев.
Постановка в очередь скриптов и стилей
Если на какие-то страницы необходимо добавить CSS или JS код, это можно сделать, вставив код напрямую в разметку, или же добавить файлы с помощью ссылок.
1 2 3 4 5 6 7 8 9 10 11 |
// ... <script type="text/javascript"> // код JS </script> <style type="text/css"> // стили CSS </style> //... <script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script> |
Не рекомендуется добавлять скрипты, как показано выше, так кэш-плагины не смогут оптимизировать и кэшировать файлы, чтобы повысить производительность сайта. Мы советуем использовать хук admin_enqueue_scripts.
1 2 3 4 |
add_action( 'admin_enqueue_scripts', function($hook) { $pluginPrefix = "my-prefix"; wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] ); } ); |
Первый параметр в методе wp_enqueue_script – имя обработчика скрипта. К обработчику всегда нужно добавлять префикс во избежание конфликтов, а также для того, чтобы наши скрипты всегда загружались.
Данный метод не идеален, и наш скрипт подключается ко всем back-end страницам. Для тестирования определенной страницы можно взять переменную $hook и передать ее как аргумент в колбэк функцию.
1 2 3 4 5 6 7 |
add_action( 'admin_enqueue_scripts', function($hook) { if ( !in_array($hook, array("options-general.php", "post-new.php")) ) return; $pluginPrefix = "my-prefix"; wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] ); } ); |
Теперь наш скрипт будет подключаться только на страницу настроек и страницы постов. Можно сделать еще лучше и подключать новые стили только, когда пользователь создает новую страницу.
1 2 3 4 5 6 7 |
add_action( 'admin_enqueue_scripts', function($hook) { if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" ) { $pluginPrefix = "my-prefix"; wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] ); } } ); |
Удаление ненужных скриптов
Большинство разработчиков не считают нужным подключать скрипты по их надобности, поэтому мы всегда сталкиваемся с неожиданными ошибками и странным поведением стилей. Если вы заметили, что скрипт выдает ошибку или конфликтует с другим скриптом, то перед подключением своего файла вы можете удалить данный скрипт. Очень удобно делать проверку через режим отладки.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
add_action( 'admin_enqueue_scripts', function($hook) { $unautorized_styles = [ 'script1', 'another-script' ]; foreach ( $unautorized_styles as $handle ) { wp_deregister_style( $handle ); } // подключаем свои скрипты } ); |
Работа с шорткодами
В большинстве плагинов и тем есть шорткоды, с помощью которых можно взаимодействовать с сайтом, но иногда для их подключения необходимы скрипты. К сожалению, мы не можем провести тест для front-end страниц, как сделали выше для back-end.
Можно зарегистрировать колбэк функцию в фильтре the_content и проверять ее на наличие шорткода. Если возвращается yes, можно подключить свои скрипты.
1 2 3 4 5 6 7 |
add_filter( 'the_content', function($content) { if ( has_shortcode($content, "hello-shortcode") ) { $pluginPrefix = "my-prefix"; wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/hello-shortcode.js') ); } }); |
Код выше отлично работает и подключает скрипты на страницы постов только в случае, если на них есть наш шорткод. Тем не менее, у данного решения есть свои серьезные проблемы с производительностью на высоконагруженных сайтах. Для таких сайтов мы сделаем более изощренное решение.
Если вы еще не пользуетесь Composer для загрузки классов, я вам советую. Наш файл composer.json будет выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// composer.json { "name": "Demo plugin", "description": "", "authors": [ { "name": "Author name", "email": "author.name@example.com" } ], "autoload": { "psr-4": { "ESP\\": "src/" } } } |
В классе src/shortcodes/HelloShortcode.php объявляется наш шорткод.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// src/shortcodes/HelloShortcode.php namespace ESP\Shortcodes; class HelloShortcode { static $loaded; public $name; public function __construct() { $this->name = "hello-shortcode"; } public function run() { static::$loaded = true; return "Hello shortcode!"; } public function enqueueScripts() { if ( static::$loaded == false ) return; $pluginPrefix = "my-prefix"; wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/hello-shortcode.js') ); } } |
Метод run возвращает HTML разметку с шорткодом, и когда шорткод используется, статическому атрибуту loaded будет задаваться значение true.
Метод enqueueScripts добавляет наши стили после загрузки плагина. Оставшаяся часть кода регистрирует наш шорткод, чтобы тот был распознан в контенте страницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// plugin-file.php require_once __DIR__."/vendor/autoload.php"; $shortcodes = [ 'ESP\\Shortcodes\\HelloShortcode' ]; foreach ($shortcodes as $shortcode) { $shortcode = new $shortcode; add_shortcode($shortcode->name, [ $shortcode, 'run' ]); } add_action('wp_footer', function() use($shortcodes) { foreach ($shortcodes as $shortcode) { (new $shortcode)->enqueueScripts(); } }); |
Данный код, конечно, можно и не подключать к главному файлу плагина, но мы ведь хотим, чтобы код был простым и читаемым. В переменной $shortcodes хранится список доступных шорткодов. Первый цикл регистрирует шорткод и создает обработчик run. После с помощью хука wp_footer мы добавляем шорткод перед закрывающим тегом body. Можете создать новую страницу с шорткодом и проверить, подключен ли скрипт или нет.
Заключение
В данной статье мы подвели итог по тому, как подключать скрипты плагинов и тем, а также узнали, как сделать так, чтобы они не подключались ко всем страницам.
Автор: Younes Rafie
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (1)