WordPress template directory in css

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

У меня есть проблема. Хочу подключить 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'» возвращает верную ссылку. А толку ноль.

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

Простой 1 комментарий

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

 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' => '' . __( 'expand child menu', 'twentyfifteen' ) . '', 'collapse' => '' . __( 'collapse child menu', 'twentyfifteen' ) . '', ) ); > add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' ); ?>

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

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

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

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

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

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’ );

Все элементарно просто в 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 он как раз таким образом и подключается

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

Подключение файла 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?
Заранее благодарю!

Войдите, чтобы написать ответ

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

Источник

Загружаем свои стили оформления CSS на WordPress правильно

Использование CSS (Cascading Style Sheets — каскадные таблицы стилей) дает намного больше возможностей для оформления страниц на сайте WordPress. И если не загрузить таблицу стилей на WordPress правильно, то пользователям сайта будет чрезвычайно трудно настроить стиль темы.

Сегодня речь пойдет о том, как все же правильно загрузить CSS на WordPress.

На сегодняшний день WordPress является наиболее популярной системой управления контентом в мире. Количество ее пользователей насчитывает десятки миллионов. Поэтому для создания успешной темы нам нужно поставить себя на место абсолютно каждого пользователя WordPress и правильно установить файлы CSS, строго следуя правилам.

Как неправильно загружать CSS на WordPress

За годы своего существования WordPress увеличил масштабы кода, чтобы сделать его более гибким. Но прошлые привычки, все же, оставили свой след. Учитывая тот факт, что на WordPress начали загружать CSS и JavaScript, мы не перестали добавлять этот код в файлы header.php:

…или же в файлах functions.php, считая, что так лучше:

"; > add_action( 'wp_head', 'add_stylesheet_to_head' ); ?>

Ни в одном из этих случаев WordPress не может определить, были CSS-файлы загружены или нет. В этом наша большая ошибка!

Если любой другой плагин использует тот же CSS-файл, то он не сможет проверить, был ли CSS-файл добавлен на страницу. В результате используемый плагин загружает тот же файл второй раз, что приводит к дублированию кода.

К счастью, на WordPress можно легко справиться с этой проблемой путем добавления таблиц стилей.

Как правильно загружатьCSS на WordPress

Как уже говорилось ранее, WordPress достаточно изменился за последние годы, и мы ставим перед собой задачу удовлетворить потребности каждого пользователя, учитывая особенности сотней тысяч существующих плагинов для WordPress. Но не стоит пугаться этой цифры, так как на WordPress все же есть полезные функции, которые помогут правильно и качественно добавить таблицы стилей.

Давайте рассмотрим несколько способов, как это можно сделать.

1. Регистрация CSS-файлов

Если вы намерены загрузить каскадные таблицы стилей, для начала вам следует их зарегистрировать с помощью функции wp_register_style() :

• $handle (обязательное) — это уникальное название таблицы стилей. В других функциях оно будет употребляться для постановки в очередь и печати таблицы стилей.
• $src (обязательное) — относится к URL вашей таблицы стилей. Можно использовать функцию get_template_directory_uri() для поиска CSS-файлов в вашей теме. И не вздумайте даже применить жесткое кодирование!
• $deps (необязательное) — управляет названиями зависимых стилей. Если ваша таблица стилей не будет работать при отсутствии CSS-файла, используйте эти параметры для установки «зависимых стилей».
• $ver (обязательное) — это номер версии. Можно использовать номер версии вашей темы или, по желанию, создать его. Если вы не хотите использовать какой-либо другой номер версии, установите null, по умолчанию — false, и WordPress добавит свой собственный номер версии.
• $media (необязательное) — медиа-типы CSS, например, «ручное управление» или «печать». Если вы не уверенны, нужна ли вам эта опция, не используйте ее.

Вот пример регистрации с помощью функции wp_register_style():

