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

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

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

Темы WordPress

Для того чтобы внедрить свою верстку в WordPress используются так называемые темы (themes). Существуют тысячи готовых платных и бесплатных тем, но для использования в системе своей верстки нам необходимо создать свою тему, либо использовать так называемую «пустую» или «стартовую» тему. По сути тема — набор файлов php, js и css. Она WordPress определяет не только внешний вид сайта, а также и его функционал. Например можно написать тему в которой будет встроена система бронирования номеров в отеле.

Шаблоны темы

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

Верстка под WordPress для чайников
Структура шаблонов страницы в WordPress

К слову, контент может содержать разные шаблоны, в зависимости от того, что нужно отобразить. Например шаблон 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

Оставьте комментарий