После некоторой разработки плагинов и тем для WordPress вы все больше и больше задумываетесь о производительности вашей темы и о том, какие проблемы это может вызвать у ваших клиентов. Одной из таких проблем является постановка сценариев и стилей в очередь. В этой статье мы рассмотрим основы постановки сценариев и лучшие практики для разных вариантов использования. Вы можете проверить эту статью для начинающего обзора по управлению активами WordPress .
Сценарии и стили
Если вам нужно вставить какой-либо код CSS или JavaScript на определенные страницы вашего веб-сайта, мы склонны либо добавлять их в один и тот же файл разметки, либо добавлять их, используя прямой URL-адрес файла.
// ... <script type="text/javascript"> // some JS code </script> <style type="text/css"> // some CSS code </style> //... <script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script> Однако это не рекомендуемый способ добавления скриптов, и плагины для кэширования не будут оптимизировать и кэшировать ваши ресурсы для повышения производительности сайта. Нам нужно использовать хук admin_enqueue_scripts .
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 является имя обработчика скрипта, мы всегда должны ставить префикс обработчика, чтобы избежать любых конфликтов и убедиться, что наш скрипт всегда будет загружен.
Текущее решение не является идеальным, и наш скрипт включен в каждую внутреннюю страницу. Мы можем использовать переменную $hook переданную в функцию обратного вызова, для проверки определенной страницы.
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'] ); } );
Теперь наш скрипт будет включен только в настройки и новые посты. Мы можем пойти дальше, чтобы включить наши стили только тогда, когда пользователь создает новую страницу.
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'] ); } } );
Удалить ненужные скрипты
Большинство разработчиков не заботятся о том, чтобы ставить свои скрипты в очередь только тогда, когда это необходимо, поэтому у нас всегда будут неожиданные ошибки и странные проблемы с оформлением. Заметив, что скрипт выдает ошибку или вызывает конфликты, вы можете удалить его перед добавлением собственного, это часто полезно в режиме отладки.
add_action( 'admin_enqueue_scripts', function($hook) { $unautorized_styles = [ 'script1', 'another-script' ]; foreach ( $unautorized_styles as $handle ) { wp_deregister_style( $handle ); } // enqueue my scripts } );
Работа с шорткодами
Большинство плагинов и тем предоставляют набор шорткодов для взаимодействия с веб-сайтом, иногда им нужно вводить скрипты на страницу. К сожалению, мы не можем тестировать страницы переднего плана, как мы делали это ранее для внутреннего интерфейса.
Простой способ добиться этого — зарегистрировать обратный вызов в фильтре the_content и проверить, содержит ли он ваш шорткод. Если он возвращает да, вы можете поставить в очередь свои сценарии, иначе ничего не делать.
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 файл будет выглядеть следующим образом:
// composer.json { "name": "Demo plugin", "description": "", "authors": [ { "name": "Author name", "email": "author.name@example.com" } ], "autoload": { "psr-4": { "ESP\\": "src/" } } }
Класс src/shortcodes/HelloShortcode.php содержит наше определение src/shortcodes/HelloShortcode.php .
// 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 ставит наши стили в очередь при загрузке плагина. Оставшаяся часть будет регистрировать наш шорткод для распознавания в содержимом сообщения.
// 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 .
Теперь вы можете создать новую страницу, содержащую наш шорткод, и проверить, правильно ли загружен наш скрипт.
Вывод
Эта короткая статья была краткой информацией о том, как поставить в очередь ваши плагины и скрипты тем, и о том, как лучше всего не загружать их внутри каждой страницы вашего сайта. Если у вас есть какие-либо вопросы или комментарии, пожалуйста, оставьте их ниже, и я сделаю все возможное, чтобы ответить на них!