Всем здравствуйте. В этой статье пойдет речь о первом неловком опыте верстки под Wordpress. Опишу ситуацию, клиент приобрел тему для WP, дизайнеры немного пофантазировали и вот мы получаем на выходе макет многостраничного сайта (интернет-магазин, плод извращенной фантазии клиента и кропотливой работы дизайнера) который необходимо сверстать, причем так, чтобы при натяжке на движок не захотелось задушить клиента, утопить дизайнера и застрелиться.

Но мой первый опыт верстки под WP нельзя назвать приятным. Следующие пункты — это не истина в первой инстанции, это исключительно описание моего небольшого опыта, надеюсь, что эта информация пригодится кому-нибудь, ну и конечно искренне надеюсь на критику.


Сразу следует отметить, что необходимо:

Style Guide.
По возможности Вам необходим guide, если проект небольшой, то вы без него можете обойтись, но если у Вас больше одной страницы, то настоятельно рекомендую оговорить это с дизайнером, а лучше, чтобы дизайнеры по умолчанию предоставляли вам его всегда. Это значительно ускорит верстку, если вы заранее сверстаете ряд компонентов и определите ряд базовых стилей.

Логика страниц.
Вы должны прекрасно понимать какие страницы будут сделаны исключительно с помощью визуального редактора, а какие будут в большинстве своем использовать шорткоды. Лучше всего, сразу все страницы разбить на эти группы, нарисовать схему.

Header, Footer etc.
Отличный способ потратить время – создание своего хэдера и футера!
Можно пойти невероятно занимательным путем, имея header, footer, писать свои, а имеющимся в теме, задавать “display:none”. Да, кому-то может показаться это решение вполне приемлемым, а может и нет, я не знаю, я не читаю мысли. Но могу с уверенностью сказать какое решение значительно упрощает жизнь. Этот вариант менее веселый, но нужно найти исходники структуры (header.php, footer.php etc) и внести изменения в них. Это касается и остальных файлов.
Если мы пишем на WP, то необходимо использовать все его возможности.

Shortcode.
Отличная вещь, хоть иногда и можно заиграться с ними и чуток переборщить. Используйте их только там, где это реально необходимо. Помните, Вы создаете сайт на CMS, клиент может захотеть потом что то поменять. Практически везде, где я читал рекомендуют писать в function.php. Это вполне себе нормальный, а может и хороший вариант, но я поделюсь еще одним вариантом – это вынесение ваши шорткоды в отдельный файл shortcode.php. В вэбе сейчас царствует компонентный подход, давайте поддержим его правление!

Images.
Здесь просто небольшой совет, т.к. клиент не всегда следует логике при наполнении контентом своего сайта, то есть смысл сделать отображение картинок, фотографий максимально универсальным. Используйте overflow для обертки, object-fit для image, также для image вы можете использовать max-width. Помните, клиент может захотеть залить любую картинку.

Шаблонные страницы.
Есть страницы, структура которых повторяется или сама страница будет часто повторяться: страница новости, блога и т.д. Вам необходимо предусмотреть стили для максимального количества тегов (p, ul, li, h1 etc). Если вдруг клиент захочет добавить список или заголовок, span или em, а он будет выбиваться из стилистики сайта? Будет как-то неловко.

Таблицы.
При верстке заполняемых таблиц рекомендую не использовать классы, т.к. заказчик зачастую забывает проставлять классы таблицам. Да, знаю, это была бы лучшая работа на свете если бы не все эти заказчики.

Параграфы.
Если в параграфах используются выделения не только жирным стилем, то как показывает практика, лучше оборачивайте и используйте для этих целей em или в крайнем случае span. Клиенту проще оборачивать отдельные слова в тег em, потому что он на панели редактора.

Стили.
По этому поводу мнения у многих расходятся. Одни считают, что если вы работает с темой WP, то лучше писать большинство стилей именно через админку, клиенту проще будет это понять и изменять. Другие считают, что нечего заказчиков допускать к стилям и все стремятся прописать в файле. Здесь я считаю исключительно на ваше усмотрение и желание клиента. Если у него есть базовые знания HTML/CSS он может попросить Вас сделать именно в файле.

В заключении хочу сказать, что верстка под CMS практически ничем не отличатся от просто верстки. В сети куча вопросов «как верстать по CMS?”. Соблюдая эти небольшие правила, Вам будет проще адаптировать верстку под движок.