Как правильно подключить файл стилей в своей теме WordPress?
1,00
р.
р.
Надо ли подключать файл стилей style.css при разработке собственной темы или это происходит автоматически?
Ответ Ответ разный в тех случаях, когда мы создаём дочернюю тему от существующей или свою главную тему с нуля. Для создания дочерней темы требуется всего один файл style.css в подпапке /wp-content/themes/моя-дочерняя-тема. Он подключается автоматически всегда - это делает главная тема, на которую ссылается ваша дочерняя. Дело обстоит несколько сложнее, когда мы создаём новую основную тему WordPress с нуля. Для функционирования такой темы требуется 2 файла - style.css и index.php. На первый взгляд, style.css должен подключаться автоматически. Однако, если мы заглянем в functions.php стандартной темы twentyseventeen, мы увидим следующий код: /** * Enqueue scripts and styles. */ function twentyseventeen_scripts() { // ... // Theme stylesheet. wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() ) // ... } Вот это да! Разработчики WordPress в своей стандартной теме вручную подключают файл стилей style.css. Это ещё зачем? Попробуем разобраться. Создадим свою главную тему под именем, скажем, zero. Создаём папку /wp-content/themes/zero и в ней два файла. Наш style.css содержит минимально требуемый контент в комментариях и один стиль - лишь бы увидеть, что файл стилей подключен. /* Theme Name: Zero Theme URI: https://kagg.eu/ Author: KAGG Design Author URI: https://kagg.eu/ Description: Создание темы с нуля Version: 1.0 */ h1 { color: deeppink } index.php тоже ужмём до самого логически минимального содержимого, с чего начинают разработку новых тем - шапка, подвал и главный цикл: <?php get_header() <br>if ( have_posts() ) : /* Главный цикл */ while ( have_posts() ) : the_post() the_title( '
', '
' ) the_content() endwhile endif get_footer() Всё работает, файл стилей подключен (h1 в the_title() выводится в цвете deeppink):
Создаём файл header.php - свой заголовок. Пока пустой. Имеем же право? О, нет - куда подевался файл стилей? h1 в the_title() выводится траурным чёрным цветом.
Тот же самый эффект будет, если удалить вызов get_header() из нашего index.php. Разберём, что произошло. Функция get_header(), которую мы вызываем из нашего index.php, находится в /wp-includes/general-template.php и содержит строки: $templates[] = 'header.php' locate_template( $templates, true ) locate_template() находится в wp-includes/template.php. Вот её полный код: function locate_template($template_names, $load = false, $require_once = true ) { $located = '' foreach ( (array) $template_names as $template_name ) { if ( !$template_name ) continue if ( file_exists(STYLESHEETPATH . '/' . $template_name)) { $located = STYLESHEETPATH . '/' . $template_name break } elseif ( file_exists(TEMPLATEPATH . '/' . $template_name) ) { $located = TEMPLATEPATH . '/' . $template_name break } elseif ( file_exists( ABSPATH . WPINC . '/theme-compat/' . $template_name ) ) { $located = ABSPATH . WPINC . '/theme-compat/' . $template_name break } } if ( $load && '' != $located ) load_template( $located, $require_once ) return $located } Видим, что ядро WordPress пытается найти файл шаблона сначала в папке дочерней темы STYLESHEETPATH, потом в папке основной темы TEMPLATEPATH и, в последнюю очередь, в своей подпапке. Если у нас нет своего шаблона во вновь созданной теме zero и в index.php мы вызываем get_header(), то, согласно коду выше, ядро подхватит свой шаблон wp-includes/theme-compat/header.php. Смотрим в стандартный шаблон WordPress wp-includes/theme-compat/header.php и находим там такую строчку: " type="text/css" media="screen" /> Вон оно - подключение файла стилей style.css! Теперь понятно, что происходит и зачем в стандартной twentesenteen вручную подключают файл стилей. Ответ на вопрос Файл стилей стоит подключать вручную в functions.php своей главной темы, если: Мы создаём собственный header.php (что делают в 99% случаев) В своём header.php мы не добавляем строку Подключение файла стилей темы в functions.php выглядит таким образом: <?php /** * Enqueue scripts and styles. */ function my_scripts() { // Theme stylesheet. wp_enqueue_style( 'my-style', get_stylesheet_uri() ) } add_action( 'wp_enqueue_scripts', 'my_scripts' ) <br>Это минимальный текст funсtions.php для запуска своего файла стилей. Но и этого мало! Необходим минимальный код в header.php: <?php wp_head() <br>Итак, если мы создаём тему с нуля, со своим файлом header.php, нам придётся подключить файл стилей style.css вручную: либо в functions.php через enqueue_style() либо в header.php через UPDATE Сломать подключение стилей можно и в дочерней теме. Для этого надо закомментировать вызов wp_head() в header.php дочерней темы. Обычно header.php копируют из основной темы, так что wp_head() там присутствует.