12 февраля 2020 WordPress
Для подключения дополнительных стилей и скриптов в шаблоне WordPress можно воспользоваться двумя способами. Один правильный, другой не очень. Лично мне нравится тот, что не совсем правильный, так как с ним можно быстрее и удобнее натянуть верстку на CMS, ну и затем проще подключать новые скрипты и стили.
Правильный способ
С помощью функций wp_enqueue_script()
и wp_enqueue_style()
.
Для того, чтобы подключить новый скрипт, в файле functions.php из корня текущей темы пишем:
function it-blog_myscript() { wp_enqueue_script('myscript', get_template_directory_uri() . '/js/myscript.js', '', '1.0', false); // Другие скрипты... } add_action('wp_enqueue_scripts', 'it-blog_myscript');
Где get_template_directory_uri()
— путь до папки с шаблоном, 'myscript'
— уникальный идентификатор скрипта, 1.0 — версия файла и myscript.js — имя скрипта в папке js. Последний параметр false
означает, что скрипт следует подключать в теге , если установить его в true, то скрипт будет подключен перед закрывающим тегом .
Почему мы функцию добавили в хук wp_enqueue_scripts
? Это сделано для того, чтобы скрипты подгружались только в пользовательской части сайта. Если нужно подключить их в админке, то используем хук admin_enqueue_scripts
.
Подключаем стили похожим способом:
function it-blog_myscript() { wp_enqueue_style('mystyle', get_template_directory_uri() . '/css/mystyle.css', array(), '12022020', 'screen'); // Другие стили... } add_action('wp_enqueue_scripts', 'it-blog_myscript');
Где get_template_directory_uri()
— путь до папки с шаблоном, 'mystyle'
— это уникальный идентификатор стилей, 12022020 — версия файла и mystyle.css — имя файла стилей в папке css. Последний параметр устанавливает тип устройства для которого будет работать текущий стиль.
Полный список устройств:
all Подходит для всех устройств.
braille
Предназначен для устройств тактильной обратной связи Брайля.
embossed
Предназначен для страничных принтеров Брайля.
handheld
Предназначен для портативных устройств (как правило, небольшой экран, ограниченная пропускная способность).
Предназначен для постраничного материала и документов, просматриваемых на экране в режиме предварительного просмотра. Пожалуйста, обратитесь к разделу о выгружаемых носителях для получения информации о проблемах форматирования, которые являются специфическими для выгружаемых носителей.
projection
Предназначен для проектируемых презентаций, например проекторов. Пожалуйста, обратитесь к разделу о выгружаемых носителях для получения информации о проблемах форматирования, которые являются специфическими для выгружаемых носителей.
screen
Предназначен в основном для цветных компьютерных экранов.
speech
Предназначен для речевых синтезаторов. Примечание. Для этой цели в CSS2 был похожий тип мультимедиа, называемый «слуховой». См. Приложение на слуховых таблицах стилей для деталей.
tty
Предназначен для носителей с использованием сетки символов с фиксированным шагом (например, телетайпы, терминалы или портативные устройства с ограниченными возможностями отображения). Авторы не должны использовать пиксельные единицы с типом носителя «tty».
tv
Предназначен для телевизионных устройств (низкое разрешение, цветные экраны, экран с ограниченной прокруткой, звук доступен).
Иногда требуется подключить стили, например только для панели администрирования, для этого оборачиваем подключение в функцию:
function it-blog_admin_styles() { wp_enqueue_style('it-blog_style', get_stylesheet_directory_uri() . '/css/it-blog-style.css', array(), '12022020', 'screen'); } add_action('admin_enqueue_scripts', 'it-blog_admin_styles');
Подключение без функций
Этот способ считается неправильным, но чаще всего я использую его. Все подключения скриптов и стилей находятся в файлах header.php и footer.php. Вам достаточно прописать путь до них вручную как в обычном html. Для удобства можно проставить функцию get_template_directory_uri()
, которая выводит путь до текущей папки с шаблоном. Получается так: