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

Оформление сайта на 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