Wp enqueue style


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

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

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

, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша.
$media
(строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный CSS-файл, например all — для всех, print — для печати и т.д.

Примеры

Во всех примерах будем использовать один и тот же файл true_style.css. Стили также можно подключать через хуки wp_enqueue_scripts и admin_enqueue_scripts, хотя это и не обязательно, как со скриптами.

Итак, сначала подключим файл во фронтэнде сайта:

Можно подключить файл непосредственно на сайт, вставив функцию прямо в HTML-шаблон, или же в functions.php, при этом не забыв воспользоваться условным тегом is_admin().

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

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

Кстати, список всех зарегистрированных стилей можно узнать следующим образом:


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

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

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

misha.blog

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

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

&lt;link rel="stylesheet" href="&lt;?php echo get_stylesheet_uri(); ?&gt;"&gt;

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

&lt;?php     function add_stylesheet_to_head() {   echo "&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;";  }     add_action( 'wp_head', 'add_stylesheet_to_head' );     ?&gt;

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

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

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

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


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

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

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

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

&lt;?php  wp_register_style( $handle, $src, $deps, $ver, $media );  ?&gt;
  • $handle (обязательное) — это уникальное название таблицы стилей. В других функциях оно будет употребляться для постановки в очередь и печати таблицы стилей.
  • $src (обязательное) — относится к URL вашей таблицы стилей. Можно использовать функцию get_template_directory_uri() для поиска CSS-файлов в вашей теме. И не вздумайте даже применить жесткое кодирование!

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

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

&lt;?php     // wp_register_style() example  wp_register_style(   'my-bootstrap-extension', // handle name   get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet   array( 'bootstrap-main' ), // an array of dependent styles   '1.2', // version number   'screen', // CSS media type  );     ?&gt;

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


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

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

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

&lt;?php  wp_enqueue_style( $handle, $src, $deps, $ver, $media );  ?&gt;

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

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

&lt;?php     // if we registered the style before:  wp_enqueue_style( 'my-bootstrap-extension' );     // if we didn't register it, we HAVE to set the $src parameter!  wp_enqueue_style(   'my-bootstrap-extension',   get_template_directory_uri() . '/css/my-bootstrap-extension.css',   array( 'bootstrap-main' ),   null, // example of no version number...   // ...and no CSS media type  );     ?&gt;

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

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

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


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

Пример:

&lt;?php     // load css into the website's front-end  function mytheme_enqueue_style() {   wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );   }  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' );     ?&gt;

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

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


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

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

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

&lt;?php     function mytheme_custom_styles() {   wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );   $bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"   $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';   wp_add_inline_style( 'custom-style', $custom_inline_style );  }  add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );     ?&gt;

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

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

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

&lt;?php     /*   * wp_style_is( $handle, $state );   * $handle - name of the stylesheet   * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'.  

fault: 'enqueued' */ // wp_style_is() example function bootstrap_styles() { if( wp_style_is( 'bootstrap-main' ) { // enqueue the bootstrap theme if bootstrap is already enqueued wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' ); } } add_action( 'wp_enqueue_scripts', 'bootstrap_styles' ); ?&gt;

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

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

Вот как она выглядит:

&lt;?php     /*   * wp_style_add_data( $handle, $key, $value );   * Possible values for $key and $value:   * 'conditional' string Comments for IE 6, lte IE 7 etc.   * 'rtl' bool|string To declare an RTL stylesheet.   * 'suffix' string Optional suffix, used in combination with RTL.   * 'alt' bool For rel="alternate stylesheet".   * 'title' string For preferred/alternate stylesheets.   */     // wp_style_add_data() example  function mytheme_extra_styles() {   wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );   wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );   /*   * alternate usage:   * $GLOBALS['wp_styles']-&gt;add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );   * wp_style_add_data() is cleaner, though.   */  }     add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );     ?&gt;

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

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


Смотрите пример:

&lt;?php     function mytheme_load_modified_bootstrap() {   // if bootstrap is registered before...   if( wp_script_is( 'bootstrap-main', 'registered' ) ) {   // ...deregister it first...   wp_deregister_style( 'bootstrap-main' );   // ...and re-register it with our own, modified bootstrap-main.css...   wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );   // ...and enqueue it!   wp_enqueue_style( 'bootstrap-main' );   }  }     add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );     ?&gt;

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

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

Заключение

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

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


hostenko.com

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

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

Неправильный способ загрузки CSS в WordPress

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

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

… либо добавляем код, который приведен ниже, в файл functions.php, думая, что это лучше:

<?php   function add_stylesheet_to_head() {  echo "<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>"; }   add_action( 'wp_head', 'add_stylesheet_to_head' );   ?>

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

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

К счастью, WordPress предлагает очень простое решение проблемы: регистрацию и подключение стилевых таблиц.

Правильный способ загрузки CSS в WordPress

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

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

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

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

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

 <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
  • $handle (string, required) – уникальное имя вашей стилевой таблицы. Другие функции будут использовать данный хэндл для подключения и печати вашей стилевой таблицы.
  • $src (string, required) – указывает на URL вашей стилевой таблицы. Вы можете использовать функции, такие как get_template_directory_uri(), чтобы получить стилевые файлы из вашего каталога темы. Даже не думайте о том, чтобы жестко прописывать путь в коде!
  • $deps (array, optional) – имена зависимых стилевых таблиц. Если ваша стилевая таблица не будет работать в случае отсутствия каких-либо других стилевых файлов, используйте данный параметр для задания зависимостей.
  • $ver (string или boolean, optional) – номер версии. Вы можете использовать номер версии вашей темы или создать свой номер, если хотите. Если вы не хотите использовать номер версии, задайте этот параметр в null. По умолчанию он задан как false, что приводит к добавлению собственного номера версии WordPress.
  • $media (string, optional) – медиа-типы CSS, такие как «screen», «handheld» или «print». Если вы не знаете, как использовать данный параметр, то лучше его просто не трогайте. По умолчанию он задан как all.

Вот пример функции wp_register_style():

<?php   // wp_register_style() example wp_register_style(  'my-bootstrap-extension', // хэндл  get_template_directory_uri() . '/css/my-bootstrap-extension.css', // URL стилевой таблицы  array( 'bootstrap-main' ), // массив зависимых стилей  '1.2', // номер версии  'screen', // CSS медиа-тип );   ?>

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

Подключение CSS-файлов

После регистрации стилевого файла нам нужно подключить его (поставить в очередь), чтобы сделать его готовым к загрузке в секции темы head.

Сделаем мы это с помощью функции wp_enqueue_style():

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

Параметры в точности те же, которые были в функции wp_register_style(), поэтому мы не будем повторяться.

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

<?php   // если мы регистрировали стили перед этим: wp_enqueue_style( 'my-bootstrap-extension' );   // если мы не регистрировали их, мы должны установить параметр $src wp_enqueue_style(  'my-bootstrap-extension',  get_template_directory_uri() . '/css/my-bootstrap-extension.css',  array( 'bootstrap-main' ),  null, // пример без номера версии...  // ...и без CSS медиа-типа );   ?>

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

Загрузка стилей на ваш веб-сайт

Мы не можем просто использовать функцию wp_enqueue_style() в нашей теме – нам понадобится обратиться к действиям. Есть три действия, которые мы можем применять в разных целях:

  • wp_enqueue_scripts — для загрузки скриптов и стилей во фронтэнде нашего сайта
  • admin_enqueue_scripts — для загрузки скриптов и стилей на страницах нашей панели администратора
  • login_enqueue_scripts — для загрузки скриптов и стилей на странице входа в WordPress

Вот примеры этих трех действий:

<?php   // загружаем css во фронтэнде сайта function mytheme_enqueue_style() {  wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );  } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );   // загружаем css на страницах администратора 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' );   // загружаем css на странице входа 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' );   ?>

Важное примечание: используйте wp_enqueue_scripts(), а не wp_print_styles(). Тем самым вы сможете обойти возможную ошибку совместимости с WordPress 3.3.

Некоторые дополнительные функции

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

Давайте взглянем на них.

Добавляем динамические внутренние стили: wp_add_inline_style()

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

<?php   function mytheme_custom_styles() {  wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );  $bold_headlines = get_theme_mod( 'headline-font-weight' ); // допустим, что значение будет "bold"  $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';  wp_add_inline_style( 'custom-style', $custom_inline_style ); } add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );   ?>

Очень просто. Помните: вы должны использовать имя handle подключаемой стилевой таблицы в функции wp_add_inline_style().

Проверяем подключение стилевой таблицы: wp_style_is()

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

<?php   /*  * wp_style_is( $handle, $state );  * $handle - имя стилевой таблицы  * $state - статус таблицы: 'registered', 'enqueued', 'done' или 'to_do'. По умолчанию: 'enqueued'  */   // wp_style_is() пример function bootstrap_styles() {    if( wp_style_is( 'bootstrap-main' ) {    // загружаем bootstrap тему, если bootstrap уже подключен  wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );    }   } add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );   ?>

Добавляем метаданные к стилевой таблице: wp_style_add_data()

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

Вот как она выглядит:

<?php   /*  * wp_style_add_data( $handle, $key, $value );  * Значения для $key и $value:  * 'conditional' string Comments for IE 6, lte IE 7 etc.  * 'rtl' bool|string To declare an RTL stylesheet.  * 'suffix' string Optional suffix, used in combination with RTL.  * 'alt' bool For rel="alternate stylesheet".  * 'title' string For preferred/alternate stylesheets.  */   // wp_style_add_data() пример function mytheme_extra_styles() {  wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );  wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );  /*  * альтернативное использование:  * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );  * хотя wp_style_add_data() понятнее  */ }   add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );   ?>

Прекрасно, не правда ли?

Отменяем регистрацию стилевых файлов: wp_deregister_style()

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

Давайте взглянем на пример:

<?php   function mytheme_load_modified_bootstrap() {  // если bootstrap был зарегистрирован ранее...  if( wp_script_is( 'bootstrap-main', 'registered' ) ) {  // ...дерегистрируем его...  wp_deregister_style( 'bootstrap-main' );  // ...и заново регистрируем уже новую, обновленную версию bootstrap-main.css...  wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );  // ...и подключаем ее!  wp_enqueue_style( 'bootstrap-main' );  } }   add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );   ?>

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

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

Источник: code.tutsplus.com

oddstyle.ru

Правильный способ подключения css стилей и js скриптов в тему WordPress

Корректнее делать подключение специальными PHP функциями, внутр файла functions.php вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.

Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.

// Описываем функцию в которй будем подключать CSS и JS function twentytwelve_scripts_styles(){     global $wp_styles;     //... код подключения стилей }  // Добавляем action для запуска этой функции add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles', 1 );

Выглядит это следующим образом, есть функция twentytwelve_scripts_styles , ее название может быть любой. Внутри которой мы будем подключать CSS стили и JS скрипты. После ого как эта функция объявлена, мы вызываем ее через add_action

Аналогичная конструкция скорее всего уже присутствует в вашем шаблоне, если вы взяли за основу готовую WordPress тему.

Теперь нам остается только подключить наши CSS и JS, в данном случае внутри функции twentytwelve_scripts_styles(){ ... }

Рассмотрим пример подключения стилей.

Подключаем CSS стили в теме WordPress

Сначала необходимый CSS файл регистрируем, и затем подключаем его. Выглядит это вот так:

// Регистрирую стили wp_register_style( 'my_reset', get_template_directory_uri() . '/css/reset.min.css', array(), '1.2', 'screen'); wp_register_style( 'my_style', get_template_directory_uri() . '/css/style.css', array('my_reset'), '1.47', 'screen');  // Подключаю стили wp_enqueue_style( 'my_reset'); wp_enqueue_style( 'my_style');

Регистрация происходит функцией wp_register_style(); в которую передаются 4-ре параметра:

  1. Имя стиля, которое в дальнейшем будем использовать при подключении данного стиля. Имя придумываем самостоятельно.
  2. Путь к CSS файлу. В примере выше он содержит переменную для определения пути каталога с темой.
  3. Массив с перечислением зависимостей. Например мы подключаем reset.css для сброса стилей, и все остальные CSS файлы должны быть подключены после него. Соответственно при подключения файла style.css мы поставим ему зависимость от файла у него будет зависимость от файла reset.min.css которому мы дали имя my_reset и поэтому параметр с зависимостями будет выглядеть вот так array('my_reset')
  4. Четвертый параметр — версия файла. Параметр необязательный.
  5. Пятый — тип устройства для которого должен быть применен данный стиль. В нашем случае это 'screen'

После регистрации подключаем зарегистрированные файлы стилей функцией wp_enqueue_style( 'style_name'); в которую передаем один параметр — имя зарегистрированного стиля.

Можно делать подключение файла сразу через функцию wp_enqueue_style(); передав в нее те же параметры которые мы передаем в функцию wp_register_style(); при регистрации стилей.

Подключаем JS скрипты в теме WordPress

Аналогично стилям, JS скрипты сначала регистрируются, и затем подключаются.

// Регистируем файл с JS скриптом wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), '1.0', false);      // Подключаем файл с JS скриптом wp_enqueue_script( 'jquery');

Либо их можно сразу подключить, записав все необходимые параметры в wp_enqueue_script(); функцию.

// Подключаем файл с JS скриптом сразу без регистрации wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

Готовый пример подключения CSS и JS файлов в файле function.php в теме WordPress

Привожу итоговый рабочий пример подключения CSS и JS файлов в шаблоне WordPress в файле functions.php

// Заносим CSS стили и JS скрипты в функцию twentytwelve_scripts_styles function twentytwelve_scripts_styles(){      // Регистрирую стили     wp_register_style( 'my_reset', get_template_directory_uri() . '/css/reset.min.css', array(), '1.2', 'screen');     wp_register_style( 'my_style', get_template_directory_uri() . '/css/style.css', array('my_reset'), '1.47', 'screen');      // Подключаю стили     wp_enqueue_style( 'my_reset');     wp_enqueue_style( 'my_style');      // Подключать стили можно и сразу, без регистрации. Тогда необходимо прописать все параметры внутри wp_enqueue_style();     // Пример подключение стандартного обязательного файла стилей style.css     wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );      // Регистируем файл с JS скриптом     wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), '1.0', false);          // Подключаем файл с JS скриптом     wp_enqueue_script( 'jquery');      // Подключаем файл с JS скриптом сразу без регистрации     wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true ); }  // Создаем экшн в котором подключаем скрипты подключенные внутри функции twentytwelve_scripts_styles add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles', 1 );

 

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

Подключив скрипты образом как указано выше и установив плагин WP Rocket я получил ощутимый прирост в скорости работы сайта. Чего не было ранее, когда стили и скрипты подключались в HTML коде.

rightblog.ru

Посмотрите 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 в корне директории вашей темы.

toster.ru

The Wrong Way Of Adding Stylesheets

Firstly we will start off by seeing the wrong way of adding stylesheets to WordPress and a common way I’ve seen people add stylesheets to WordPress. Because CSS stylesheets are added to the head tag of a web page and people are familiar with the wp_head action, they will use this to add stylesheets to the page.

function add_stylesheet_to_head() {  echo "<link href='location-of-stylesheet' rel='stylesheet' type='text/css'>"; } add_action('wp_head', 'add_stylesheet_to_head'); 

The reason this is a bad way of adding stylesheets in WordPress is because WordPress handles stylesheets by queuing them up using a handle as a unique identifier for the stylesheet. This means that if other plugins want to use the same stylesheet and have the same identifier WordPress will only load this stylesheet once, if you use the above method and the other plugins use the above method then you could load the same stylesheet multiple times. Below we are going to investigate the correct ways of loading stylesheets into WordPress.

Why Should You Use wp_enqueue_style?

Why is this the best solution to adding styles to your WordPress page? This is because of the function wp_enqueue_style, this will handle all of the stylesheets that need to be added to the page and will do it in one place.

wp_enqueue_style( $handle, $src, $deps, $ver, $media ); 

The first parameter of this function is the handle which you use to name the stylesheet. Naming the stylesheet allows an easy way of not adding the same stylesheet twice on the page. If you have two plugins that use the same stylesheet and the both use the same wp_enqueue_style handle then WordPress will only add the stylesheet on the page once. When you add things to wp_enqueue_style it adds your styles to a list of stylesheets it needs to add on the page when it is loaded. If a handle already exists it will not add a new stylesheet to this list. Another good feature of the wp_enqueue_style function is the 3rd parameter $deps, this is dependencies, if you pass an array of stylesheet handles it means this stylesheet will not be added to the page until all of these handles are added.

Example Of Adding Stylesheet

To use the wp_enqueue_style function it should be added on the wp_enqueue_scripts action.

<?php   add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );   /**  * Add stylesheet to the page  */  function safely_add_stylesheet() {  wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );  } ?> 

The wp_enqueue_scripts action can be used for both CSS and Javascript files the only difference is that for javascript files you don’t use the function wp_enqueue_styles your javascript you will use wp_enqueue_script.

Add Stylesheets In Admin Area

If you want to add your stylesheet in the admin area of WordPress, for example on your theme options page or your plugin admin page, then you need to change slighty this. There is an action called admin_enqueue_scripts which you should use to add styles in the admin area. Inside this action you can then use the same wp_enqueue_style function to add the stylesheet.

 <?php   add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );   /**  * Add stylesheet to the page  */  function safely_add_stylesheet_to_admin() {  wp_enqueue_style( 'prefix-style', plugins_url('style_admin.css', __FILE__) );  } ?> 

