Особенности и нюансы верстки под WordPress

Верстка под WordPress сегодня очень популярна. Начинающим верстальщикам, которые еще не сталкивались с этой CMS, нужно быть готовым к тому, что знаний HTML и CSS будет недостаточно.

WordPress (WP) – это:

• система управления содержимым сайта с открытым исходным кодом; написана на PHP;
• сервер базы данных – MySQL;
• выпущена под лицензией GNU GPL версии 2.

Сфера применения – от простых блогов до сложных новостных ресурсов и интернет-магазинов. Встроенная система тем и плагинов вместе с удачной архитектурой позволяет конструировать проекты с широким функционалом.

Согласно последним отчетам BuiltWith, W3tech и многих других изданий, безусловные фавориты на мировом рынке сайтостроительства – это CMS WordPress, Joomla и Drupal.

Бесплатный движок WordPress занимает первое место с долей 58,8%; Joomla и Drupal следуют за ним с серьезным отрывом – 6,5 и 4,8% мирового рынка CMS.

Основные особенности верстки

Для начала вам необходимо ознакомиться с базовыми основами программирования на PHP и с самим шаблоном WP.

У WordPress есть хорошая документация, в том числе и переводная. Это делает работу с CMS намного проще. Как правило, достаточно в необходимом месте сверстанного обычного шаблона HTML вызвать функции WordPress, которые часто можно скопировать непосредственно из документации. Пожалуй, это все отличие верстки под WordPress от просто верстки шаблона.

Например, вы получили задачу – вывести на страницу записи. Самое простое решение – ввести в поисковике запрос «wordpress вывод постов» и прочесть в документации о цикле WordPress, использовать пример цикла из той же документации в своей верстке сайта.

Далее расскажу о самом интересном процессе – верстке шаблона HTML в шаблон для WordPress.

Этапы подготовки:

1. Создаем папку для хранения всех файлов, которые входят в шаблон сайта.
2. Добавляем HTML-разметку со следующим кодом, где будущий шаблон будет делиться на три части: header (шапка сайта), main (середина) и footer (нижняя часть сайта).
3. Создаем текстовые файлы в формате .php. Рассмотрим, за что отвечает каждый из них:header.php – верхняя часть шаблона. Код в этом файле пишется один раз. Потом его не нужно писать заново, достаточно использовать переменную в других файлах.index.php – вывод записей на главной странице блога.sidebar.php – вывод боковой колонки блога. Файл довольно короткий, содержит код для вывода поиска и виджетов, которые можно изменять из админки блога.archive.php – страницы рубрик, меток, а также навигация на блоге.Например, можно вывести все записи с одной рубрики или же все записи, отмеченные одной и той же меткой.search.php – страница для вывода записей из поиска блога. Файл почти ничем не отличается от index.php, кроме вывода поискового запроса пользователя.comments.php – комментарии на сайте.page.php – вывод содержимого страниц на блоге. Например, такие как «Контакты» или «Карта сайта».functions.php – некоторые функции на блоге, в него можно добавлять практически любой код. Например, можно вывести хлебные крошки без плагина, просто добавить нужный код и далее использовать его на любой странице сайта.

Важно не забыть создать файл style.css и папку для images.

На этом подготовку шаблона можно считать законченой, далее приступаем к верстке.

Какие нюансы следует учитывать при верстке проекта

1. Шаблон должен легко разделяться на шапку сайта, собственно контент и подвал. Чтобы скрывать некоторые элементы шапки/подвала, WP предоставляет множество функций-условий (is front page(), is_404() etc.). Если необходимо изменять внешний вид – CSS умеет, body_class() имеется.
2. При верстке различных меню, которые будут управляться через Внешний вид -> меню сайта, необходимо придерживаться следующей структуры:

   Из нюансов здесь важно то, что подменю должны иметь css-класс sub-menu. Это избавит вас от необходимости писать кастомный волкер при сборке сайта для функции wp_nav_menu($args);.

3. Если у вас на сайте есть галереи изображений (по три в ряд, по шесть в ряд и т.д.), то необходимо привести верстку этих галерей в верстку, которую генерирует WP шорткодом gallery. Или переопределить этот шорткод и сделать верстку, придерживаясь правила «Верстка до списка, Верстка элемента списка, Верстка после списка», если функционал WP по части количества колонок и прочего избыточен.
4. Верстка постраничной навигации, генерируемая WP, принимает примерно следующий вид:

Как вывод, могу сказать, что научиться верстать под WordPress – достаточно просто. Весь блок вышесказанного умещается в одну фразу – верстайте, стилизуя разметку, которую генерируют WP/плагины/сниппеты-функции, и у вас все получится.