Додавання скриптів і стилів в чергу в WordPress

24

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

Постановка в чергу скриптів і стилів

Якщо на якісь сторінки необхідно додати CSS або JS код, це можна зробити, вставивши код безпосередньо в розмітку, або ж додати файли за допомогою посилань.

// …
// JS код
// CSS
//…

Не рекомендується додавати скрипти, як показано вище, так кеш-плагіни не зможуть оптимізувати і кешувати файли, щоб підвищити продуктивність сайту. Ми радимо використовувати хук 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'] );
} );

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

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": "[email protected]"
}
],
"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. Можете створити нову сторінку з шорткодом і перевірити, чи підключений скрипт чи ні.

Висновок

У даній статті ми підвели підсумок по тому, як підключати скрипти плагінів і тем, а також дізналися, як зробити так, щоб вони не підключалися до всіх сторінок.