But there is a problem with this, now this stylesheet is added to every page of the admin area. If you only want to style the panels differently on your theme options page then using this method will change it everywhere. If you only want the stylesheet to be added on certain pages in the admin page you have to add something else to the safely_add_stylesheet_to_admin function. When you use the admin_enqueue_scripts it passes through a parameter to your called function to let you know what page it’s on. From this parameter you can check the page and only add the stylesheet on certain pages.

 <?php   add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );   /**  * Add stylesheet to the page  */  function safely_add_stylesheet_to_admin( $page ) {  if( 'options-general.php' != $page )  {  return;  }  wp_enqueue_style( 'prefix-style', plugins_url('style_admin.css', __FILE__) );  } ?> 

The above function will only add the stylesheet on the options-general.php page.

Add Stylesheets To Login Page

Along with being able to add stylesheets to the front-end of the website and on the admin area of WordPress, there is also an action which allows you to add stylesheets to the login page to style it in anyway you want. The action to add styles to the login page is login_enqueue_scripts.

 function login_page_styles() {  wp_enqueue_style( 'login-page-styles', get_template_directory_uri() . '/css/login-page.css' );  } add_action( 'login_enqueue_scripts', 'login_page_styles' ); 

Add Inline Styles

PHP can not change contents of your CSS files, so if you have a theme options page or use the theme customizer in your theme then there will be PHP code that could output new CSS then you need to output this as inline CSS. WordPress has a function wp_add_inline_style() which allows you to add styles after the stylesheets have been loaded. This function takes two parameters a handle and the style that will be used.

 <?php wp_add_inline_style( $handle, $data ); ?> 

