Добавление скриптов и стилей в очередь в 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'] );
} );

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

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-Профессионал

Посмотрите информацию по 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