Как правильно подключить файл стилей в своей теме WordPress?

#wordpress

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

Ответы

Ответ 1

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

Для создания дочерней темы требуется всего один файл 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 тоже ужмём до самого логически минимального содержимого, с чего начинают
разработку новых тем - шапка, подвал и главный цикл:

', '' );
        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 и находим
там такую строчку:




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

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

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


Мы создаём собственный header.php (что делают в 99% случаев)
В своём header.php мы не добавляем строку 
Ответ 2

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


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

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


Ответ 3

Здравствуйте. отвечаем на вопрос "Как правильно подключить файл стилей в своей теме
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/