20

Надо ли подключать файл стилей style.css при разработке собственной темы или это происходит автоматически?

3 ответа 3

15
+2050

Ответ разный в тех случаях, когда мы создаём дочернюю тему от существующей или свою главную тему с нуля.

Для создания дочерней темы требуется всего один файл 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();

if ( have_posts() ) :
    /* Главный цикл */
    while ( have_posts() ) : the_post();
        the_title( '<h1 class="entry-title">', '</h1>' );
        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 и находим там такую строчку:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Вон оно - подключение файла стилей style.css! Теперь понятно, что происходит и зачем в стандартной twentesenteen вручную подключают файл стилей.

Ответ на вопрос

Файл стилей стоит подключать вручную в functions.php своей главной темы, если:

  1. Мы создаём собственный header.php (что делают в 99% случаев)
  2. В своём header.php мы не добавляем строку <link rel="stylesheet" (см. выше)

Подключение файла стилей темы в 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' );

Это минимальный текст funсtions.php для запуска своего файла стилей.

Но и этого мало! Необходим минимальный код в header.php:

<?php
wp_head();

Итак, если мы создаём тему с нуля, со своим файлом header.php, нам придётся подключить файл стилей style.css вручную:

  • либо в functions.php через enqueue_style()
  • либо в header.php через <link rel="stylesheet"....

UPDATE

Сломать подключение стилей можно и в дочерней теме. Для этого надо закомментировать вызов wp_head() в header.php дочерней темы. Обычно header.php копируют из основной темы, так что wp_head() там присутствует.

5
  • Итак, вывод не верный ;). wp_head() и wp_footer() нужно использовать ВСЕГДА (там не только подключение стилей,и без них половину плагинов не будет работать, а половину коряво), а вот functions.php совершено не обязателен. А в родных темах задаётся идентификатор, который используется далее.
    – SeVlad
    8 июл 2017 в 18:40
  • Вывод неверный. Именно потому, что могут возникнуть проблемы с header, вордпрессовцы вставляют enqueue_style в functions.php 8 июл 2017 в 18:42
  • Ну это побочный эффект. Хотя я не исключаю и такую благородную цель. SO не удобен для подобного рода обсуждений. Лучше о таких вещах на форуме говориить
    – SeVlad
    8 июл 2017 в 18:44
  • Конкурс хорошо зашёл.
    – Nick Volynkin
    30 окт 2017 в 9:57
  • Да, привлек внимание к вопросу. Спасибо. 30 окт 2017 в 9:58
3

Надо ли подключать файл стилей style.css при разработке собственной темы или это происходит автоматически?

В теме обязательно нужно использовать wp_head() и wp_footer() тогда будет автоматически подключиться не только style.css, а и все скрипты и прочее. Без этих функций множество плагинов не будут работать или будут вызывать проблемы.

А без style.css тема просто не активируется.

3
  • 1
    Не обязательно. Ни то, ни другое. Можно подключить скрипт в functions.php, что и сделано в стандартной теме twentyseventeen. 8 июл 2017 в 19:06
  • Обязательно, если не хочешь нарваться на глюки и не понимание почему что-то не работает. А на дефолную в данном случае кивать не нужно - можешь удалить подключение и НИЧЕГО не измениться. (ЗЫ. во вчерашнем чате я тебе ответил)
    – SeVlad
    8 июл 2017 в 19:09
  • ru.wordpress.org/support/topic/… см ответ Сергея (разрабочик ВП, если ты не в курсе). Или вот ru.wordpress.org/support/topic/… не просто так спрашивает.. И отсутствие этих функций - самая частая причина проблема у самописателей тем. Или вот ru.wordpress.org/support/topic/стили-и-скрипты-не-загружаются/…
    – SeVlad
    8 июл 2017 в 19:14
2

Здравствуйте. отвечаем на вопрос "Как правильно подключить файл стилей в своей теме WordPress?" Свои стили шаблона можно и в head - /head , но правилом хорошего тона сейчас уже считается лучше добавлять свои стили в файл функций functions.php, а вот файл стилей с описанием вашей темы обязательно добавлять в корневую папку с своей темой. вордпресс автоматически этот файл подхватит.

Итак отвечаем на заданный вопрос "Надо ли подключать файл стилей style.css при разработке собственной темы или это происходит автоматически?" Тут надо разграничить о каких стилях мы с вами говорим. Есть файл style.css с описанием вашей темы. Описание о самой теме, об авторе и т.д. этот файл обязателен и он должен быть в корневой папке темы и этот файл подключается АВТОМАТИЧЕСКИ. Этот файл необходим для активации и распознования вашей темы вордпрессом. Но и тут есть одно "но", если вы в head - /head не укажете wp_head(); функцию то автоподключения не будет "или в футере надо добавить функцию wp_footer(); " точно сейчас не помню, но лучше подключать обе функции. Можно сразу туда же добавить свои стили если хочется, но будет лучше создать для стилей отдельный файл.

Файл ваших стилей необходимо подключать в ручную, самому в head - /head либо в файл function.php.

здесь что нужно, а также без чего можно обойтись. "кратко" : https://masalkin.name/struktura-wordpress-shablona-ee-dolzhen-znat-kazhdy-j/

4
  • Это отдельный ответ? или измененная версия ru.stackoverflow.com/a/737727/177221?
    – user177221
    30 окт 2017 в 9:25
  • @Pashapash Ну, отдельный вроде в заголовке один вопрос, а в теме другой. Мне показалось что это разные вопросы хотя и похожи. Обьединить? 30 окт 2017 в 9:27
  • 1
    Да, стоит оставить более полный ответ
    – user177221
    30 окт 2017 в 9:28
  • Этот ответ выглядит как компиляция и перефразирование ответов из этой же темы, так и должно быть?
    – Noneme
    31 окт 2017 в 7:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.