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();?>/
Самый оптимальный и простой код файла robots.txt для вашего сайта на WordPress, который подойдет для всех поисковиков. Этот вариант использую на данном сайте. Не забудьте заменить it-blog.ru на адрес вашего сайта. Если вы используете HTTPS, в директиве Host: нужно указать Читать далее
WPGrabber это парсер для WordPress, с помощью которого можно скачать и сохранить записи с абсолютно любого доступного веб-сайта. Обычно его применяют для парсинга каталога товаров или новостей. Плагин может полностью автоматизировать добавление контента на сайт. Можно настроить его автоматический запуск Читать далее
WooCommerce несомненно является лучшим бесплатным решением для создания интернет-магазина на WordPress. Кроме того, это одна из лучших платформ электронной коммерции с открытым исходным кодом. Цифры говорят сами за себя: более 4 миллионов установок, рейтинг 4.5 (на основе более чем 3000 Читать далее
Это полное пошаговое руководство для начинающих, которое поможет вам создать свой первый сайт на WordPress на любом веб-хостинге или локальном сервере. Почему WordPress? WordPress является самой популярной платформой для создания веб-сайтов. На сегодняшний день её используют 59% всех веб-сайтов созданных Читать далее
Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или Читать далее
Виджеты используются для добавления контента на страницу WordPress без изменения шаблонов тем. Боковая панель является областью по умолчанию для добавления содержимого виджетов. Также вы можете зарегистрировать собственную область виджетов и добавить в нее виджеты. WordPress содержит некоторые виджеты по умолчанию Читать далее
Ваш сайт WordPress может быть медленным по многим различным причинам: забитая база данных, работающая в фоновом режиме, является одним из них. Профессиональный рабочий процесс поддержки WordPress включает в себя регулярную оптимизацию базы данных, в ходе которой вы избавляетесь от ненужных Читать далее
Добавить комментарий