Управление CSS/JS, которые загружают плагины WordPress

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

Как некоторые плагины работают сегодня

Давайте возьмем реальный пример. Плагин WP-Polls. Я думаю, что это хороший плагин. Он хорошо подходит для опросов. Именно его я использую.

Если Вы планируете разместить на веб-сайте опросы, вам нужен будет какой-нибудь JavaScript для обработки функционала(т.е. функции голосовать и видеть результаты голосования без необходимости обновлять страницу) и CSS для определения стилей виджета опросов(панели с результатами и много чего ещё).

CSS добавляется при помощи включения таблицы стилей через обращение wp_head(), размещенное в разделе <head>:

<link rel='stylesheet' id='wp-polls-css' href='http://example.com/wp-content/plugins/wp-polls/polls-css.css?ver=2.67' type='text/css' media='all' />

JavaScript добавляется при помощи введения скрипта через обращение wp_footer(), размещенное в нижней части документа:

<script src='http://example.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.67'></script>

Это разумно. Это то, что они должны сделать, чтобы заставить этот плагин работать. Авторы плагинов должны обеспечить, чтобы их плагины были просты в использовании и работали.

Как разработчик, ориентированный на повышение производительности, я хочу, чтобы скрипты и стили были объединены

Сейчас у нас есть данные два ресурса, которые предназначены для одной цели. Когда вы посмотрите материалы, посвященные веб-производительности и тому, как сделать веб-сайты быстрее, первое что вы услышите от их авторов — это необходимо объединять ресурсы. Хорошее правило: чем меньше ресурсов веб-сайту надо загрузить, тем быстрее он работает.

Объединение ресурсов это не какая-то абстрактная концепция, о которой должны заботиться только самые элитные веб-сайты. Это проблема для каждого сайта. Люди решают эту проблему миллионом методов. CSS -спрайты призваны объединить все ресурсы картинок.

Шрифты иконок и SVG -спрайты предназначены для решения данной же проблемы. CSS -препроцессоры помогают объединить таблицы стилей. Rails Asset Pipeline также помогает объединить ресурсы. Есть большое число Grunt и Gulp плагинов, которые предназначены для того же самого.

Но мы теперь говорим о WordPress, так что нам нужны решения для него.

Могут ли сами плагины помочь нам?

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

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

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

Решение 1: Используйте плагин

Плагин MinQueue предоставляет решение, которое мне лично нравится. Он не делает ничего автоматом, что может изменить, какие ресурсы вы хотели бы совместить, и в каком порядке.

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

Управление CSS/JS, которые загружают плагины WordPress Для нашей демо-версии, я хочу объединить CSS нашей темы и CSS плагина WP-Polls. Так что я беру данные имена из подсказки и помещаю их в новую «очередь загрузки» в параметрах плагина:
Управление CSS/JS, которые загружают плагины WordPress Сейчас ни один из данных файлов стилей больше не загружается отдельно. MinQueue создает объединенную(и закэшированную) версию и обслуживает ее:

<link rel='stylesheet' id='minqueue-117c22aa-ebc80003-css' href='http://example.com/wp-content/uploads/minqueue-cache/minqueue-117c22aa-ebc80003.css' type='text/css' media='all' />

Вы можете без труда создать пару «очередей загрузки«, что в сумме даст вам достаточно контроля. К примеру, возможно, подраздел веб-сайта загружает разные ресурсы, которые могут быть объединены отдельно, их не необходимо объединять с основными разделами.

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

Также имейте в виду, что популярный плагин W3 Total Cache также осуществляет объединение, но я считаю, это он делает это гораздо сложнее. Вы добавляете стили через URL -адреса, и мне кажется, что это чревато ошибками.

Решение 2: Вручную выделяйте элементы и объединяйте их

Плагины, которые добавляют ресурсы, делают это через wp_enqueue_script и wp_enqueue style. Вы можете легко покопаться в коде плагина и найти, где они делают это. Тогда вы можете без труда увидеть имя, которое они применяют, когда делают это.

После чего в собственном файле темы functions.php(или пользовательском файле возможностей плагина) вы можете без труда выделить их из очереди. Простой пример извлечения из очереди одной таблицы стилей:

add_action('wp_print_styles', 'my_deregister_styles', 100);function my_deregister_styles() { wp_deregister_style('name-of-style');}

Сейчас как вы можете найти этот ресурс и объединить его с CSS, который вы по-прежнему загружаете на странице самостоятельно. Возможно, вы используете CSS -препроцессор, тогда вы можете без проблем импортировать этот ресурс.

Возможно, вы используете обработчик задач наподобие Grunt, тогда вы можете без проблем добавить его в список файлов, которые будут выделяться и объединяться. Или просто вручную скопировать и вставить содержимое ресурса в собственную таблицу стилей(просто помните, что в этом случае он не будет обновляться при обновлении плагина).

Решение 3: Используйте плагин для выделения из очереди загрузки элементов и их объединения

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

Во время предыдущих дискуссий на эту тему Нейт Райт из Theme of the Crop показал нам совершенно новый плагин, предназначенный для данных целей, под названием Asset Queue Manager. Через его интерфейс вы запросто можете выделить элементы, без необходимости лесть в код.

Через интерфейс веб-сайта вы можете легко нажать ссылку в панели администрирования, чтобы вывести выпадающее меню со списком всех загружаемых элементов страницы:

Управление CSS/JS, которые загружают плагины WordPress Плагин включает кнопку для выделения элементов из очереди загрузки. Плагин выведет их из очереди загрузки, пока вы не отмените это действие. Сейчас вы можете объединять загружаемые ресурсы по усмотрению. В Asset Queue Manager ещё одна кнопка, которая может связаться непосредственно с ресурсом, таким образом, его без труда найти. Довольно круто!

Заключение

Есть много методов управления CSS и JavaScript, которые загружают плагины WordPress. Вы можете легко и должны сделать это для каждого загружаемого ресурса.

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

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