вход

Применение 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 намного легче.

Джозеф Скотт


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

Статья → Применение CSS в темах WordPress

  1. Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)

Оставить комментарий

Статья → Применение CSS в темах WordPress

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.