WordPress style css include

Как подключить стили WordPress

Оформление сайта на WordPress осуществляется с помощью стилей. Существует несколько вариантов подключения файла(ов) со стилями к HTML документу. В WordPress самым «правильным» способом (на момент написания статьи) является подключение в файле functions.php. Это решение используется в темах поставляемых вместе с WordPress по-умолчанию, например Twenty Fifteen.

Стили Вордпресс по-умолчанию

Для меня остается загадкой, почему обязательный для любой темы WordPress файл стилей style.css не подключается к этой самой теме (шаблону) автоматически. И необходимо прописать подключение файла таблицы CSS Вордпресс вручную.

В этой статье я расскажу как правильно в WordPress подключить CSS стили.

Таблица стилей WordPress

Для того, чтобы ваша тема WordPress использовала стили оформления из файла style.css необходимо, чтобы в файле functions.php вашего шаблона присутствовали следующие строки:

function theme_name_scripts() < wp_enqueue_style( 'main-style', get_stylesheet_uri() ); >add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Дополнительные CSS WordPress

Если вам необходимо подключить к теме несколько файлов со стилями, например вы используете сброс CSS стилей в файле reset.css, то тогда необходимый код в файле functions.php будет выглядеть так:

function theme_name_scripts() < wp_enqueue_style( 'reset-css', get_template_directory_uri() . '/reset.css' ); wp_enqueue_style( 'main-style', get_stylesheet_uri() ); >add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Пример приведен для случая, когда файл reset.css лежит в корне вашей темы рядом с файлом style.css.

Устаревшие методы подключения файла CSS стилей

Раньше файл стилей в WordPress можно было подключить к теме добавив следующий код (пример для HTML5) в секцию HEAD или перед закрывающим тегом BODY:

Но теперь этот способ считается устаревшим.

Полезные ссылки

При написании статьи были использованы следующие источники:

Источник

wp_enqueue_style() – подключение стилей CSS

Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами , либо в футере сайта.

Если хотите узнать больше про правильное подключение CSS стилей WordPress, то могу порекомендовать вам мой видеоурок.

Стили выводятся в футере (перед ) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )

Параметры функции wp_enqueue_style()

