Верстка под WordPress для чайников

Верстальщик рано или поздно сталкивается с версткой для какой-либо из существующих CMS. В этот момент возникает множество вопросов по поводу особенностей верстки под конкретную систему управления контентом. Я не знаю нюансов Bitrix и ModX Revolution. Однако проработав с WordPress 6 лет я могу рассказать об особенностях верстки, которые помогут избежать проблем во время натяжки верстки.

Эта статья со временем будет дополняться новыми сведениями о верстке WordPress.

Темы WordPress

Для того чтобы внедрить свою верстку в WordPress используются так называемые темы (themes). Существуют тысячи готовых платных и бесплатных тем, но для использования в системе своей верстки мы можем использовать один из этих подходов:

Создание своей темы.

По сути тема — набор файлов php, js и css. Она определяет не только внешний вид сайта, а также и его функционал. Например можно написать тему в которой будет встроена система бронирования номеров в отеле. В этом варианте вы создаете всю структуру файлов и папок сами. Вот стандартная структура файлов и папок, позже коснемся ее чуть подробнее:

assets (dir)
      - css (dir)
      - images (dir)
      - js (dir)
inc (dir)
template-parts (dir)
      - footer (dir)
      - header (dir)
      - navigation (dir)
      - page (dir)
      - post (dir)
404.php
archive.php
comments.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

Использование пустой стартовой темы

Например очень популярная тема у разработчиков называется Underscrores. Либо это может тема со встроенным CSS-фреймворком, таким как Bootstrap. Пример такой темы — Understrap, это симбиоз темы Underscores и CSS-фреймворка Bootstrap.

Создать дочернюю тему

Дочерняя тема создается для готовой родительской темы. Например вы купили тему, но дизайн в ней вам не совсем подходит, это и будет нашей родительской темой. Тогда создается папка с названием theme_name-child и в ней создаются шаблоны, которые переопределяют внешний вид. Например если создать файл header.php, то он переопределит дизайн шапки. И так далее.

Дочерняя тема как ребенок похожий на маму, но глаза не карие, а голубые. И родинка не на правой, а на левой щеке.

Шаблоны темы

Рассмотрим структуру шаблонов в теме. Тут все довольно просто, стандартная структура страницы сайта делится на 3 области и размещается каждая в своем отдельном файле header.php, page.php, footer.php
Порой к ним присоединяется боковая панель, если таковая предусмотрена в дизайне сайта, она живет в файле sidebar.php, к слову она не обязательно должна быть сбоку, ее можно вывести хоть в футере, хоть в хедере.

К слову, контент может содержать разные шаблоны, в зависимости от того, что нужно отобразить. Например шаблон archive.php, который отображает все записи блога. Или к примеру категорию блога category.php. Полный список и иерархию шаблонов смотрите тут

Со структурой шаблонов разобрались, а теперь посмотрим на остальные нюансы.

Меню сайта

Про меню навигации сайта на WordPress можно сказать пару важных вещей:

Меню сайта размечается при помощи маркированного списка, а именно:

<div class="menu">
<ul>
<li class="page_item page-item-2 current_page_item">
<a href="#">About</a>
</li>
<li class="page_item page-item-46">
<a href="#">Parent Page</a>
</li>
</ul>
</div>

Еще отмечу, что текущий пункт меню по умолчанию получает класс .current_page_item , вместо привычного .active, это конечно же можно изменить пересобрав структуру меню, но думаю понятно, что работу на бэкенде можно ускорить прописав дефолтный класс.