The following code snippet shows how you can get a variable set in the theme customizer and use this to change the colour of the body background.

 function add_customizer_styles() {  $bgcolor = get_theme_mod( 'background-color' );  $custom_css = "  body  {  background: {$bgcolor};  }";  wp_add_inline_style( 'inline-custom-style', $custom_css ); } add_action( 'wp_enqueue_scripts', 'add_customizer_styles' ); 

Conclusion

That’s how stylesheets should be added to both the front-end and admin area of your WordPress site. The benefits and ease of using the wp_enqueue_style is massive that you shouldn’t need to add your stylesheets using the wp_head action.

paulund.co.uk

First of all let’s say that regarding these functions what is valid for styles is exactly valid for scripts, but there are some exceptions to the contrary explained in the answer.

Main difference between wp_enqueue_* and respective wp_register_* functions, is that the first adds scripts/styles to the queue, the second prepares scripts/styles to be added.

You probably already know that, but there is a second difference; wp_register_* can be used in every hook, even in an early hook like init, but wp_enqueue_* should be used on wp_enqueue_scripts hook (or admin_enqueue_scripts for backend) 1.

The typical scenario of using both functions is when you want to register scripts/styles on theme init, and then enqueue them conditionally on some pages, e.g.

add_action('init', 'my_register_styles');  function my_register_styles() {  wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );  wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );  wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' ); }  add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );  function my_enqueue_styles() {  if ( is_front_page() ) {  wp_enqueue_style( 'style3' );  } elseif ( is_page_template( 'special.php' ) ) {  wp_enqueue_style( 'style1' );  wp_enqueue_style( 'style2' );  } else {  wp_enqueue_style( 'style1' );  } } 

