Применение CSS в темах WordPress


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

В качестве примера я буду использовать следующий код с переменной my_background_color. Я хочу сделать что-то вроде этого:

body
{
background-color: <?php echo $theme_opt['my_background_color']; ?>
}

Начнем с самого простого способа.

header.php

В большинстве тем есть файл header.php, который содержит код шаблона для верхней части HTML документа. Это позволяет легко добавлять пользовательские CSS, просто добавив нужную ссылку в разделе HEAD в коде HTML:

<style type='text/css'>
body {
background-color: <?php echo $theme_opt['my_background_color']; ?>
}
</style>

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

Если ваши потребности просты, то это прекрасно работает. Если нет, то я предлагаю использовать либо wp_headили parse_request.

wp_head

Каждая тема в конце раздела HEAD документа HTML вызывает встроенную WordPress функцию - wp_head , - которая может использоваться для включения пользовательских CSS:

<?php
add_action( 'wp_head', 'my_custom_css_hook' );
function my_custom_css_hook( ) {
# get theme options
?>

<style type='text/css'>
body {
background-color: <?php echo $theme_opt['my_background_color']; ?>
}
</style>

<?php
}

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

parse_request

WordPress поддерживает пользовательские URL-адреса для ваших тем. Они могут применяться для многих вещей, в том числе и для загрузки Ваших пользовательских CSS. Эта техника требует немного больше работы, но и обеспечивает максимальную степень гибкости. Нужно выполнить несколько шагов, и первое, что Вам нужно сделать в header.php:

<link rel='stylesheet' type='text/css' href="<?php bloginfo( 'url' ); ?>/?my-custom-content=css" />

Переменная my-custom-content=cssдолжна иметь уникальное имя, чтобы не конфликтовать с возможно существующими переменными в плагинах. Уникальность имени обеспечит правильность парсинга.

Затем нам нужно сказать WordPress, как он должен выполнять этот запрос:

add_action( 'parse_request', 'my_custom_wp_request' );
function my_custom_wp_request( $wp ) {
if (
!empty( $_GET['my-custom-content'] )
&& $_GET['my-custom-content'] == 'css'
) {
# get theme options
header( 'Content-Type: text/css' );
?>

body {
background-color: <?php echo $theme_opt['my_background_color']; ?>
}

<?php
exit;
}
}

Здесь на некоторые моменты я хочу обратить внимание. Обратите внимание на строку 8. Она указывает браузеру, какой контент мы отправляем обратно. В данном случае это CSS, но это может быть или JavaScript или что-нибудь еще. Также обратите внимание, что я не добавил заголовков на предмет кеширования. О кэш в заголовках HTTP стоит почитать отдельно, чтобы знать как это работает. Строка 16 также имеет важное значение, если мы не хотим чтобы WordPress пытался выполнить ещё какой-либо код, то после возврата CSS нужно как можно быстрее выполнить выход.

Если Вы хотите сохранить CSS в отдельном файле ( custom-css.php например), который больше похож на нормальный CSS файл, то функция my_custom_wp_requestможет выглядеть следующим образом:

function my_custom_wp_request( $wp ) {
if (
!empty( $_GET['my-custom-content'] )
&& $_GET['my-custom-content'] == 'css'
) {
# get theme options
header( 'Content-Type: text/css' );
require dirname( __FILE__ ) . '/custom-css.php';
exit;
}
}

это позволит Вашему файлу custom-css.php выглядеть следующим образом:

body {
background-color: <?php echo $theme_opt['my_background_color']; ?>
}

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

Заключение

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

Джозеф Скотт

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. Ксения24/02/2016

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

четыре × два =