Как создать шаблон (тему) WordPress
7 февраля 2015 в 12:00 в категории Создание сайтов 0 комментариевПо отчетам статистики переходов с поисковых систем, некоторые посетители попадают на мой блог в поисках информации как создать шаблон WordPress, и в продолжение серии статей на тему «Создание сайта на WordPress«, я решил написать данную статью, которая, надеюсь, поможет вам при создании сайта на WordPress, разработать правильную структуру вашей темы WordPress.
Создание темы для WordPress’a достаточно простая задача, ведь принцип работы WordPress достаточно простой и ясный: присутствуют сущности (post и page), и соответственно циклы для вывода ленты постов. Дальше — дело вашей фантазии. И я никогда не понимал людей, которые используют чужие шаблоны и имеют много неудобств с этим, ведь проще сделать самому!
Структура и основные файлы шаблона
Пожалуй для начала, необходимо понять какова структура шаблона для WordPress и я рекомендую начать знакомство с ней с предыдущей статьи о иерархии шаблонов WordPress, это позволит вам получить основы разработки шаблона под WordPress.
Как видно на схеме, представленной в предыдущей статье, существует 7 основных типов вывода контента:
- страница архива;
- одиночная запись;
- главная страница;
- главная страница блога;
- всплывающие комментарии;
- страница 404 ошибки;
- страница поиска.
Все эти типы страниц могут иметь свой вывод (шаблон) согласно иерархии шаблонов WordPress, и основным файлом (шаблоном) темы является файл index.php, к которому будет произведено обращение, в случае отсутствия иных файлов в теме, или будет использован стандартный вывод (шаблон): если к примеру у вас нет в файлах темы шаблона для вывода комментариев (comments.php), то будет использован шаблон по-умолчанию, встроенный в WordPress.
Каждый шаблон в WordPress имеет свое название, описание, имя автора, версию и иные параметры, которые выводятся в административной части и указываются во втором по значению файле style.css, который, если не ошибаюсь, автоматически подключается при его наличии в папке с темой.
В этом файле вы можете указать данные о шаблоне, информацию о цветах, преобладающих в теме, написать имя автора, разработчика и т.д. Как прописать такие данные в файле style.css и как это будет выглядеть представлены ниже:
/* Theme Name: Nikita_Sp Blog Theme URI: http://nikita-sp.com.ua/ Description: Nikita_Sp Blog Theme Author: Nikita_Sp Author URI: http://nikita-sp.com.ua */
Как видно на изображении, в моих данных не указана версия шаблона, и выводится только надпись «версия». Также я не писал описание и прочие данные, которые вы можете добавить к данным темы, т.к. они мне не особо нужны. Ниже представлен полный список данных, которые вы можете использовать при описании темы:
/* Theme Name: Имя вашего шаблона Theme URI: http://адрес-где-можно-ознакомиться.com/скачать-тему.html Author: Собственно Автор Author URI: http://адрес-автора.com Description: Тут описание. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
Таким образом, имея минимум два файла index.php и style.css, мы можем смело заявить о созданном WordPress шаблоне. Однако на этом мы не можем останавливаться, т.к. нам нужен очень красивый шаблон, который будет хоть как-то кастомизирован под нас.
Второстепенные файлы WordPress шаблона
Следующим этапом необходимо выделить следующие блоки нашей темы:
- comments.php
- comments-popup.php
- footer.php
- header.php
- sidebar.php
Разбор начнем, как и положено с нашей «шапки», т.е. с файла header.php. В данном файле вы создаете «шапку» сайта, т.е. начинаете свой документ. У данного файла есть определенные «правила хорошего тона»:
- Открывающий тег <html> должен содержать вызов функции language_attributes().
- Тег кодировки <meta> должен находится перед остальными тегами, включая тег <title>.
- Вызывайте функцию bloginfo() чтобы вывести <meta> теги кодировки и описаний.
- Используйте wp_title() чтобы установить заголовок <title>.
- Вызывайте get_stylesheet_uri() чтобы подключить файл style.css текущей темы.
- Добавьте вызов wp_head() перед закрывающимся тегом </head>, для того чтобы плагины могли подключать свои стили, скрипты и т.п.
Пример простого файла header.php приведен ниже:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title(); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head> <body>
Также сюда добавляете начало вашего сайта, а именно основной контейнер, «шапочку», верхнее меню и любой другой контент, который вы считаете необходимым.
Для вызова файла header.php в (давайте их назовем, «теловых») файлах, файлах, которые выводят непосредственно сам контент страницы, вам необходимо использовать функцию get_header().
В файле footer.php также нет ничего сложного, тут мы закрываем все наши открытые контейнеры в файле header.php и добавляем вызов <?php wp_footer(); ?> для вывода администраторского меню при посещении сайта в соответствующем статусе, для работы плагинов и пр.
Пример простого кода файла footer.php приведен ниже:
<?php wp_footer(); ?> </body> </html>
Не забываем, также как и для файла header.php, подключить наш футер в «теловые» файлы используя get_footer().
Когда шапка и низ (футер) нашего сайта готовы, перейдем к созданию боковой колонки (сайдбара), за вывод которого отвечает файл sidebar.php. Сам файл сайдбара может быть пустым и содержать только контейнер самого сайдбара и вызов динамического сайдбара, где будут размещаться виджеты, настроенные из административной части.
Внимание! Для того чтобы пользоваться динамическим сайдбаром его необходимо еще зарегистрировать в файле functions.php!
Ниже вы можете ознакомиться с примером кода файла шаблона сайдбара с пояснениями:
<aside class="sidebar" role="complementary"> <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')){ ?> <p>Тут контент, на случай если мы не добавили виджетов в наш сайдбар или просто пустота</p> <?php } ?> </aside>
Сайдбар подключается также как и файлы header.php и footer.php с помощью функции get_sidebar(). в каждом файле, где это необходимо. Регистрацию динамического сайдбара и подключение разных сайдбаров на разные страницы мы рассмотрим в следующей статье.
Теперь у нас есть вполне себе полноценный каркас нашего будущего шаблона под WordPress и мы смело можем приступать к верстке основных частей нашего сайта — шапки и футера. Дальше — интересней, подписывайтесь и следите за новыми статьями!