Как известно, стили в файле темы WordPress подключаются в блоке <head>, за который отвечает файл header.php и функция wp_head(), которая размещается в нем. Что касается подключения скриптов, то здесь у вас есть выбор - можно сделать это также в блоке <head> или перед закрывающимся тегом </body>.
Подключение стилей в тему или плагин WordPress
По умолчанию в тему подключается файл style.css, который находится в корне папки с темой и несет инфо
рмацию о ней в виде комментариев. Однако, этого файла бывает мало, и тогда приходится подключать стили из папки, которую традиционно называют css. Например, вы хотите подключить стили из Bootstrap 4 и иконочные шрифты FontAwesome версии 5.15.1. Тогда вам нужно будет записать такие строки:
|
1 2 |
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css','', '4.5.3' ); wp_enqueue_style ('font-awesome', get_template_directory_uri() . '/css/fontawesome/all.min.css','', '5.15.1'); |
Общий вид функции wp_enqueue_style() для подключения стилей имеет такой вид:
|
1 |
wp_enqueue_style( $handle, $src, $deps, $ver, $media ); |
При подключении стилевого файла вы указываете:
- в качестве параметра $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, запишите такую строку:
1wp_enqueue_style ('font-awesome', get_template_directory_uri() . '/css/fontawesome/all.min.css', array('bootstrap'), '5.15.1');
Если зависимость вам не важна, можно оставить пустые кавычки''илиarray(). - в качестве параметра $ver указывается строка с номером версии стилей. Она будет добавлена в конец ссылки на файл, например
?ver=4.5.3для bootstrap.css. Если не указать (по умолчанию установленоfalse), будет использована версия WordPress. Если установитьnull, то версия указана не будет. - параметр $media указывает тип устройства, для которого предназначен css-файл. Может быть:
all,screen,handheld,projection,printили(max-width:480px)и другие. По умолчанию установлено значениеall, поэтому чаще всего этот параметр просто опускается.
В результате подключения стилей в теме при просмотре кода страницы (CTRL+U) вы увидите примерно следующее:
Вместо somesite.com должно быть доменное имя вашего сайта.
Указание пути к файлам темы/плагина
Любой из приведенных выше вариантов указания пути к папке темы/плагина можно заменить константой, объявив ее в верхней части файла functions.php вашей темы или основного файла плагина примерно таким образом:
|
1 2 3 |
define('MYTHEME_TEMPLATE_URI', get_template_directory_uri()); // для основной темы define('MYTHEME_TEMPLATE_URI', get_stylesheet_directory_uri()); // для основной/дочерней темы define('MYPLUGIN_TEMPLATE_URI', plugin_dir_url( __FILE__ )); // для плагина |
Затем вы можете использовать эту константу в любых функциях своей темы/плагина.
Подключение шрифтов сервиса GoogleFonts
Сервис GoogleFonts периодически меняет правила подключения шрифтов, усовершенствуя их. Например, сейчас уже можно загружать переменные шрифты, отсортировав их среди всех с помощью флажка "Show only variable fonts". Если же вам это не принципиально, то вы выбираете подходящий шрифт, варианты начертания, а затем копируете ссылку, расположенную справа внизу.
Точнее, вам нужна будет не вся ссылка, а содержимое атрибута href. Именно его вам необходимо добавить в качестве параметра $src в функцию wp_enqueue_style(), например, так:
|
1 |
wp_enqueue_style( 'google-fonts', "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap", array(), null ); |
В файле header.php до вызова функции wp_head() вам нужно будет добавить еще строку:
|
1 |
<link rel="preconnect" href="https://fonts.gstatic.com"> |
Подключение стилей в дочернюю тему
Наверное, вы знаете, что за дочернюю тему отвечает файл style.css, в котором вы указываете, какая тема является родительской:
|
1 2 3 4 5 6 7 8 9 10 |
/* Theme Name: Astra-child Template: astra Theme URI: https://somesite.com/ Author: Name Lastname Author URI: http://differentsite.com/ Description: Дочерняя тема для astra Tags: какие-то особенности вашей темы Version: 1.1 */ |
Кроме того, в дочерней теме у вас также будет файл functions.php, в котором вы разместите код подключения стилей вашей родительской и дочерней тем, а также любых js-файлов. Например, так:
|
1 2 3 4 5 6 7 8 9 |
function child_theme_styles_scripts() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style('child-style', get_stylesheet_directory() . '/style.css', array('parent-style') ); wp_enqueue_script('some-widget', 'https://somewidget.com/build/js/new-widget.js?t=sd4eddf9', array(), null, true ); } add_action( 'wp_enqueue_scripts', 'child_theme_styles_scripts' ); |
И, забегая немного вперед, при необходимости подключить какой-то внешний скрипт с атрибутом type="module" вы можете воспользоваться таким дополнительным кодом:
|
1 2 3 4 5 6 7 8 |
function add_type_module_to_widget($tag, $handle, $src) { if ('some-widget' === $handle) { // Меняем обычный <script> на <script type="module"> $tag = '<script type="module" src="' . esc_url($src) . '"></script>' . "\n"; } return $tag; } add_filter('script_loader_tag', 'add_type_module_to_widget', 10, 3); |
Либо также можно подключить такой скрипт инлайн-способом.
Подключение скриптов в тему или плагин WordPress
Подключение скриптов выполняется с помощью аналогичной функции wp_enqueue_script():
|
1 |
wp_enqueue_script('slick-slider', MYTHEME_TEMPLATE_URI.'/js/slick.min.js', array('jquery'),'1.8.1', true ); |
Общий вид функции:
|
1 |
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); |
В этой функции используются следующие параметры:
- $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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
define('MYTHEME_TEMPLATE_URI', get_template_directory_uri()); function mytheme_scripts() { wp_enqueue_style( 'bootstrap', MYTHEME_TEMPLATE_URI . '/css/bootstrap.min.css','', '4.5.3' ); wp_enqueue_style ('font-awesome', MYTHEME_TEMPLATE_URI . '/css/fontawesome/all.min.css','', '5.15.1'); if(is_front_page()){ wp_enqueue_style('animate', MYTHEME_TEMPLATE_URI.'/css/animate.min.css', '', '3.6.0' ); wp_enqueue_style('slick', MYTHEME_TEMPLATE_URI.'/css/slick.min.css' ); wp_enqueue_script('slick-slider', MYTHEME_TEMPLATE_URI.'/js/slick.min.js', array('jquery'),'1.8.1', true ); wp_enqueue_script('wow', MYTHEME_TEMPLATE_URI.'/js/wow.min.js', array('jquery'),'1.0.1', true ); wp_enqueue_script( 'animation-script', MYTHEME_TEMPLATE_URI . '/js/animation.js', array('jquery', 'slick-slider'), '4.1', true); } } add_action( 'wp_enqueue_scripts', 'mytheme_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
До сих пор речь шла о том, что мы подключаем стили и скрипты во фронтенд, т.е. ту часть сайта, которая видна пользователю. Однако, бывают ситуации, когда необходимо добавить стили и/или скрипты в админку. В этом случае они не будут видны на сайте, а подключаемый таким образом скрипт должен быть расположен в папке js плагина или темы.
Хук, который подключает скрипт, теперь называется admin_enqueue_scripts:
|
1 2 3 4 5 6 7 8 9 10 |
//для темы add_action( 'admin_enqueue_scripts', function(){ wp_enqueue_style( 'theme-admin', MYTHEME_TEMPLATE_URI . '/css/admin/admin.css','', '1.0' ); wp_enqueue_script( 'theme-admin-script', MYTHEME_TEMPLATE_URI. '/js/admin-script-jquery.js', array( 'jquery' ), '1.0'); }); //для плагина add_action( 'admin_enqueue_scripts', function(){ wp_enqueue_script( 'admin-script', plugins_url( '/js/admin-script-jquery.js', __FILE__ ), array( 'jquery' ), '1.0'); }); |
Если вам необходимо подключить скрипт для страницы авторизации, то можно использовать хук login_enqueue_scripts.
Регистрация и локализация скрипта. Использование данных при AJAX-запросе
Для того чтобы подключить скрипт, вполне достаточно использовать функцию wp_enqueue_script(). Однако, возможна ситуация, при которой вам необходимо будет отправлять/получать данные с помощью AJAX. Тогда, как минимум, вам понадобится указать путь к файлу admin-ajax.php, который необходим для отправки AJAX-данных и обработки их в функции в файле functions.php или файле плагина. Делается это как раз при регистрации скрипта.
Общий вид функции wp_register_script():
|
1 |
wp_register_script( $handle, $src, $deps, $ver, $in_footer ); |
В этой функции используются следующие параметры:
- $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()
|
1 |
wp_localize_script( $handle, $object_name, $l10n ); |
Параметры функции таковы:
- $handle - название скрипта, перед которым будут добавлены данные. Этот скрипт должен быть зарегистрирован заранее с помощью функции
wp_register_script(). - $object_name - название (имя) Javascript объекта, который будет содержать нужные вам данные. Это название должно быть уникальным, чтобы не вызвать конфликтов с другими скриптамии. В нем нельзя использовать тире
-, можно - латиницу в нижнем и верхнем регистре, нижнее подчеркивание_. - $l10n(массив) - Данные перевода. Данные могут быть как в одномерном, так и в многомерном массиве. Именно этот параметр может быть использован не для перевода, а для добавления нужных вам данных, которые станут переменными объекта $object_name.
Давайте посмотрим, как можно использовать все функции для регистрации скрипта с отправкой AJAX-данных:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function ajax_login_function(){ wp_register_script('ajax-login', get_template_directory_uri() . '/js/ajax-login-script.min.js', array('jquery') ); wp_enqueue_script('ajax-login'); wp_localize_script( 'ajax-login', 'ajax_login_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'redirecturl' => home_url().'/personal-office/', 'loadingmessage' => __('Отправка информации...', 'theme-name') )); } if (!is_user_logged_in()) { add_action('init', 'ajax_login_function'); } |
В результате работы этого примера мы увидим при просмотре кода документа такие строки:
|
1 2 3 4 5 |
<script id='ajax-login-js-extra'> var ajax_login_object = {"ajaxurl":"http:\/\/your-site.com\/wp-admin\/admin-ajax.php", "redirecturl":"http:\/\/your-site.com\/personal-office\/", "loadingmessage":"\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438..."}; </script> |
В JavaScript-коде вы потом сможете использовать объект ajax_login_object для отправки данных на сервер:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
jQuery(document).ready(function ($) { $('form#login').on('submit', function (e) { $('form#login p.status').show().text(ajax_login_object.loadingmessage); $.ajax({ type: 'POST', dataType: 'json', url: ajax_login_object.ajaxurl, data: { 'action': 'ajaxlogin', 'username': $('form#login #username').val(), 'password': $('form#login #password').val(), }, success: function (data) { $('form#login p.status').fadeIn(300).text(data.message); if (data.loggedin == true) { document.location.href = ajax_login_object.redirecturl; } } }); e.preventDefault(); }); }); |
О том, как правильно писать скрипт на jQuery, читайте ниже.
Убираем атрибуты type="text/css" и type="text/javascript"
В стандартах HTML4 и XHTML в теге <link> необходим был атрибут type="text/css" , а в теге <script> - атрибут type="text/javascript" - они видны на скриншоте.
Стандарт HTML5 уже не требует этих атрибутов. Даже больше - W3C-валидатор "ругается", встречая их в коде страницы.
Поэтому, если ваша тема поддерживает стандарт HTML5, а это видно по наличию короткого
|
1 |
<!DOCTYPE html> |
в начале разметки, необходимо убрать атрибуты type="text/css" и type="text/javascript". Сделать это нужно в файле functions.php вашей темы, добавив в массиве поддерживаемых значений для html5 в функции add_theme_support() 'script' и'style' к тому списку, который там, скорей всего, уже существует:
|
1 2 3 4 5 6 7 8 |
add_theme_support( 'html5', array( 'search-form', 'comment-list', 'gallery', ..., 'script', 'style' ) ); |
Теперь со тегами стилей и скриптов все в порядке:
Стили и скрипты без атрибута type
Подключение скриптов 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 вместо $. Например, такой код:
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Привычный jQuery */ $('.fa-chevron-down').on('click', function() { $(this).parent().next().hide(); $(this).toggleClass('.fa-chevron-up'); }) /* Режим совместимости */ jQuery('.fa-chevron-down').on('click', function() { jQuery(this).parent().next().hide(); jQuery(this).toggleClass('.fa-chevron-up'); }); |
Если ваш код состоит не из 2-3-х строк, то, скорей всего, замена знака '$' вас вряд ли устроит. Поэтому рассмотрим варианты замены jQuery на $.
Замены jQuery на $ в скриптах WordPress
Вы можете использовать формат немедленно вызываемых функций в JavaScript (IIFE) для того, чтобы вызвать функцию с параметром в виде $, передав в нее jQuery. Делать это нужно, если вы загружаете скрипт в футере, используя такой код:
|
1 2 3 4 5 6 7 8 |
// подключаем скрипт в футере (function($) { $('.nav-links').on('click', function() { $('.active').removeClass('active'); $(this).addClass('active'); }) })( jQuery ); |
Если вы хотите добавить свой скрипт в шапке сайта (что, кстати, делать не рекомендуется) — можно обернуть все в document-ready функцию, передавая $ по ходу дела:
|
1 2 3 4 5 6 7 8 9 |
// в шапке jQuery(document).ready(function( $ ) { $('.nav-links').on('click', function() { $('.active').removeClass('active'); $(this).addClass('active'); }) }); |
Можно также при использовании хука wp_enquene_scripts() записать строку, которая добавляет значение $ = jQuery;с помощью функции wp_add_inline_script():
|
1 2 3 |
add_action ( 'wp_enquene_scripts', function() { wp_add_inline_script( 'jquery-core', '$ = jQuery;' ); } ); |
Этот способ добавит такие строки после подключенной библиотеки jQuery:
|
1 2 3 |
<script id='jquery-core-js-after'> $ = jQuery; </script> |
Удаление стилей и скриптов
Бывают ситуации, когда вам нужно удалить, а не добавить стиль или скрипт с одной или нескольких страниц вашего сайта. Как это сделать, читайте в статье "Удаляем стили и скрипты из темы WordPress"
Дякую автору, допомогла стаття