Skip to main content

WordPress подключить CSS и JS скрипты

WordPress подключить CSS и JS скрипты

Для подключения дополнительных стилей и скриптов в шаблоне WordPress можно воспользоваться двумя способами. Один правильный, другой не очень. Лично мне нравится тот, что не совсем правильный, так как с ним можно быстрее и удобнее натянуть верстку на CMS, ну и затем проще подключать новые скрипты и стили.

Правильный способ

С помощью функций wp_enqueue_script() и wp_enqueue_style().

Для того, чтобы подключить новый скрипт, в файле functions.php из корня текущей темы пишем:

function progme_myscript() {
	wp_enqueue_script('myscript', get_template_directory_uri() . '/js/myscript.js', '', '1.0', false);
	
	// Другие скрипты...
}
 
add_action('wp_enqueue_scripts', 'progme_myscript');

Где get_template_directory_uri() — путь до папки с шаблоном, 'myscript' — уникальный идентификатор скрипта, 1.0 — версия файла и myscript.js — имя скрипта в папке js. Последний параметр false означает, что скрипт следует подключать в теге <head>, если установить его в true, то скрипт будет подключен перед закрывающим тегом </body>.

Почему мы функцию добавили в хук wp_enqueue_scripts? Это сделано для того, чтобы скрипты подгружались только в пользовательской части сайта. Если нужно подключить их в админке, то используем хук admin_enqueue_scripts.

Подключаем стили похожим способом:

function progme_myscript() {
	wp_enqueue_style('mystyle', get_template_directory_uri() . '/css/mystyle.css', array(), '12022020', 'screen');
	
	// Другие стили...
}
 
add_action('wp_enqueue_scripts', 'progme_myscript');

Где get_template_directory_uri() — путь до папки с шаблоном, 'mystyle' — это уникальный идентификатор стилей, 12022020 — версия файла и mystyle.css — имя файла стилей в папке css. Последний параметр устанавливает тип устройства для которого будет работать текущий стиль.

Полный список устройств:

all
Подходит для всех устройств.
braille
Предназначен для устройств тактильной обратной связи Брайля.
embossed
Предназначен для страничных принтеров Брайля.
handheld
Предназначен для портативных устройств (как правило, небольшой экран, ограниченная пропускная способность).
print
Предназначен для постраничного материала и документов, просматриваемых на экране в режиме предварительного просмотра. Пожалуйста, обратитесь к разделу о выгружаемых носителях для получения информации о проблемах форматирования, которые являются специфическими для выгружаемых носителей.
projection
Предназначен для проектируемых презентаций, например проекторов. Пожалуйста, обратитесь к разделу о выгружаемых носителях для получения информации о проблемах форматирования, которые являются специфическими для выгружаемых носителей.
screen
Предназначен в основном для цветных компьютерных экранов.
speech
Предназначен для речевых синтезаторов. Примечание. Для этой цели в CSS2 был похожий тип мультимедиа, называемый «слуховой». См. Приложение на слуховых таблицах стилей для деталей.
tty
Предназначен для носителей с использованием сетки символов с фиксированным шагом (например, телетайпы, терминалы или портативные устройства с ограниченными возможностями отображения). Авторы не должны использовать пиксельные единицы с типом носителя «tty».
tv
Предназначен для телевизионных устройств (низкое разрешение, цветные экраны, экран с ограниченной прокруткой, звук доступен).

Иногда требуется подключить стили, например только для панели администрирования, для этого оборачиваем подключение в функцию:

function progme_admin_styles() {
 	wp_enqueue_style('progme_style', get_stylesheet_directory_uri() . '/css/progme-style.css', array(), '12022020', 'screen');
}
 
add_action('admin_enqueue_scripts', 'progme_admin_styles');

Подключение без функций

Этот способ считается неправильным, но чаще всего я использую его. Все подключения скриптов и стилей находятся в файлах header.php и footer.php. Вам достаточно прописать путь до них вручную как в обычном html. Для удобства можно проставить функцию get_template_directory_uri(), которая выводит путь до текущей папки с шаблоном. Получается так:

<link rel="stylesheet" href="<?=get_template_directory_uri();?>/css/mystyle.css">

Этот способ удобен при натягивании верстки. Достаточно просто загрузить все файлы в папку с темой, и проставить в подключениях скриптов и стилей строчку <?=get_template_directory_uri();?>/

Похожие записи
Как создать виджет WordPress

Виджеты используются для добавления контента на страницу WordPress без изменения шаблонов тем. Боковая панель является... Читать далее

Оптимизация WordPress

Ваш сайт WordPress может быть медленным по многим различным причинам: забитая база данных, работающая в... Читать далее

Отправка сообщений в Telegram из Contact Form 7

Мы уже рассматривали как отправлять сообщения в телеграмм из обычного PHP скрипта и заказы из... Читать далее

Получить параметры сайта с помощью функции get_bloginfo() WordPress

Сегодня мы поговорим об одной нужной функции WordPress get_bloginfo(), которая возвращает параметры сайта и довольно... Читать далее

Что такое шорткод и как его использовать

Шорткоды - это PHP функции, которые можно вставлять в текст записи, страницы или другой таксономии... Читать далее

Contact Form 7 reCAPTCHA. Установка и настройка

Защитить от спама свои контактные формы на сайте WordPress, созданные в плагине Contact Form 7... Читать далее

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

*

code