РекламаСамый популярный VDS-хостинг в России, от 199 рублей в месяц!
Перенесите к нам свои сайты от другого хостинг-провайдера и вы получите: скидку 40% на VDS, бесплатный пакет администрирования на месяц и секретный бонус после переезда.

Как подключить стили WordPress

 6 августа 2017      
 HTML & CSS / WordPress / Вебмастеру      
 Комментариев еще нет      
 3027

Оформление сайта на WordPress осуществляется с помощью стилей. Существует несколько вариантов подключения файла(ов) со стилями к HTML документу. В WordPress самым «правильным» способом (на момент написания статьи) является подключение в файле functions.php. Это решение используется в темах поставляемых вместе с WordPress по-умолчанию, например Twenty Fifteen.

Стили Вордпресс по-умолчанию

Для меня остается загадкой, почему обязательный для любой темы WordPress файл стилей style.css не подключается к этой самой теме (шаблону) автоматически. И необходимо прописать подключение файла таблицы CSS Вордпресс вручную.

В этой статье я расскажу как правильно в WordPress подключить CSS стили.

Таблица стилей WordPress

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

function theme_name_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Дополнительные CSS WordPress

Если вам необходимо подключить к теме несколько файлов со стилями, например вы используете сброс CSS стилей в файле reset.css, то тогда необходимый код в файле functions.php будет выглядеть так:

function theme_name_scripts() {
wp_enqueue_style( 'reset-css', get_template_directory_uri() . '/reset.css' );
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Пример приведен для случая, когда файл reset.css лежит в корне вашей темы рядом с файлом style.css.

Устаревшие методы подключения файла CSS стилей

Раньше файл стилей в WordPress можно было подключить к теме добавив следующий код (пример для HTML5) в секцию HEAD или перед закрывающим тегом BODY:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Но теперь этот способ считается устаревшим.

Полезные ссылки

При написании статьи были использованы следующие источники:

  1. https://wp-kama.ru/function/get_stylesheet_uri
Поделись этой страницей с друзьями!

Прочтите это обязательно

Wrike

Цена бездействия: во что обходится нежелание улучшать организацию работы

Инфографику предоставила Wrike - Система Управления Задачами И Проектами ...

Полезное wrike система управления задачами и проектами система управления проектами Далее
NGINX https Redirect

NGINX редирект на https

Если вы используете NGINX в качестве проксирующего сервера, то ht ...

Вебмастеру https ispmanager nginx redirect Далее

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 66 | 0,119 сек. | 8.52 МБ
доступность сайта