$handle (строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь) $src (строка|логическое) абсолютный URL таблицы стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если она уже зарегистрирована при помощи wp_register_style(), то этот и последующие параметры отпадают. $deps (массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаемым файлом, то нужно перечислить их идентификаторы в массиве $ver (строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать null , тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. Подробнее про параметр. $media (строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный файл стилей, например all — для всех, print — для печати и т.д.

Почему CSS не подключается к HTML?

Хочу тем не менее также ответить вам и на этот вопрос. И правда, почему CSS-файл нельзя подключить напрямую к HTML, например вставить тег ?

Итак, вот почему – если вы подключите CSS напрямую в HTML, то с ним уже ничего нельзя будет сделать, по сути он будет захардкоден в вашей теме WordPress. Его нельзя будет отключить, плагины оптимизации не смогут его сжать или объединить с другими CSS-файлами, невозможно будет поменять порядок подключения с другими стилями.

Пример 1. Как подключить стили

Стили также можно подключать через хуки wp_enqueue_scripts (сайт) и admin_enqueue_scripts (админка WordPress).

add_action( 'wp_enqueue_scripts', 'true_stili_frontend', 25 ); function true_stili_frontend() { wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css' ); }

Теперь сделаем так, чтобы файл подключался только в админке:

add_action( 'admin_enqueue_scripts', 'true_stili_backend', 25 ); function true_stili_backend() { wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css' ); }

А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще.

add_action( 'wp_enqueue_scripts', 'true_stili_frontend', 25 ); function true_stili_frontend() { wp_enqueue_style( 'true_stili' ); }

Подробнее про кэширование и параметр $ver

Хотел бы чуть подробнее рассказать про варианты использования параметра $ver .

• По умолчанию параметр принимает значение false , при этом значении параметра в качестве версии ?ver= файла стилей будет использоваться текущая версия WordPress, поэтому я бы не рекомендовал оставлять это значение параметра.
• Мы можем полностью отказаться от этого query string, если укажем значение параметра null , тогда ?ver= не будет добавляться в конце URL файла стилей.
• Я иногда использую time() на своих тестовых сайтах, т.к. этот параметр возвращает текущее значение текущего UNIX-времени в секунду и значит, каждую секунду значение другое. Но это вариант для ленивых и только для тестовых сайтов, потому что полностью скипается любое кэширование.
• Лучший вариант – filemtime() , которая позволяет получить значение UNIX-времени последнего обновления файла! Пример ниже.

wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css', array(), filemtime( get_stylesheet_directory() . '/assets/true_stili.css' ) );

Также можете почитать подробнее про функции get_stylesheet_directory_uri() и get_stylesheet_directory(), потому что у них есть одно принципиально важное отличие.

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

Пример 2. CSS для отдельной страницы

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

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

Например вы хотите подключить отдельный файл для страницы контактов:

add_action( 'wp_enqueue_scripts', 'true_stili_contacts', 25 ); function true_stili_contacts() { if( is_page( 'contacts' ) ) { wp_enqueue_style( 'true_stili', . ); } }

Пример 3. CSS специально для настроек плагина

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

Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:

/* * Пример будет работать начиная с версии WordPress 2.6.3, */ add_action( 'admin_init', 'true_plugin_init' ); add_action( 'admin_menu', 'true_plugin_menu' ); function true_plugin_init() { /* * Сначала регистрируем стили * файл должен находиться в папке с выполняемым файлом плагина */ wp_register_style( 'trueplugin', plugins_url('true-plugin.css', __FILE__) ); } function true_plugin_menu() { /* * Создаем страницу настроек плагина, она будет находиться в разделе Параметры */ $page_suffix = add_submenu_page( 'options-general.php', 'True плагин', 'True плагин настройки', 'administrator', __FILE__, 'true_plugin_html' ); /* * Создаем хук, содержащий суффикс созданной страницы настроек $page_suffix */ add_action( 'admin_print_styles-' . $page_suffix, 'true_plugin_stili' ); } function true_plugin_stili() { /* * Ставим в очередь на вывод */ wp_enqueue_style( 'trueplugin' ); } function true_plugin_html() { /* * Собственно содержимое страницы настроек */ echo 'Это страница настроек'; }

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Include CSS Style In WordPress

The right way to include css style file in wordpress theme or plugin, simple tutorial to include css style file in wordpress, and add css code in header or footer.

How To Include CSS File In WordPress

Using wp_enqueue_style() function and wp_enqueue_scripts action, we will include css style file in wordpress theme or plugin.

Include CSS In WordPress Theme

To include css in wordpress theme, we will use get_template_directory_uri() function to get style file link:

function css_style_to_my_theme() < wp_enqueue_style( 'theme-style-bla-bla', get_template_directory_uri() . '/css/theme-style.css', false, null ); >add_action('wp_enqueue_scripts', 'css_style_to_my_theme');

Include CSS In WordPress Plugin

To include css in wordpress plugin, we will use plugins_url() function to get style file link:

function css_style_to_my_plugin() < wp_enqueue_style( 'plugin-style-bla-bla', plugins_url( '/css/plugin-style.css', __FILE__ ), false, null ); >add_action('wp_enqueue_scripts', 'css_style_to_my_plugin');

Include CSS In Posts And Pages Only

You can include some css style file in single posts or pages, for example:

function css_style_to_my_posts_and_pages_only() < if( is_single() or is_page() )< wp_enqueue_style( 'my-post-style', get_template_directory_uri() . '/folder-name/post-style.css', false, null ); >> add_action('wp_enqueue_scripts', 'css_style_to_my_posts_and_pages_only');

You can read more about is_single() function or is_page() function.

Wrong Way

Do not include css style file like this:

But you can add CSS code in wp_head or wp_footer action, css code only! not css file! for example in wp_head action:

function css_code_in_header() < ?> body add_action('wp_head', 'css_code_in_header');

Now your CSS code will be in html tag.

For example in wp_footer action:

function css_code_in_footer() < ?> body add_action('wp_footer', 'css_code_in_footer');

Now your CSS code will be in Footer.

You can read tutorial about include jquery and javascript files.

Related Tutorials

Include PHP File In WordPress Theme And Plugin

Include jQuery And JavaScript In WordPress

Published by ALOBAIDI

My name is Qassim Hassan Alobaidi, from Jeddah, Saudi Arabia. I’m a Web designer, WordPress developer, founder of WPTime, writer, and poet.

Leave a comment (cancel reply)

About WPTime

WPTime is the easiest way to learn WordPress and Web development. We publish tutorials in a simple and easy to understand. We develop a great WordPress Plugins for FREE. Total plugins download is over 527,812 and running on over [get_tpi] websites. WPTime was founded in February 2015 by Qassim Hassan. WPTime goal is to be the source for anyone who wants to learn WordPress & Web development.

Subscribe

Subscribe to the mailing list and get the fresh content!

Made with in Jeddah. Hosted by Bluehost. Built on WordPress. Theme by Qassim Hassan. © 2023 WPTime, all rights reserved. WPTime is not responsible for the content of external sites.

Источник