При работе с WordPress вам может потребоваться вставить встроенный стиль или скрипт на страницу или в шаблон. В этой статье мы разберем способы сделать это.
Добавление инлайн CSS
Бывают ситуации, когда вам необходимо встроить код без css-файла. Самая распространенная из них - это настройки плагина или темы, которые позволяют менять, например, цвет какого-то элемента(ов).
Следующий код разместит стиль для класса .post-content
на всех страницах сайта в блоке head
.
1 2 3 | wp_register_style( 'custom-style', false ); wp_enqueue_style( 'custom-style' ); wp_add_inline_style( 'custom-style', '.post-content { color: red; }' ); |
На страницах сайта увидим код:
1 2 3 | <style id='custom-style-inline-css' type='text/css'> .post-content { color: red; } </style> |
Можно добавить встроенные стили только на страницу поста с помощью хука wp_enqueue_scripts
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | add_action( 'wp_enqueue_scripts', 'mrp_wp_enqueue_inline_styles' ); function mrp_wp_enqueue_inline_styles(){ $styles = ' .related-post { padding: 15px 0; border-top: 1px solid #cdcdcd; margin-top: 15px; } '; $key = 'mrp-styles'; if(is_single( )){ wp_register_style( $key, false, array(), true, true ); wp_add_inline_style( $key, $styles ); wp_enqueue_style( $key ); } } |
Такой подход был использован при создании плагина подобных постов.
Добавление ссылки на стили для арабского языка
Для указания условий тега можно использовать функцию wp_style_add_data( $handle, $key, $value )
. Она добавляет данные для файлов стилей подключаемых с помощью wp_enqueue_style(). Чаще всего используется для подключения стилей для IE. Однако намного полезнее будет ее использование на сайте, который имеет также арабскую версию, в которой направление письменности идет справа налево.
1 2 3 4 5 6 | add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' ); function mytheme_enqueue_scripts() { // Подключаем специальные стили для арабской версии wp_enqueue_style( 'themeslug-style', get_stylesheet_uri().'/css/style-rtl.css' ); wp_style_add_data( 'themeslug-style', 'rtl', 'replace' ); } |
Кстати, заменить стили для арабского языка можно с помощью ресурса CSSJanus.
Добавление инлайн-скрипта
Использование хуков
В случае встраивания инлайн-скрипта можно использовать хук wp_head
:
1 2 3 4 5 6 7 8 | add_action( 'wp_head', 'mytheme_add_inline_script' ); function mytheme_add_inline_script() { echo '<script>' . PHP_EOL; echo "console.log(location.href)" . PHP_EOL; echo '</script>' . PHP_EOL; } |
В этом случае скрипт будет добавлен в блоке head
. Нужно понимать, что для работы с элементами страницы вам понадобится обработка события window.onload
или DOMContentLoaded.
Если вас устраивает подключение скрипта в верхней части страницы, используйте хук wp_print_scripts. Для подключения скрипта в админке можно использовать хук admin_print_scripts.
Для работы с элементами страницы лучше использовать вариант инлайн-скрипта в футере:
1 2 3 4 5 6 7 8 9 10 | add_action( 'wp_print_footer_scripts', function () { ?> <script> (function myFunction() { /* your code here */ [...document.getElementsByTagName('p')].forEach(item => item.style.padding = '15px') })(); </script> <?php } ); |
Здесь использован хук wp_print_footer_scripts. Кроме него можно использовать хук wp_footer для вывода скрипта перед закрывающим тегом </body>
.
Вы можете использовать в инлайн-скрипте подключение модуля, например.
1 2 3 4 5 6 7 8 9 10 11 | <?php function my_theme_footer_script() { ?> <script type="module"> // ваш код console.log('This is module'); </script>'; <?php } add_action( 'wp_footer', 'my_theme_footer_script' ); |
Использование функции wp_add_inline_script()
Функция wp_add_inline_script()
подразумевает, что мы работаем со скриптом, поставленными в очередь с помощью хука wp_enqueue_scripts
, Он использует тот же дескриптор, или id
, с которым был добавлен другой, основной скрипт.
Например, при добавлении настроек в тему WordPress при использовании основного скрипта с кодом Swiper Slider, опции для слайдера мы указываем в инлайн-скрипте, который подключается после основного.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function techex_scripts() { wp_enqueue_style( 'techex-style', get_stylesheet_uri(), array(), _S_VERSION ); //...ваш код .... if(is_front_page()){ wp_enqueue_style( 'techex-swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css', array(), _S_VERSION ); wp_enqueue_script( 'techex-swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js', array(), _S_VERSION, true ); wp_add_inline_script( 'techex-swiper', "const swiper = new Swiper('.home-slider', { loop: true, centeredSlides: true, pagination: { el: '.swiper-pagination', clickable: true, }, });" ); } } add_action( 'wp_enqueue_scripts', 'techex_scripts' ); |
Кроме того, с помощью функции wp_add_inline_script()
можно указать ajax URL для нашего скрипта и дополнительные параметры.
В случае, если инлайн-скрипт должен содержать данные, которые выводятся ДО основного скрипта, нужно в функцию wp_add_inline_script()
добавить второй параметр 'before'
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_script( 'color_scripts', get_stylesheet_directory_uri() .'/color_scripts.js' ); // добавим произвольный код wp_add_inline_script( 'color_scripts', 'var color1 = "red"; var color2 = "blue";', 'before' ); } ); /* Получим в HTML коде <script id="color_scripts-js-before"> var color1 = "#cdcdcd"; var color2 = "#f34a56"; </script> <script src="https://my-wp.local/wp-content/themes/mytheme/color_scripts.js" id="color_scripts-js"></script> */ |
Встраивание скриптов через wp_localize_script()
В том случае, если вам нужно использовать в скрипте только переменные, то для встраивания подойдет функция wp_localize_script()
. Эта функция предназначена для локализации переменных JavaScript с целью использования в языковых переводах. Однако многие разработчики применяют ее для добавления инлайн-скриптов.
Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function custom_enqueue_scripts() { wp_enqueue_script('custom_script', get_template_directory_uri() .'/js/custom_script.js', array(), '1.0', true); $varArray = array( 'color' => __('#356789', 'mytheme'), 'title' => __('Children Psyhology', 'mytheme'), 'type' => __('course', 'mytheme'), ); wp_localize_script('custom_script', 'mytheme', $varArray); } add_action('wp_enqueue_scripts', 'custom_enqueue_scripts'); |
На html-странице увидим такой код:
1 2 3 4 | <script id="custom_script-js-extra"> var mytheme = {"color":"#356789","title":"Children Psyhology","type":"course"}; </script> <script src="https://my-wp.local/wp-content/themes/mytheme/js/custom_script.js?ver=1.0" id="custom_script-js"></script> |
Единственный недостаток этого способа заключается в том, что таким образом вы сможете добавить только JavaScript-переменные. С другими конструкциями - условными выражениями, циклами, функциями и т.п., — это будет невозможно сделать.
Заключение
На самом деле, способов подключения инлайн-стилей или скриптов не так уж и много. В основном они отличаются использованием хуков, которые помещают скрипт в верхней или нижней части html-страницы. Что касается стилей, то их место - в блоке head
.