Добавление скриптов и стилей в очередь в WordPress

Добавление скриптов и стилей в очередь в WordPress

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

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

Если на какие-то страницы необходимо добавить CSS или JS код, это можно сделать, вставив код напрямую в разметку, или же добавить файлы с помощью ссылок.

Не рекомендуется добавлять скрипты, как показано выше, так кэш-плагины не смогут оптимизировать и кэшировать файлы, чтобы повысить производительность сайта. Мы советуем использовать хук admin_enqueue_scripts.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Первый параметр в методе wp_enqueue_script – имя обработчика скрипта. К обработчику всегда нужно добавлять префикс во избежание конфликтов, а также для того, чтобы наши скрипты всегда загружались.

Данный метод не идеален, и наш скрипт подключается ко всем back-end страницам. Для тестирования определенной страницы можно взять переменную $hook и передать ее как аргумент в колбэк функцию.

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

Удаление ненужных скриптов

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

Работа с шорткодами

В большинстве плагинов и тем есть шорткоды, с помощью которых можно взаимодействовать с сайтом, но иногда для их подключения необходимы скрипты. К сожалению, мы не можем провести тест для front-end страниц, как сделали выше для back-end.

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

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

Если вы еще не пользуетесь Composer для загрузки классов, я вам советую. Наш файл composer.json будет выглядеть так:

В классе src/shortcodes/HelloShortcode.php объявляется наш шорткод.

Метод run возвращает HTML разметку с шорткодом, и когда шорткод используется, статическому атрибуту loaded будет задаваться значение true.

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

Данный код, конечно, можно и не подключать к главному файлу плагина, но мы ведь хотим, чтобы код был простым и читаемым. В переменной $shortcodes хранится список доступных шорткодов. Первый цикл регистрирует шорткод и создает обработчик run. После с помощью хука wp_footer мы добавляем шорткод перед закрывающим тегом body. Можете создать новую страницу с шорткодом и проверить, подключен ли скрипт или нет.

Заключение

В данной статье мы подвели итог по тому, как подключать скрипты плагинов и тем, а также узнали, как сделать так, чтобы они не подключались ко всем страницам.

Автор: Younes Rafie

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

WordPress-Профессионал

Посмотрите информацию по API WordPress, благодаря Вы сможете научиться писать плагины и виджеты

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Миша

    Супер, кину в закладки. На моем сайте, по-моему не все файлы подключены оптимальным способом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree