Верстка под 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 можно сказать пару важных вещей: Меню сайта размечается при помощи маркированного списка, а именно:
Еще отмечу, что текущий пункт меню по умолчанию получает класс .current_page_item , вместо привычного .active , это конечно же можно изменить пересобрав структуру меню, но думаю понятно, что работу на бэкенде можно ускорить прописав дефолтный класс.
Digital-студия Маслоу — мы создаем дизайн сайтов, разрабатываем корпоративные порталы, интернет-магазины, каталоги и лендинги
Как сверстать тему для WordPress
В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Добавление темы
Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.
Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.
После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http:///wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».
После того, как тема активируется, вы увидите сообщение со ссылкой на сайт. Уже сейчас можно зайти на него и увидеть пустую страницу.
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.
Структура страниц
Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.
Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».
Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.
После добавления, список страниц должен выглядеть вот так:
Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.
Header.php и Footer.php
Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.
Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».
Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:
function enqueue_styles() < wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); wp_enqueue_style( 'font-style'); >add_action('wp_enqueue_scripts', 'enqueue_styles'); function enqueue_scripts () < wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); wp_enqueue_script('html5-shim'); >add_action('wp_enqueue_scripts', 'enqueue_scripts'); В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.
Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.
Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.
Шаблон страницы
Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:
Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.
Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:
Показать код
body < color: #8f8f8f; font: 12px Tahoma, sans-serif; background: #f8f8f8 url(images/bg.png); border-top: 5px solid #7e7e7e; margin: 0; >img < border: 0; >p < margin: 20px 0; >.alignleft < float: left; >.alignright < float: right; >.aligncenter < display: block; margin-left: auto; margin-right: auto; >.input < background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; >.button < color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: 'Oswald', sans-serif; >.image < border: 1px solid #fff; outline: 1px solid #c9c9c9; >figure img < display: block; >.wrapper < max-width: 960px; margin: auto; >header < padding: 20px 0; >.main-heading < background: transparent url(images/h1-bg.png); margin: 30px 0; padding-left: 20px; >.main-heading h1 < display: inline-block; color: #7e7e7e; font: 40px/40px 'Oswald', sans-serif; background: url(images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; >aside < float: left; width: 250px; >aside + section < margin-left: 280px; padding-bottom: 50px; >footer
В результате должна получиться вот такая картина:
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:
Форма поиска
WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:
А в файл стилей запишите стили для формы:
Показать код
.search-form
Всё, что осталось сделать – это подключить searchform.php внутри header.php.
Навигация
Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:
if (function_exists('add_theme_support'))
После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.
Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:
Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».
После этого меню уже появится на страницах но без стилей. Стилизуем его:
Показать код
.main-navigation < background: #f3f3f3; border: 1px solid #e7e7e7; >.top-menu < margin: 0; padding: 0; >.top-menu li < display: inline-block; padding: 10px 30px; margin: 0; text-transform: uppercase; list-style-position: inside; font: 14px 'Oswald', sans-serif; >.top-menu li.current_page_item < background: #29c5e6; >.top-menu a < color: #b2b2b2; text-decoration: none; >.top-menu li.current_page_item a
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок
Далее делаем вёрстку в файле footer.php: