Как правильно подключить файл стилей в своей теме 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( '
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() там присутствует.
Ответ
Ответ разный в тех случаях, когда мы создаём дочернюю тему от существующей или свою главную тему с нуля.
Для создания дочерней темы требуется всего один файл 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 endifget_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() там присутствует.
