Как подключить css к теме wordpress?

Question

[AndersDir]

У меня есть проблема. Хочу подключить css по-человечески к теме wordpress. В интернетах пишут, что в functions.php нужно прописать это:

function my_theme_load_resources() {
    wp_enqueue_style('my_theme_style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_load_resources');

И это совершенно не работает. Скоро я впаду в депрессию. Вроде все верно написано, "get_template_directory_uri() . '/style.css'" возвращает верную ссылку. А толку ноль.

Помогите, иначе котята пострадают.

Comments

[Сергей Делeу]

У меня сработало! Возможно, не подключен wp_head()?

Answer 1

[Mr Crabbz]

Посмотрите functions.php в стандартной теме twenty fifteen. Может натолкнёт на мысль:

<?php /**
 * Enqueue scripts and styles.
 *
 * @since Twenty Fifteen 1.0
 */
function twentyfifteen_scripts() {
	// Add custom fonts, used in the main stylesheet.
	wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

	// Add Genericons, used in the main stylesheet.
	wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

	// Load our main stylesheet.
	wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

	// Load the Internet Explorer specific stylesheet.
	wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
	wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

	// Load the Internet Explorer 7 specific stylesheet.
	wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
	wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

	wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	if ( is_singular() && wp_attachment_is_image() ) {
		wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
	}

	wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
	wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
		'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
		'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
	) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
?>

В частности, если у вас один файл со стилем, подключайте его как дефолтный:

// Load our main stylesheet.
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );

Таким образом будет подключен style.css в корне директории вашей темы.

Answer 2

[Леонид Сысолетин]

1. Та ли тема используется?
2. Есть ли в шаблоне записи вывод get_header()?
3. style.css из текущей темы должен вообще подключаться автоматически.

Comments

[AndersDir]

1) Да, тема та используется.
2) Шапку вывожу, да. Может быть в ней тоже нужно что-то прописать?
3) Увы.

[Егор Мальцев]

AndersDir: в шапке прописывается <?php wp_head();?> для вывода стилей

Answer 3

[Римский]

А у меня наоборот. Твоя конструкция сработала, а моя нет:

<?php
function register_styles() {
wp_register_style('my-bootstrap', get_template_directory_uri() .
'/libs/bootstrap/css/bootstrap.min.css');
wp_enqueue_style('my-bootstrap');

wp_register_style('style', get_template_directory_uri() .
'/style.css');
wp_enqueue_style('style');
}

add_action( 'wp_enqueue', 'register_styles' );

Answer 4

[Алексей Яцун]

Все элементарно просто в wordpress основной стиль подключается автоматически хотя во всех темах идет подстраховка
function my_theme_load_resources() {
wp_enqueue_style('my_theme_style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_load_resources');
В корне темы должен быть style.css он как раз таким образом и подключается

Answer 5

[Борис Черепанов]

Про правильное подключение стилей в wordpress написал статью "Правильное подключение JS и CSS в Wordpress"

Answer 6

[Creator]

Подключение файла syle.css, в принципе, разжевано уже давно и очень подробно, но у меня возник вопрос, ответ на которой я пока не нашел: style.css подключается автоматически в дочерней теме и подставляет в конце версию файла.
style.css?ver=3.3.7
При внесении изменений в таблицу стилей - версия не обновляется и, соответственно, не отображается. Учитывая то, что установлен кеширующий плагин и CDN - приходится пересоздавать кеш, что очень неудобно.
Решил подключить style.css следующим образом:

add_action( 'wp_enqueue_scripts', 'add_styles' );
function add_styles()
{
     $css_file = get_stylesheet_directory() . '/style.css';
     wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/style.css', NULL, filemtime($css_file) );
}

Все стало нормально, но потом я заметил, что подключается два инстанса style.css, что не есть хорошо.
Отсюда вопрос: как подкрутить версию таблицы стилей, что бы она изменялась каждый раз при внесении изменений в style.css?
Заранее благодарю!