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 на своих проектах?
