0
159
2018-02-16

Асинхронная или отложенная загрузка JavaScript в WordPress

Есть много статей о том, как асинхронизировать или "откладывать" скрипты в WordPress, но они предполагают, что вы будете писать весь код или использовать один из раздутых плагинов, чтобы это произошло. В моем случае мне просто нужна была возможность асинхронизировать или отложить несколько скриптов в пользовательском плагине или теме.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Друзья, данный пост является переводом. Оригинал находится здесь, в данном случае "я" не символизирует администрацию блога )

Конечно, я мог бы добавлять все фильтры каждый раз, чтобы это работало, но я программист. Почему я должен постоянно писать один и тот же код снова и снова? Почему бы не создать простой модуль, чтобы справиться с этим для меня, и позволить мне асинхронизировать и откладывать сценарии по-настоящему в WordPress? Я так и сделал.

Представляем модуль WordPress Async/Defer Scripts

Библиотеку Composer для асинхронной загрузки или отсрочки сценариев в WordPress можно посмотреть в GitHub или Packagist.

Требования

  • PHP 5.3+
  • WordPress 4.2+

Установка

Добавьте модуль в вашу кодовую базу через Composer:

composer require wpscholar/wp-async-defer-scripts

Убедитесь, что в вашем проекте требуется автозагрузчик Composer:

<?php

require __DIR__ . '/vendor/autoload.php';

Использование

Асинхронно загружайте скрипт, используя метод wp_scripts()->add_data():

<?php

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js' );
    wp_scripts()->add_data( 'recaptcha', 'async', true );
} );

Отложите загрузку скрипта с помощью метода wp_scripts()->add_data():

<?php

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js' );
    wp_scripts()->add_data( 'recaptcha', 'defer', true );
} );

Инициализация

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

<?php

wpscholar\WordPress\AsyncDeferScripts::initialize();

Заключение

Мне бы хотелось, чтобы в ядро​WordPress была добавлена простая асинхронная и отложенная функциональность, но в то же время это хорошо сработало для моих личных проектов, и я решил поделиться ею с вами. Как вы думаете?




Статья была переведена для блога TechBlog.SDStudio.top

Источник: wpscholar.com