Правильное подключение JS скриптов и CSS файлов в WordPress

Если вы уже разрабатывали плагины или темы для WordPress, то наверняка, знаете, что производительность вашего плагина очень важна, так как на сайте может быть установлено много плагинов. Одна из проблем, которую можно оптимизировать — подключение js и css файлов. В этой статье мы рассмотрим принципы правильного подключения скриптов и стилей к вашему WordPress плагину или теме.

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

Если нам нужен CSS или JavaScript код на странице мы, как правило, размещаем его внутри соответствующего тега, либо подключаем его с помощью ссылки на файл, в котором он расположен:

// ...
<script type="text/javascript">
    // JS code
</script>

<style type="text/css">
    // CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

Однако, это не правильный подход для подключения скриптов в WordPress: плагины для кэширования не смогут корректно обрабатывать этот код и производительность сайта не возрастет. Правильно — использовать хук 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 — имя скрипта, оно всегда должно быть уникальным, поэтому мы используем собственный префикс для нашего WordPress плагина.

Данное решение не идеально — наш скрипт будет загружаться для каждой страницы интерфейса администратора. Мы можем использовать переменную $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
} );

Шорткоды

Многие плагины и темы имеют набор шорткодов (shortcode) для взаимодействия с сайтом, некоторым из них требуются скрипты или стили. В этом случае у нас нет способа проверить необходимость подключения скрипта, как в предыдущем примере.

Самый простой способ — зарегистрировать фильтр для события 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

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(). Далее мы используем wordpress хук wp_footer для подключения скриптов перед закрытием тега body.