In this way the conditional enqueuing is more readable and less verbose.

In addition, if you want to enqueue one or more of the registered styles/scripts also in the backend, you can use the registered handle in a function hooking admin_enqueue_scripts without having to pass all params again.

Sure this is more useful for scripts, because of wp_localize_script that in previous scenario can be called once, after script registration, and then on conditional enqueuing just enqueue the script, even if it is used more than once: this keeps code simpler and DRY.

When you register a script/style and immediately after you enqueue it, it’s just an unnecessary task, that actually can be completely avoided:

wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' ); wp_enqueue_style( 'style1' ); 

There’s no advantage to enqueuing a style (or script) in like this, just use wp_enqueue_style with all params of wp_enqueue_style and you are done.

Previous sentence is also true regarding the child theme friendship. To overwrite a style in the child theme, when the parent is using wp_register_style immediately followed by wp_enqueue_style, you have to de-register the style and register again with another URL. If the parent is only using wp_enqueue_style, in the child theme you can use wp_dequeue_style and enqueue the new style, so in the child theme you need 2 lines of code in both cases.

However, what is very child theme friendly is to wrap the functions that enqueue and/or register styles and scripts in a if ( ! function_exists( … in this way child theme can overwrite parent theme styles and scripts all in one place:

if ( ! function_exists( 'my_register_styles' ) ) {  function my_register_styles() {  wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );  wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );  wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' );  } }  if ( ! function_exists( 'my_enqueue_styles ') ) {  function my_enqueue_styles() {  if ( is_front_page() ) {  wp_enqueue_style( 'style3' );  } elseif ( is_page_template( 'special.php' ) ) {  wp_enqueue_style( 'style1' );  wp_enqueue_style( 'style2' );  } else {  wp_enqueue_style( 'style1' );  }  } } 

Now in the child theme it’s possible to write another my_register_styles and/or my_enqueue_styles function and change all styles (if needed, of course) without having to deregister/dequeue styles one by one.


1 Here’s another difference from scripts and styles: wp_enqueue_script can be used in the body of a page (typical use is in a shortcode) and the script will be put in the footer.

wordpress.stackexchange.com

Подключаем скрипты и стили

Также в файл functions.php после подключения библиотеки jQuery подключаем все скрипты и стили.

  function my_scripts(){   wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', false, null );   wp_enqueue_script( 'script-one', get_template_directory_uri() . '/js/script.one.js', array(), null, true );   wp_enqueue_script( 'script-two', get_template_directory_uri() . '/js/script.two.js', array(), null, true );  }  add_action('wp_enqueue_scripts', 'my_scripts');

Теперь разберем код.

  • my_scripts() – пользовательская функция, которую мы регистрируем с помощью add_action() и цепляем на хук-действие wp_enqueue_scripts
  • wp_enqueue_style() – правильно добавляет файл стилей, перед этим регистрируя его, если он не был зарегистрирован ранее
  • get_template_directory_uri() – получает URL текущей темы, к которому добавляется оставшейся путь к файлу . ‘/style.css’
  • wp_enqueue_script() – правильно подключает js файлы

Давайте подробнее разберем параметры функции подключения скриптов – wp_enqueue_script()

  • script-one – название скрипта (присваивается произвольно и пишется в нижнем регистре)
  • get_template_directory_uri() . ‘/js/script.one.js’ – URL js файла
  • array() – массив, в который вписываются названия скриптов, если данный скрипт зависит от каких-то скриптов, подключаемых ранее
  • null – в этом параметре указывается версия скрипта, если оставить пустым, то выведется текущая версия WordPress, а при использовании null никакая версия не будет указана.
  • true – в последнем параметре указывается месторасположение скрипта, если оставить пустым или указать false, то скрипт будет подключен в <head> после тега wp_head(), а если указать true, то скрипт подключится в футере после тега wp_footer().

Более подробное описание всех функций и хуков смотрите на официальном сайте codex.wordpress.org, а я заканчиваю данную статью. Надеюсь все понятно, если нет, задавайте вопросы не стесняйтесь.

zyubin.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.