Регистрация стилей не является обязательной на WordPress. Если вы сомневаетесь, будете ли использовать эти стили в дальнейшем или же не собираетесь использовать любой из этих кодов для повторной их загрузки, то стили добавляются в очередь без регистрирования. Подробнее об этом читайте далее.

2. Добавление CSS-файлов в очередь

После регистрации файла стиля необходимо поставить его в очередь, чтоб загрузить в head> темы.

Это осуществляется с помощью функции wp_enqueue_style() :

Ее параметры в точности совпадают с параметрами функции wp_register_style() , поэтому нет необходимости снова о них упоминать.

Но как уже было сказано, регистрация, а именно функция wp_register_style() не является обязательной. Стоит отметить, что wp_enqueue_style() можно использовать двумя разными способами:

Но не забывайте о том, что если плагину необходимо будет найти таблицу стилей, или же вы сами захотите загрузить ее в своей теме, то, конечно же, без регистрации не обойтись.

3. Загрузка стилей на сайт

Мы не можем использовать функцию wp_enqueue_style() везде в применяемой нами теме, нам следует использовать «действия». Следующие три действия могут помочь для достижения различных целей:

• wp_enqueue_scripts — для загрузки скриптов и стилей в «front-end» сайта;
• admin_enqueue_scripts — для загрузки скриптов и стилей на страницах или же в административной панели сайта;
• login_enqueue_scripts — для загрузки скриптов и стилей для страницы входа на сайт.

 add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' ); // load css into the admin pages function mytheme_enqueue_options_style() < wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); >add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' ); // load css into the login page function mytheme_enqueue_login_style() < wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); >add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' ); ?>

Дополнительные функции

Существуют еще некоторые очень полезные функции для CSS на WordPress, которые позволяют печатать встроенные стили, проверять статус очереди файлов, добавлять метаданные для файлов стилей и вычеркивать стили из списка.

Давайте рассмотрим подробнее.

1. Добавление встроенных стилей: wp_add_inline_style()

Если в используемой вами теме на WordPress есть опции, позволяющие настроить стили темы, вы можете печатать встроенные стили с помощью функции wp_add_inline_style() :

'; wp_add_inline_style( 'custom-style', $custom_inline_style ); > add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' ); ?>

Этот процесс достаточно легкий и не занимает много времени. Но помните, что вы должны добавлять все последующие встроенные стили с одним и тем же названием.

2. Проверка статуса очереди таблицы стилей: wp_style_is()

В некоторых случаях нам может понадобиться информация о статусе стиля: зарегистрирован ли он, находится ли в очереди, распечатан или находится в ожидании печати. Эту информацию можно проверить с помощью функции wp_style_is() :

 > add_action( 'wp_enqueue_scripts', 'bootstrap_styles' ); ?>

3. Добавление метаданных в стили: wp_style_add_data()

На WordPress есть одна замечательная функция под названием wp_style_add_data() , которая позволяет добавлять мета-данные в стиль используемой темы, включая условные комментарии, RTL поддержку и многое другое!

add_data( 'mytheme-ie', 'conditional', 'lte IE 9' ); * wp_style_add_data() is cleaner, though. */ > add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' ); ?>

4. Вычеркивание стилей из списка с помощью wp_deregister_style()

Если у вас когда-либо будет необходимость вычеркнуть стиль таблицы (например, чтоб зарегистрировать ее с обновленной версией), то вы можете это сделать с помощью wp_deregister_style() .

 > add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' ); ?>

Хоть это не является необходимостью, но все же всегда регистрируйте новый стиль, когда вы вычеркиваете какой-либо старый из списка. В противном случае, это может привести к неполадкам.

Есть похожая функция wp_dequeue_style() , которая удаляет таблицы стилей из очереди по названиям.

Заключение

Подведем итоги всего вышесказанного.

Теперь, когда вы знаете о том, как правильно добавить CSS на WordPress, вы просто не можете допустить ошибку. Если у вас есть свои советы, делитесь с другими в комментариях.

Источник