При работе с WordPress вам может потребоваться вставить встроенный стиль или скрипт на страницу или в шаблон. В этой статье мы разберем способы сделать это.

Добавление инлайн CSS

Бывают ситуации, когда вам необходимо встроить код без css-файла. Самая распространенная из них - это настройки плагина или темы, которые позволяют менять, например, цвет какого-то элемента(ов).

Следующий код разместит стиль для класса .post-content на всех страницах сайта в блоке head.

На страницах сайта увидим код:

Можно добавить встроенные стили только на страницу поста с помощью хука wp_enqueue_scripts:

Такой подход был использован при создании плагина подобных постов.

Добавление ссылки на стили для арабского языка

Для указания условий тега можно использовать функцию wp_style_add_data( $handle, $key, $value ). Она добавляет данные для файлов стилей подключаемых с помощью wp_enqueue_style(). Чаще всего используется для подключения стилей для IE. Однако намного полезнее будет ее использование на сайте, который имеет также арабскую версию, в которой направление письменности идет справа налево.

Кстати, заменить стили для арабского языка можно с помощью ресурса CSSJanus.

Добавление инлайн-скрипта

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

В случае встраивания инлайн-скрипта можно использовать хук wp_head:

В этом случае скрипт будет добавлен в блоке head.  Нужно понимать, что для работы с элементами страницы вам понадобится обработка события window.onload или DOMContentLoaded.

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

Для работы с элементами страницы лучше использовать вариант инлайн-скрипта в футере:

Здесь использован хук wp_print_footer_scripts. Кроме него можно использовать хук wp_footer для вывода скрипта перед закрывающим тегом </body>.

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

Использование функции wp_add_inline_script()

Функция wp_add_inline_script()подразумевает, что мы работаем со скриптом, поставленными в очередь с помощью хука wp_enqueue_scripts, Он использует тот же дескриптор, или id, с которым был добавлен другой, основной скрипт.

Например, при добавлении настроек в тему WordPress при использовании основного скрипта с кодом Swiper Slider, опции для слайдера мы указываем в инлайн-скрипте, который подключается после основного.

Кроме того, с помощью функции wp_add_inline_script() можно указать ajax URL для нашего скрипта и дополнительные параметры.

В случае, если инлайн-скрипт должен содержать данные, которые выводятся ДО основного скрипта, нужно в функцию wp_add_inline_script() добавить второй параметр 'before':

Встраивание скриптов через wp_localize_script()

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

Например:

На html-странице увидим такой код:

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

Заключение

На самом деле, способов подключения инлайн-стилей или скриптов не так уж и много. В основном они отличаются использованием хуков, которые помещают скрипт в верхней или нижней части html-страницы. Что касается стилей, то их место - в блоке head.

Автор: Админ

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

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