Тема для WordPress – CSS

Тема для WordPress - CSS
CSS в WordPress

Сегодня, как и было заявлено в прошлой статье, мы поговорим о файле style.css.

Строго говоря, файл каскадной таблицы стилей, CSS может быть и не один, но, если такая необходимость есть, дополнительные файлы лучше размещать не в корне темы оформления, а в отдельной папке /css/ . Туда можно разместить:

  • custom.css – пользовательский стиль
  • print.css – стиль элементов для вывода страницы на печать
  • reset.css – сброс стандартного отображения элементов в браузере
  • ie.css – исключения для “любимца” веб-дизайнеров и т.д.

Вызвать файл можно либо напрямую указав путь к файлу, либо функциями WordPress:

<?php
bloginfo(stylesheet_url);
bloginfo(stylesheet_directory);
?>
возвращает полный путь до файла style.css
возвращает полный путь до папки с темой

В обязательном style.css, который размещается в корне папки скина, помимо описания оформления содержится информация об авторе темы, её названии, версии и описании. Делается это в следующем блоке комментированного кода в самом начале файла:

/*Theme Name:
*Theme URI:
*Description:
*Version:
*Author:
*Author URI:
*Tags:
имя Вашей темы оформления
адрес для загрузки темы или её обновления
краткое описание темы
версия разработки
Ваше имя или псевдоним
адрес Вашего сайта
характерные особенности темы, метки, */

Коротко о директиве @import. Применение импортируемого стиля тормозит загрузку таблиц, но позволяет скрыть от старых браузеров код, который они видеть не должны, поэтому конструкцию вида:

@import url(“css/reset.css”);
@import url(“css/master.css”);

я использую, как фильтр. Вместо неё, можно вызывать каждый файл стиля в секции <head?>.
Перечень классов встроенных в ядро WordPress последних версий:

  • alignleft – выравнивание по левому краю;
  • alignright – выравнивание по правому краю;
  • aligncenter – выравнивание по центру;
  • wp?caption – заголовок сайта;
  • cat?item – рубрика в списке;
  • currentcat – текущая рубрика;
  • current?cat?parent – родительская рубрика для текущей рубрики;
  • pagenav – постраничная навигация;
  • page_item – страница в списке;
  • current_page_item – текущая страница;
  • widget – виджет;
  • linkcat – рубрика ссылок;

Использовать их или нет – решайте сами, по-моему – проще описать то, что уже есть, чем самому выдумывать имя для очередного селектора. Кстати, о выдумках:

  1. Объявлять class стоит если элемент встречается на странице больше одного раза и не используется javascript, в остальных случаях надо использовать id, причём проследить, чтобы все имена на странице были уникальными.
  2. Иконки, применяемые в скине, лучше всего объединять в спрайт (один графический файл с прозрачным фоном), а для отображения ссылок произвольной длины в виде закладок с нестандартным оформлением используйте эффектраздвижных дверей
  3. Вместо использования в названиях селекторов длинных имен снабжайте Ваш css комментариями. Путаницы это не привнесёт, готовый же файл можно будет хорошо уменьшить в размерах просто удалив комментарии, а чтобы через время разобраться что и откуда – перед оптимизацией сохраните исходник под именем style_dev.css
  4. Часто плагины внедряют в код свои стили: мало того, что в коде страницы мусор, так еще и общий стиль оформления страдает. Если есть возможность – отключите стиль из меню плагина, нет – проследите откуда появляется этот код, скопируйте стиль в style.css и закомментируйте его в исходном файле. И не забудьте в комментарии style.css подписать откуда взялся этот кусок кода.

Вообще-то, самые нужные функции Вашего скина рекомендую скопировать в functions.php, а от плагина по возможности отказаться вообще. Но это – тема для следующего разговора.

Жду Ваших вопросов.

Читайте в этой серии: