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

wpscripts-1-2086534

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

Предназначен для портативных устройств (как правило, небольшой экран, ограниченная пропускная способность).

print

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

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(), которая выводит путь до текущей папки с шаблоном. Получается так:

Читайте также: