Тема для WordPress — CSS

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

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

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

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

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

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

я использую, как фильтр. Вместо неё, можно вызывать каждый файл стиля в секции <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, а от плагина по возможности отказаться вообще. Но это – тема для следующего разговора.

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