Как сверстать тему для WordPress03.07.2014 08:33

Введение В предыдущих статьях мы рассмотрели принципы верстки на чистом 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://{site-name}/wp-admin, а затем в управление темами (Appearance → Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

После того, как тема активируется, вы увидите сообщение со ссылкой на сайт. Уже сейчас можно зайти на него и увидеть пустую страницу.

Предварительный осмотр Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (page-home) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы 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 в папке нашего шаблона и наполним его содержимым. <?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>

>

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы, подключили стили и всё необходимое для отображения нашего сайта в старых версиях Internet Explorer. В последней строке вызываем команду wp_head (), которая добавляет заголовки WordPress. Также открываем блок «wrapper».Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

Здесь мы закрываем открытые блоки и вызываем wp_footer (), чтобы добавить скрипты футера WordPress.Шаблон страницы Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.Создайте в папке темы файл page.php и добавьте в него следующий код:

Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

Показать код body { color: #8f8f8f; font: 12 px Tahoma, sans-serif; background: #f8f8f8 url (images/bg.png); border-top: 5 px solid #7e7e7e; margin: 0; }

img { border: 0; }

p { margin: 20 px 0; }

.alignleft { float: left; }

.alignright { float: right; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.input { background-color: #f3f3f3; border: 1 px solid #e7e7e7; height: 30 px; color: #b2b2b2; padding: 0 10 px; vertical-align: top; }

.button { color: #fff; background-color: #29c5e6; border: none; height: 32 px; font-family: 'Oswald', sans-serif; }

.image { border: 1 px solid #fff; outline: 1 px solid #c9c9c9; }

figure img { display: block; }

.wrapper { max-width: 960 px; margin: auto; }

header { padding: 20 px 0; }

aside { float: left; width: 250 px; }

aside + section { margin-left: 280 px; padding-bottom: 50 px; }

footer { clear: both; background: #7e7e7e; color: #dbdbdb; font-size: 11 px; } В результате должна получиться вот такая картина:

Логотип После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

А в файл стилей запишите стили для формы: Показать код .search-form { float: right; } Всё, что осталось сделать — это подключить searchform.php внутри header.php.

…

Навигация

Несмотря на то, что навигация является довольно сложным элементом, добавить ее не составит особого труда. Просто добавьте в конец header.php следующий код:

Ну и конечно же стилиПоказать код .main-navigation { background: #f3f3f3; border: 1 px solid #e7e7e7; }

.top-menu { margin: 0; padding: 0; }

.top-menu li { display: inline-block; padding: 10 px 30 px; margin: 0; text-transform: uppercase; list-style-position: inside; font: 14 px '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 { color: #fff; } Футер Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png — логотип футераimages/social.png — спрайты больших иконокimages/social-small.png — спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

И прописываем стили в style.css: Показать код .footer-content { max-width: 960 px; margin: auto; padding: 10 px 0; height: 90 px; }

.footer-heading { font: 14 px 'Oswald', sans-serif; color: #fff; border-bottom: 1 px solid #919191; margin: 0 0 10 px 0; text-transform: uppercase; }

footer a { color: #dbdbdb; }

footer p { margin: 5 px 0; }

.twitter-time { color: #b4aeae; }

.twitter { float: left; width: 300 px; }

.twitter p { padding-right: 15 px; }

.sitemap { width: 150 px; float: left; margin-left: 20 px; padding-right: 15 px; }

.sitemap .column { display: inline-block; margin-left: 40 px; }

.sitemap .column.first { margin-left: 0; }

.sitemap a { display: block; text-decoration: none; font-size: 12 px; margin-bottom: 5 px; }

.sitemap a: hover { text-decoration: underline; }

.social { float: left; margin-left: 20 px; width: 130 px; }

.social-icon { width: 30 px; height: 30 px; background: url (images/social.png) no-repeat; display: inline-block; margin-right: 10 px; }

.social-icon-small { width: 16 px; height: 16 px; background: url (images/social-small.png) no-repeat; display: inline-block; margin: 5 px 6 px 0 0; }

.twitter-icon { background-position: 0 0; }

.facebook-icon { background-position: -30 px 0; }

.google-plus-icon { background-position: -60 px 0; }

.vimeo-icon { background-position: 0 0; }

.youtube-icon { background-position: -16 px 0; }

.flickr-icon { background-position: -32 px 0; }

.instagram-icon { background-position: -48 px 0; }

.rss-icon { background-position: -64 px 0; }

.footer-logo { float: right; margin-top: 20 px; font-size: 10 px; text-align: right; } В итоге главная страница сайта должна выглядеть вот так:

Главная страница Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-{название страницы}.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл page-home.php в папке темы. Добавьте в него следующий код:

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.

Прежде, чем добавить контент главной страницы — необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media → Library. Назовём эти изображения так:

home-1.pnghome-2.pnghome-3.pnghome-4.pnghome-5.pngclients-1.pngclients-2.pngclients-3.pngclients-4.pngclients-5.pngclients-6.pngclients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages → Home → Edit Page и в поле text введите содержимое страницы:

Показать код

Fusce vitae nibn quis diam fermentum

Etiam adipscing ultricies commodo.

Lorem ipsum dolop
Ultricies pellentesque
Aliquam ipsum
Nullam sed mauris ut

About whitesquare

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.

A word from our ceo

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.

Yane Naumoski, CEO

Services

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.

Our teams

Lorem ipsum

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et

Lorem ipsum

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et

Lorem ipsum

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et

24/7/365 Support

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.

Our clients

Не забудьте поправить пути до картинок. Они зависят от даты добавления.Теперь осталось стилизовать данный код.

Показать код .slider { margin-top: 30 px; font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; }

.slider .content { height: 220 px; padding: 30 px 40 px; background: #e2e2e2; }

.slider .title { color: #5a5a5a; font-size: 42 px; }

.slider .subtitle { color: #acacac; font-size: 20 px; }

.slider .links { display: block; margin: 0; padding: 10 px; background: #f3f3f3; border-bottom: 1 px solid #e7e7e7; counter-reset: list 0; color: #8f8f8f; }

.slider .links li { display: inline-block; font-size: 18 px; line-height: 23 px; margin-right: 55 px; cursor: pointer; }

.slider .links li.active { color: #29c5e6; }

.slider .links li: before { display: inline-block; counter-increment: list; content: counter (list) » »; background: #8f8f8f; color: #fff; width: 23 px; text-align: center; margin-right: 10 px; font-size: 16 px; cursor: pointer; }

.slider .links li.active: before { background: #29c5e6; }

.teaser { display: inline-block; padding: 0 10 px; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: top; }

.teaser .heading { background: transparent url (images/h1-bg.png); margin: 40 px 0 20 px; height: 16 px; }

.teaser .bullet { display: inline-block; width: 16 px; height: 16 px; background: #29c5e6; vertical-align: top; }

.teaser .heading-text { display: inline-block; text-transform: uppercase; font: normal 14 px/16 px 'Oswald', sans-serif; margin: 0; padding: 0 10 px; background: url (images/bg.png); }

.teaser .image { float: left; margin-right: 20 px; }

.teaser .small-block { margin-bottom: 10 px; }

.teaser .small-block .image { margin-right: 10 px; }

.teaser .more, .teaser .more a { color: #525252; margin-bottom: 0; }

.teaser-small-heading { display: block; color: #525252; margin: 0; font-weight: normal; font-size: 11 px; text-transform: uppercase; }

.teaser-small-paragraph { margin: 4 px 0; font-size: 11 px; }

.clients img { display: inline-block; margin-right: 30 px; } Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

Для этого создайте файл sidebar.php и поместите в него следующий код:

ID; ?>