Пример использования тега body_class для эффективного использования CSS стилей

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Сегодня я хочу рассказать вам немного о разработке темы WordPress на примере двух своих уникальных тем, которые я делал под заказ.

Речь пойдет о сайте косметологической фирмы в Париже под названием 'Centre Marceau'.

Впервые я с ними столкнулся в 2010 году, когда получил заказ на перенос сайта на WordPress. До этого их сайт работал на малоизвестной кому-нибудь системе управления сайтом под названием — Plone.

Я взял весь дизайн и перенес на CMS WordPress. Весь контент пришлось переписывать, страница за страницей, включая всю ленту новостей. Причина — база данных CMS Plone и база данных CMS WordPress не совместимы, поэтому простой экспорт/импорт здесь не получится.

С дизайном проблем вообще не было — сайт сам по себе был довольно простым. Ниже я публикую скриншот самого первого дизайна сайта:

screenshot

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

  • Для списков страниц, которые в меню сгруппированы по разделам (Epilation Laser, Cryolipolyse и так далее...) мне нужно было сделать разные цветовые оформления.
  • Для разных страниц необходимо было сделать разные Сайдбары, с разным выводимым содержимым (в первую очередь — произвольные меню списков страниц, а также разные новости из разных разделов сайта)

Я пошел путем создания шаблонов страниц и шаблонов сайдбаров. Для шаблонов страниц использовал уникальные идентификаторы страниц (page-ID.php), для сайдбаров — разные имена файлов (sidebar-centre, sidebar-contact и так далее...).

Получился огромный список файлов, в основной директории темы — более 65 файлов темы, плюс — несколько файлов настроек подключаемых функций, подключаемой панели настроек со стороны администратора, подключаемый внешний скрипт шрифта Noto Sans и так далее...).

Сейчас эта тема стоит на сайте заказчика.

Обратите внимание на особенность — раздел меню 'Epilation laser' (первый слева) если вы откроете страницу, то обратите внимание на цвет заголовков страниц, а также картинки в заголовках H3. Они используют фиолетовый цвет — #3c2c62.

Если откроете раздел меню 'Greffe de cheveux' (третий слева) — все цвета станут оранжевыми — #ea7b08.

И так — с каждым разделом. У каждого раздела свой цвет.

Для этого я просто применил разные селекторы DIV. Ничего сложного.

Чуть больше двух лет назад я предлагал заказчику делать адаптивный дизайн, так как уже тогда понимал, что адаптивный дизайн скоро станет обязательным атрибутом для любого сайта. Но заказчик немного «пожадничал» и не стал заказывать этот вариант.

О чем пожалел через два года, сейчас, когда увидел через мониторинг посетителей, что около 70% трафика у него на сегодня идет через мобильные устройства.

Код CSS, который я писал тогда, не очень подходит под переделку и подключение адаптивных тегов HTML5+CSS3 и мне сегодня приходится полностью переписывать код темы, но — я решил не только переписать теги, но и изменить «культуру» самого кода PHP, а именно — отказаться от огромного количества файлов и упростить поддержку разных цветов для разных разделов.

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

Тег шаблона body_class добавляется в тег HTML BODY:

<body <?php body_class(); ?>>

Когда открывается страница, в коде HTML мы видим такой код:

<body class="page page-id-3639">

Page-ID-3639 — это страница с уникальным идентификатором. Теперь нужно в файле стилей CSS написать для нее вариант цвета для тега H3:

.page-id-3639 {
/* стили для постоянной страницы с ID=3639 */
}

Сложно? По-моему, проще, чем писать CSS-стили в первом варианте.

Я еще не закончил переделывать полностью тему, и работаю пока на локальном сервере (localhost).

Думаю, весь проект смогу закончить до конца марта и те, кто захочет посмотреть сайт косметологической фирмы Centre Marceau (Parice, France) после конца марта — увидят уже сайт с поддержкой адаптивного дизайна.

Плюс что еще я изменил в новой теме — я удалил панель настроек со стороны консоли администратора и все настройки сделал индивидуальными для каждой страницы сайта, и они все находятся на страницах редактирования.

Сейчас сайт открывается быстрее чем за 2 секунды. Согласитесь, код я умею писать))

centremarceaunew

Надеюсь, что после изменения файлов темы и оптимизации кода PHP+HTML5+CSS3 я смогу запустить сайт еще быстрее.

Тьфу-тьфу что бы не сглазить.

UPD — 14 августа 2015 г.

Было много причин, почему я только сегодня закончил сайт заказчика и выложил на его домене.

Посмотрите на результаты:

centremarceau-pingdom

Если материал вам понравился, нажмите или расскажите о нем друзьям!

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

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

Ваш email нигде не будет показан. Обязательные поля помечены *