Добавление скриптов и стилей в очередь в WordPress

Добавление скриптов и стилей в очередь в WordPress

От автора: после разработки нескольких плагинов и тем для WordPress начинаешь все больше задумываться о производительности самодельных тем и о том, как это влияет на пользователей. Одна из таких проблем – постановка в очередь стилей и скриптов. В этой статье мы расскажем вам основные моменты по добавлению скриптов и стилей в очередь wordpress для разных случаев.

Постановка в очередь скриптов и стилей

Если на какие-то страницы необходимо добавить CSS или JS код, это можно сделать, вставив код напрямую в разметку, или же добавить файлы с помощью ссылок.

// ...
<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.

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 и передать ее как аргумент в колбэк функцию.

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'] );
} );

Теперь наш скрипт будет подключаться только на страницу настроек и страницы постов. Можно сделать еще лучше и подключать новые стили только, когда пользователь создает новую страницу.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее
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 );
 }

 // подключаем свои скрипты
} ); 

Работа с шорткодами

В большинстве плагинов и тем есть шорткоды, с помощью которых можно взаимодействовать с сайтом, но иногда для их подключения необходимы скрипты. К сожалению, мы не можем провести тест для front-end страниц, как сделали выше для back-end.

Можно зарегистрировать колбэк функцию в фильтре the_content и проверять ее на наличие шорткода. Если возвращается yes, можно подключить свои скрипты.

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

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. Можете создать новую страницу с шорткодом и проверить, подключен ли скрипт или нет.

Заключение

В данной статье мы подвели итог по тому, как подключать скрипты плагинов и тем, а также узнали, как сделать так, чтобы они не подключались ко всем страницам.

Автор: Younes Rafie

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

WordPress-Профессионал

Посмотрите информацию по API WordPress, благодаря Вы сможете научиться писать плагины и виджеты

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Миша

    Супер, кину в закладки. На моем сайте, по-моему не все файлы подключены оптимальным способом.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree