Вы здесь: Главная » Wordpress » Подключаем стили и скрипты в WordPress для темы или плагина

Подключаем стили и скрипты в WordPress для темы или плагина

Как известно, стили в файле темы WordPress подключаются в блоке <head>, за который отвечает файл  header.php и функция wp_head(), которая размещается в нем. Что касается подключения скриптов, то здесь у вас есть выбор - можно сделать это также в блоке <head> или перед закрывающимся тегом </body>.

Подключение стилей в тему или плагин WordPress

Подключаем стили в WordPress

По умолчанию в тему подключается файл style.css, который находится в корне папки с темой и несет инфо

рмацию о ней в виде комментариев. Однако, этого файла бывает мало, и тогда приходится подключать стили из папки, которую традиционно называют css. Например, вы хотите подключить стили из Bootstrap 4 и иконочные шрифты FontAwesome версии 5.15.1. Тогда вам нужно будет записать такие строки:

Общий вид функции wp_enqueue_style() для подключения стилей имеет такой вид:

При подключении стилевого файла вы указываете:

  • в качестве параметра $handle id  тега <link>, который затем будет выведен с добавкой "-css", то есть "bootstrap-css" или "font-awesome-css";
  • в качестве параметра $src - путь к css-файлу. При этом вы используете определенные функции для определения пути к папке темы/плагина, т.к. все темы в WordPress размещаются внутри wp-content/themes/имя_папки_темы или wp-content/plugins/имя_папки_плагина, а именно:
    • функция get_template_directory_uri() возвращает путь (URL с протоколом http:// или https://) к папке вашей темы (учтите, что вернется URL родительской темы, даже если используется дочерняя, поэтому для дочерней стоит изменить вызов функции на get_stylesheet_directory_uri()).
    • для плагина необходимо будет использовать  функцию plugin_dir_url( __FILE__ ) или plugins_url().
  • в качестве параметра $deps - массив идентификаторов других стилей, от которых зависит подключаемый файл стилей (по умолчанию: array()). Указанные тут стили, будут подключены до текущего. Например, если вам нужно, чтобы стили FontAwesome были подключены после Bootstrap, запишите такую строку:

    Если зависимость вам не важна, можно оставить пустые кавычки '' или array().
  • в качестве параметра $ver указывается строка с номером версии стилей. Она будет добавлена в конец ссылки на файл, например ?ver=4.5.3 для bootstrap.css. Если не указать (по умолчанию установлено false), будет использована версия WordPress. Если установить null, то версия указана не будет.
  • параметр $media указывает тип устройства, для которого предназначен css-файл. Может быть: all, screen, handheld, projection, print или (max-width:480px) и другие. По умолчанию установлено значение all, поэтому чаще всего этот параметр просто опускается.

В результате подключения стилей в теме при просмотре кода страницы (CTRL+U) вы увидите примерно следующее:

Отображение тега link в теме wordpress

Вместо somesite.com должно быть доменное имя вашего сайта.

Указание пути к файлам темы/плагина

Любой из приведенных выше вариантов указания пути к папке темы/плагина можно заменить константой, объявив ее в верхней части файла functions.php вашей темы или основного файла плагина примерно таким образом:

Затем вы можете использовать эту константу в любых функциях своей темы/плагина.

Подключение шрифтов сервиса GoogleFonts

Сервис GoogleFonts периодически меняет правила подключения шрифтов, усовершенствуя их. Например, сейчас уже можно загружать переменные шрифты, отсортировав их среди всех с помощью флажка "Show only variable fonts". Если же вам это не принципиально, то вы выбираете подходящий шрифт, варианты начертания, а затем копируете ссылку, расположенную справа внизу.

GoogleFonts

Точнее, вам нужна будет не вся ссылка, а содержимое атрибута href. Именно его вам необходимо добавить в качестве параметра $src в функцию wp_enqueue_style(), например, так:

В файле header.php до вызова функции wp_head() вам нужно будет добавить еще строку:

Подключение скриптов в тему или плагин WordPress

Подключаем скрипты в WordPress

Подключение скриптов выполняется с помощью аналогичной функции wp_enqueue_script():

Общий вид функции:

В этой функции используются следующие параметры:

  • $handle - id скрипта, который будет выведен с добавкой "-js", например, <script id="slick-slider-js">
  • $src - URL файла скрипта, в котором используются те же функции, что и для подключения файлов стилей.
  • $deps - массив названий (id) скриптов от которых зависит этот скрипт. Эти скрипты должны быть загружены перед указанным скриптом, иначе его работоспособность окажется под вопросом. Очень часто это библиотека jQuery, которая входит в состав ядра WordPress и подключается чаще всего из него. От нее зависит работа многих плагинов. По умолчанию этот параметр - пустой массив (array()). Может быть заменен на пустую строку (''). В примере этот параметр - array('jquery'). Может быть, например, array('jquery', 'bootstrap-script'), если вы подключаете свой скрипт после того, как вам необходимо подключить jQuery и bootstrap.js.
  • $ver - версия скрипта. Может быть строкой ('1.12.4'), пустой строкой (''), false (указывается версия WP) или null (ничего не указывается). Имеет смысл указывать версию плагина, например, если вы его используете для каких-либо целей на странице.
  • $in_footer - логический параметр, т.е. принимающий значения true|false и определяющий, будет ли ваш скрипт загружен в шапке html-страницы, т.е. в теге <head> (значение false - по умолчанию) или в подвале перед закрывающим тегом </body> - значение true. Кстати, вместо true можно указать любую строку, например 'in_footer'.
    Важно понимать, что при указании этого параметра со значением true, скрипт будет подключен там, где вызывается тег шаблона wp_footer(). Чаще всего это происходит в файле темы footer.php.
    Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменной будет проигнорировано.

С точки зрения оптимизации загрузки страницы лучше, чтобы все скрипты загружались именно в подвале. В этом случае все элементы страницы уже загружены и скрипты имеют к ним доступ. Кроме того, такой инструмент, как Google PageSpeed Insights не будет выдавать вам рекомендации по оптимизации страницы в плане того, что скрипт замедляет загрузку контента.

Использование хука-события wp_enqueue_scripts

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

Оптимизация загрузки стилей и скриптов

Обратите внимание на то, что часть стилей и скриптов будет загружаться только для главной страницы. Это еще один момент, связанный с оптимизацией вашего кода и увеличением скорости загрузки страниц сайта: если какие-то стили и скрипты нужны лишь на определенных страницах, а на остальных в них нет надобности, то и присутствовать они должны лишь на нужных страницах. В примере выше такая страница одна - главная. Определяется она отдельным шаблоном, поэтому и проверяется с помощью функции  is_front_page().

Если необходимо подключить какие-то стили для блога, проверочной функцие будет is_home(). Если для проверки страницы записи - функции is_single() и is_singular(). Разновидность последней функции можно использовать для проверки какого-то кастомного (пользовательского) типа записи, например is_singular('product') или нескольких  типов записей is_singular(['product', 'review']). Можно проверять, что загружается на страницах - для этого есть функция is_page(). Довольно часто приходится отслеживать определенные шаблоны страниц. Тогда имеет смысл воспользоваться функцией is_page_template('some-page-template.php')

Подключение скриптов в админке WordPress

Подключение скрипта в админке WordPress

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

Хук, который подключает скрипт, теперь называется admin_enqueue_scripts:

Если вам необходимо подключить скрипт для страницы авторизации, то можно использовать хук login_enqueue_scripts.

Регистрация и локализация скрипта. Использование данных при AJAX-запросе

Регистрация и локализация скриптов в WordPress

Для того чтобы подключить скрипт, вполне достаточно использовать функцию wp_enqueue_script(). Однако, возможна ситуация, при которой вам необходимо будет отправлять/получать данные с помощью AJAX. Тогда, как минимум, вам понадобится указать путь к файлу admin-ajax.php, который необходим для отправки AJAX-данных и обработки их в функции в файле functions.php или файле плагина. Делается это как раз при регистрации скрипта.

Общий вид функции wp_register_script():

В этой функции используются следующие параметры:

  • $handle - id скрипта, который будет выведен с добавкой "-js", например, <script id="admin-login-js">
  • $src - URL файла скрипта, в котором используются те же функции, что и для подключения файлов стилей.
  • $deps - массив названий (id) скриптов от которых зависит этот скрипт и которые должны быть загружены перед указанным скриптом.
  • $ver - версия скрипта. Может быть строкой ('1.12.4'), пустой строкой (''), false (указывается версия WP - значение по умолчанию) или null (ничего не указывается).
  • $in_footer - логический параметр, т.е. принимающий значения true|false и определяющий, будет ли ваш скрипт загружен в шапке html-страницы, т.е. в теге <head> (значение false - по умолчанию) или в подвале перед закрывающим тегом </body> - значение true.

Если присмотреться, то это те же параметры, что и в функции wp_enqueue_script(). После регистрации скрипта необходимо его добавить с помощью функции wp_enqueue_script().

Однако это не все. Для использования с AJAX необходимо еще добавить функцию wp_localize_script(), в которой мы указываем

Синтаксис функции wp_localize_script()

Параметры функции таковы:

  • $handle - название скрипта, перед которым будут добавлены данные. Этот скрипт должен быть зарегистрирован заранее с помощью функции wp_register_script().
  • $object_name - название (имя) Javascript объекта, который будет содержать нужные вам данные. Это название должно быть уникальным, чтобы не вызвать конфликтов с другими скриптамии. В нем нельзя использовать тире -, можно - латиницу в нижнем и верхнем регистре, нижнее подчеркивание _.
  • $l10n(массив) - Данные перевода. Данные могут быть как в одномерном, так и в многомерном массиве. Именно этот параметр может быть использован не для перевода, а для добавления нужных вам данных, которые станут переменными объекта $object_name.

Давайте посмотрим, как можно использовать все функции для регистрации скрипта с отправкой AJAX-данных:

В результате работы этого примера мы увидим при просмотре кода документа такие строки:

В JavaScript-коде вы потом сможете использовать объект ajax_login_object для отправки данных на сервер:

О том, как правильно писать скрипт на jQuery, читайте ниже.

Убираем атрибуты type="text/css" и type="text/javascript"

В стандартах HTML4 и XHTML в теге <link> необходим был атрибут type="text/css" , а в теге <script> - атрибут type="text/javascript" - они видны на скриншоте.

Тег script в теме wordpress

Стандарт HTML5 уже не требует этих атрибутов. Даже больше - W3C-валидатор "ругается", встречая их в коде страницы.

Предупреждения w3c-валидатора

Поэтому, если ваша тема поддерживает стандарт HTML5, а это видно по наличию короткого

в начале разметки, необходимо убрать атрибуты type="text/css" и type="text/javascript". Сделать это нужно в файле functions.php вашей темы, добавив в массиве поддерживаемых значений для html5 в функции add_theme_support() 'script' и'style' к тому списку, который там, скорей всего, уже существует:

Теперь со тегами стилей и скриптов все в порядке:

Стили и скрипты без атрибута type

Стили и скрипты без атрибута type

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

Подключение jQuery в WordPress

Сейчас наблюдается тенденция постепенного отказа от использования jQuery на страницах сайта. Например, в 5-й версии Bootstrap разработчики решили остановится на нативном JavaScript для своих плагинов, хотя и 3-я, и 4-я версии Bootstrap использовали именно jQuery, например, для карусели. Тем не менее, в WordPress jQuery используется еще довольно широко и во многих плагинах, поэтому стоит разобраться с тем, как подключить jQuery и основанные на ней скрипты в WordPress, чтобы в консоли не было ошибок вида "$ is not defined".

Режим совместимости jQuery

В ядро WordPress включен файл jQuery, который вы даже не обязаны явно подключать. Достаточно указать array('jquery') в качестве параметра $deps при использовании  функции wp_enqueue_script(). Либо необходимо явно подключить jQuery строкой wp_enqueue_script('jquery');

Однако вам не удастся сразу же написать код на jQuery, используя привычный синтаксис $('селектор'). Дело в том, что по умолчанию копия jQuery находится в режиме совместимости. Это означает, что привычный нам знак ‘$’ не будет работать,  чтобы не создавать конфликтов с другими библиотеками JavaScript, которые его тоже используют (MooTools или Prototype, например).

При написании jQuery-скрипта для WordPress вам нужно использовать jQuery вместо $. Например, такой код:

Если ваш код состоит не из 2-3-х строк, то, скорей всего, замена знака '$' вас вряд ли устроит. Поэтому рассмотрим варианты замены jQuery на $.

Замены jQuery на $ в скриптах WordPress

Вы можете использовать формат немедленно вызываемых функций в JavaScript (IIFE) для того, чтобы вызвать функцию с параметром в виде $, передав в нее jQuery. Делать это нужно, если вы загружаете скрипт в футере, используя такой код:

Если вы хотите добавить свой скрипт в шапке сайта (что, кстати, делать не рекомендуется) — можно обернуть все в document-ready функцию, передавая $ по ходу дела:

Можно также при использовании хука wp_enquene_scripts() записать строку, которая добавляет значение $ = jQuery;с помощью функции wp_add_inline_script():

Этот способ добавит такие строки после подключенной библиотеки jQuery:

Автор: Админ

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

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