Главная › Новости

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

Опубликовано: 23.10.2017

CSS Columns — "газетные" колонки без гридов

 Время чтения: 4 минуты

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

Создание WordPress темы #5 - Тег div

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

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

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

header.php

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

Как просто создать свой сайт! (CMS WordPress)

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

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

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