Inline CSS и Inline JavaScript в WordPress

Иногда возникает необходимость добавить JavaScript код какого-нибудь счетчика или пару CSS правил на страницу. Для этого не обязательно создавать отдельные файлы, можно вставить нужный код inline методом. В этой статье я поделюсь, как использовать Inline CSS и Inline JavaScript в WordPress.

Inline CSS в WordPress

Начнем со стилей.

Для добавления inline CSS используется функция wp_add_inline_style().

/* * @param string $handle название (идентификатор) подключенных стилей, сразу после которых нужно добавить inline css * @param string $data css код, который нужно добавить на страницу */ wp_add_inline_style( $handle, $data );
Code language: PHP (php)

Рассмотрим пример использования.

Для подключения inline стилей используется тот же механизм, что и при подключении файлов со стилями — хук wp_enqueue_scripts.

function bs_styles() { wp_enqueue_style('bs-general', get_template_directory_uri() . '/css/bs-general.css'); $css = " body a { color: green; }"; wp_add_inline_style( 'bs-general', $css ); } add_action( 'wp_enqueue_scripts', 'bs_styles' );
Code language: PHP (php)
Строка 2

Подключаем основные стили bs-general. Предположим, что в bs-general.css находится CSS, который задает цвет ссылок:

body a { color: red; }
Code language: CSS (css)

И мы хотим изменить это. Для этого отлично подойдут inline стили.

Строки 4-7

В переменной $css задаем новые правила, которые будут заменять цвет ссылок.

Строка 9

Наконец, подключим наши стили на страницу сразу после стилей bs-general.css. Цвет ссылок теперь изменится на зеленый.


Inline CSS в WordPress особенно удобно использовать, когда нужно переписать стили какого-нибудь конкретного плагина своими правилами.

Имейте ввиду, что если вы используете плагин для минификации/конкатенации CSS, место размещения inline CSS может быть значительно позже подключения общего файла с оптимизированными стилями.

Если таких плагинов у вас нет, то inline CSS появится сразу же после стилей, указанных в $handle.

Inline JavaScript в WordPress

Перейдем к более интересному и чуть более сложному — к подключению inline JavaScript.

Для этого используется функция wp_add_inline_script()

/** * @param string $handle название js файла, к которому нужно добавить inline js * @param string $data добавляемый js код * @param string $position где добавлять код относительно js файла - перед (before) или после (after) */ wp_add_inline_script( $handle, $data, $position );
Code language: PHP (php)

и уже знакомый нам хук wp_enqueue_scripts.

Рассмотрим пример из недавней статьи по разработке плагина. Мы использовали inline JavaScript для сохранения значения селектора в переменной. Благодаря этому у пользователя есть возможность настроить конкретный элемент страницы, с которым будет работать плагин.

В плагине применяется WordPress Plugin Boilerplate в качестве основы, поэтому подключение скриптов выглядит следующим образом:

private function define_public_hooks() { $plugin_public = new Bs_Scroll_Progress_Public( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); /***/ }
Code language: PHP (php)

Ну а теперь сам код размещения inline JavaScript в WordPress:

public function enqueue_scripts() { wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/bs-scroll-progress-public.js', array( 'jquery' ), $this->version, false ); $selector = get_option( 'bs_sp_selector' ); if ( $selector ) { $script = "const bsSPSelector = '{$selector}';"; wp_add_inline_script( $this->plugin_name, $script, 'before' ); } }
Code language: PHP (php)
Строка 3

Подключается основной файл с JS плагина, для корректной работы которого требуется установленное значение переменной bsSPSelector.

Строка 5

Попытка получить значение селектора из настроек плагина.

Строки 6-9

Если пользователь выполнил настройку, и можно получить значение опции, устанавливаем значение селектора для переменной bsSPSelector (строка 7).

Подключаем inline JS на страницу перед скриптами плагина (строка 8).

Обратите внимание на 3 параметр в функции wp_add_inline_script(). Это место, где нужно разместить inline JS относительно JS файла. В нашем случае объявление переменной необходимо до подключения основного файла со скриптами, поэтому используем значение ‘before‘, а не ‘after‘.


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

С помощью Inline JS можно передать скрипту для работы какие-либо данные из бэкенда. Но не забывайте о безопасности.

А какие вы находили интересные применения Inline CSS или Inline JavaScript в WordPress на своих проектах?

Полезные ссылки

Похожие записи

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

Ваш адрес email не будет опубликован.