WordPress подключить CSS и JS скрипты
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 означает, что скрипт следует подключать в теге <head>, если установить его в true, то скрипт будет подключен перед закрывающим тегом </body>.
Почему мы функцию добавили в хук wp_enqueue_scripts? Это сделано для того, чтобы скрипты подгружались только в пользовательской части сайта подробно об SSL сертификатах. Если нужно подключить их в админке, то используем хук 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(), которая выводит путь до текущей папки с шаблоном. Получается так:
<link rel="stylesheet" href="<?=get_template_directory_uri();?>/css/mystyle.css">
Этот способ удобен при натягивании верстки. Достаточно просто загрузить все файлы в папку с темой, и проставить в подключениях скриптов и стилей строчку <?=get_template_directory_uri();?>/
В повседневной работе часто приходится сталкиваться с переносом сайта на Wordpress с локального или тестового домена на основной. Для этого необходимо не только скопировать файлы, базу данных и поменять настройки в конфигурационном файле, но и сделать ряд SQL-запросов, чтобы прописать Читать далее
Самый оптимальный и простой код файла robots.txt для вашего сайта на WordPress, который подойдет для всех поисковиков. Этот вариант использую на данном сайте. Не забудьте заменить it-blog.ru на адрес вашего сайта. Содержание файла robots.txt для WordPress Если вы используете HTTPS, Читать далее
Произвольные типы записей позволяют разделить посты не только по категориям, но и по их типу с собственными названиями и рубриками. Это что-то типо инфоблока, как в CMS 1С-Битрикс. По умолчанию в WordPress есть возможность добавлять записи и их рубрики. К Читать далее
Произвольные поля или как их еще называют кастомные или доп. поля в WordPress очень нужная вещь, особенно при создании например сайта-каталога. С помощью доп. полей можно добавить к записям возможность указывать например цену или цвет, а затем выводить сохраненное значение Читать далее
Когда я создавал свой первый плагин, то оказалось, что в сети очень мало информации по этому вопросу. С трудом удалось найти даже основы. Надеюсь эта статья поможет вам научиться писать различные плагины для WordPress. Наверняка вы уже пользовались и знаете, Читать далее
По большей части публикации про применение Ajax в WordPress сложные для понимания, особенно если вы мало знакомы с этой технологией. В этой статье я покажу, как на самом деле просто использовать Ajax в публичной части сайта. Ajax запросы в WordPress Читать далее
Кнопка "Показать ещё" и бесконечный скроллинг - это по сути постраничная навигация, которая подгружает следующую страницу с постами без перезагрузки страницы. Подобные примеры часто можно встретить в лентах соц. сетей. В этом примере показана реализация кнопки "Показать ещё" и бесконечного Читать далее
Добавить комментарий