WORD PRESS СОЗДАНИЕ ТЕМЫ С НУЛЯ

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом 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.

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

Предварительный осмотр

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями.

Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.

Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

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

Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.

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

В результате должна получиться вот такая картина:

Логотип

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

Форма поиска

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

А в файл стилей запишите стили для формы:

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

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

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

<footer>
<div class=»footer-content»>
<div class=»twitter»>
<h3 class=»footer-heading»><?php echo __(‘Twitter feed’, ‘whitesquare’); ?></h3>
<time datetime=»2012-10-23″><a href=»#» class=»twitter-time»>23 oct</a></time>
<p><?php echo __(‘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 aug’, ‘whitesquare’); ?></p>
</div>
<div class=»sitemap»>
<h3 class=»footer-heading»><?php echo __(‘Sitemap’, ‘whitesquare’); ?></h3>
<div class=»column first»>
<a href=»/home/»><?php echo __(‘Home’, ‘whitesquare’); ?></a>
<a href=»/about/»><?php echo __(‘About’, ‘whitesquare’); ?></a>
<a href=»/services/»><?php echo __(‘Services’, ‘whitesquare’); ?></a>
</div>
<div class=»column»>
<a href=»/partners/»><?php echo __(‘Partners’, ‘whitesquare’); ?></a>
<a href=»/customers/»><?php echo __(‘Support’, ‘whitesquare’); ?></a>
<a href=»/contact/»><?php echo __(‘Contact’, ‘whitesquare’); ?></a>
</div>
</div>
<div class=»social»>
<h3 class=»footer-heading»><?php echo __(‘Social networks’, ‘whitesquare’); ?></h3>
<a href=»http://twitter.com/» class=»social-icon twitter-icon»></a>
<a href=»http://facebook.com/» class=»social-icon facebook-icon»></a>
<a href=»http://plus.google.com/» class=»social-icon google-plus-icon»></a>
<a href=»http://vimeo.com/» class=»social-icon-small vimeo-icon»></a>
<a href=»http://youtube.com/» class=»social-icon-small youtube-icon»></a>
<a href=»http://flickr.com/» class=»social-icon-small flickr-icon»></a>
<a href=»http://instagram.com/» class=»social-icon-small instagram-icon»></a>
<a href=»/rss/» class=»social-icon-small rss-icon»></a>
</div>
<div class=»footer-logo»>
<a href=»/»><img src=»<?php bloginfo(‘template_url’); ?>/images/footer-logo.png» alt=»Whitesquare logo»></a>
<p><?php echo __(‘Copyright © 2012 Whitesquare. Создание pcklab’, ‘whitesquare’); ?>

Главная страница

Если вы посмотрите на PSD-макеты, то увидите, что разметка главной страницы отличается от внутренней. В частности, на главной странице нет боковой панели и заголовка страницы.

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

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

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

Теперь осталось стилизовать данный код.

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехали. Это связано с тем, что редактор WordPress добавил пустые абзацы в наш код в строке перевода. Чтобы решить эту проблему, создайте в основной теме файл function.php и поместите в него код.

Страница О нас

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу О нас. По той же схеме, как мы заполняли главную страницу – подготовьте изображения и добавьте их в медиа-интерфейс.

Шаблон сообщения

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За использование одиночных постов отвечает шаблон Single.php. Создайте его со следующим содержимым:

Страница поиска

В самом начале, когда мы создавали шаблон шапки, мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и ссылки в него:

От других шаблонов этот вариант отличается тем, что мы выводим заголовок с поиском текста, а затем список результатов поиска.

Страница архива

В WordPress кроме одиночных постов существуют страницы, которые находятся в списке управляемых постов. Это может быть категория, сортировка по дате, автору или ключевым словам.

В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который можно использовать с разным контентом. Для каждого из указанных списков существуют свои шаблоны, однако, если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:

Заключение

Ссылки на предыдущие статьи:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
Верстка для самых маленьких. Верстаем страницу по БЭМу (xnim)
Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки (lexnekr)

Update:
Статья была существенно обновлена в соответствии с пожеланиями комментаторов.

В этой статье я расскажу о способах создания шаблонов для постоянных страниц WordPress. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей.

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как «Обо мне», «Контакты», «Карта сайта»; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как «запись» в рубрике «Кодекс», а ссылки в меню шапки ведут на страницы: Функции.

Страницы похожи на записи — они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое — это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.

Создание страниц в WordPress

Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress.

Шаблон страницы через файл с произвольным названием (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать .php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать метку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:

/*
Template Name: Мой шаблон страницы
Template Post Type: post, page, product
*/

После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.

Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все .php файлы в корневой папке темы и в всех вложенных папках (просматривается один уровень) на наличие следующей строки (строка может располагаться где угодно и как угодно в файле):

Template Name: ***

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default, если шаблон не указан:

_wp_page_template = default
_wp_page_template = tpl_my-page.php

Далее, когда пользователь посещает страницу, WordPress проверят метаполе _wp_page_template, если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии.

Локализация названия шаблона

/**
* Template Name: Мой шаблон страницы
* Template Post Type: post, page, product
*/
__( ‘Мой шаблон страницы’, ‘my-theme’ );

my-theme — это ID перевода — параметр Text Domain:, который указывается в заголовках темы и при подключении файла перевода, см. load_theme_textdomain().

Шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:

Изменение слага страницы

Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts, тогда создадим в теме файл page-contacts.php. и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php.

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

Шаблон страницы через фильтр «template_include» (коддинг)

Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций.

 

Оцените статью
NaWordpress.ru
Добавить комментарий