Від автора: після розробки декількох плагінів і тем для 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": "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. Можете створити нову сторінку з шорткодом і перевірити, чи підключений скрипт чи ні.
Висновок
У даній статті ми підвели підсумок по тому, як підключати скрипти плагінів і тем, а також дізналися, як зробити так, щоб вони не підключалися до всіх сторінок.