В одной из статей я рассказывал, как делать шаблон сайта средствами HTML и CSS. Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/.
2. Переименуйте файл styles.css в style.css.
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php, index.php, sidebar.php, footer.php и распределите по ним код из index.html.
4.1. В header.php скопируйте код по строчку <!-- Конец шапки -->, так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css — новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки <!-- Основной блок --> по строку <!-- Конец основного блока -->).
4.3. В sidebar.php скопируйте код бокового меню (с <!-- Левая панель --> по <!-- Конец левой панели -->).
4.4. В footer.php вставьте оставшиеся строки (с <!-- Ноги сайта --> до конца документа index.html).
5. Удалите index.html.
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы. Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
Мы сделали динамическим блок
<head>.
<?php language_attributes(); ?>
— код вызывает функцию, возвращающую языковые атрибуты в контейнер.
<meta charset="<?php bloginfo( 'charset' ); ?>">
— вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
<?php wp_head(); ?>
— важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
<?php get_header(); ?>,
в конце —
<?php get_sidebar(); ?> <?php get_footer(); ?>
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php, что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
<?php wp_nav_menu('menu=menu'); ?>
так, чтобы получилось следующее:
<!-- Шапка -->
<div id="header">
<div id="menu">
<?php wp_nav_menu('menu=menu'); ?>
</div>Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu('menu=menu'); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php.
Теперь обновите страницу и оцените результат.
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul {
margin: 0; /* Обнуляем значение отступов */
padding: 4px; /* Значение полей */
font-size: 18px;
}
#menu ul li {
display: inline; /* Отображать как строчный элемент */
margin-right: 5px; /* Отступ слева */
padding: 3px; /* Поля вокруг текста */
}Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php, оставшиеся статическими — имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
<div id="logo">
<h1><a href="#"><?php bloginfo('name'); ?></a></h1>
<h2><a href="№" id="metamorph"><?php bloginfo('description'); ?></a></h2>
</div>Обновите страницу — результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div id="content">
<!-- Шапка -->
<div id="header">
<div id="menu">
<?php wp_nav_menu('menu=menu'); ?>
</div>
<div id="logo">
<h1><a href="#"><?php bloginfo('name'); ?></a></h1>
<h2><a href="№" id="metamorph"><?php bloginfo('description'); ?></a></h2>
</div>
</div>
<!-- Конец шапки -->Выводим посты
Переходим к части, содержащей основной контент страницы — редактироваться будет файл index.php.
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
<?php get_header(); ?>
<!-- Основной блок -->
<div id="right">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_time('j') ?> <?php the_time('M') ?> <?php the_time('Y') ?> / <?php the_tags('', ', ', ''); ?> / <?php comments_popup_link('Комментариев 0', '1 комментарий', 'Комментариев %'); ?>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php else : ?>
<h1>А здесь нет ничего :( 404 </h1>
<?php endif; ?>
<?php if (function_exists("emm_paginate")) {
emm_paginate();
} ?>
</div>
<!-- Конец основного блока -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>— начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
— отображает заголовок поста.
<?php the_time('j') ?> <?php the_time('M') ?> <?php the_time('Y') ?> / <?php the_tags('', ', ', ''); ?> / <?php comments_popup_link('Комментариев 0', '1 комментарий', 'Комментариев %'); ?>— дата в формате день, месяц (сокращённо), год. Теги, комментарии.
<?php the_excerpt(); ?>
— вывод поста.
<?php endwhile; ?>
— конец цикла при условии, что записи были.
<?php else : ?> <h1>А здесь нет ничего :( 404 </h1> <?php endif; ?>
— если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
<?php if (function_exists("emm_paginate")) { emm_paginate(); } ?>— вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу — блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки — с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней — блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'MySidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
<h3>Информация</h3> <p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p> <br />
и вместо них запишите:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели — раздел Внешний вид обзавёлся подпунктами Виджеты и Меню. Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст, в поле Заголовок введите Информация, в поле Текст — код
<p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p>
и нажмите кнопку Сохранить.
6. Обновите страницу блога — блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели — вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
<?php wp_nav_menu('menu=left_menu'); ?>2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню, нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
<!-- Левая панель -->
<div id="left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
<h3>Меню</h3>
<?php wp_nav_menu('menu=left_menu'); ?>
</div>
<!-- Конец левой панели -->Фактически статичной осталась только надпись Меню. И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.php
Так как смысловую нагрузку «подвала» сайта может возникнуть желание рано или поздно изменить, предлагаю реализовать вывод с помощью виджетов, как информационный блок в сайдбаре.
1. Откройте файл function.php и перед дескриптором ?> вставьте такой код:
register_sidebar(array(
'name' => 'foot',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<p>',
'after_title' => '</p>',
)
);Тем самым вы регистрируете блок виджетов с именем foot, которое как бы намекает на его расположение.
2. В файле footer.php весь код внутри контейнера footer замените одной строкой:
<?php dynamic_sidebar( 'foot' ); ?>
Она выводит зарегистрированный в файле functions.php блок foot.
3. Перейдите в админ-панель WordPress, откройте страницу настройки виджетов, перетащите в область foot блок Текст, в поле Текст: введите что угодно, например, нижеследующее.
<p>
Copyright © 2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a>
</p>
<p>
+7-(777)-777-77-77 | <a href="#">Москва</a>
</p> Поле Заголовок можно оставить пустым.
4. Не забудьте сохранить изменения и оцените результат: идентичный статическому шаблону низ сайта, реализованный виджетом.
Да и весь шаблон в целом стал полностью динамическим, сохранив при этом свой прежний внешний вид. Таким образом и верстаются шаблоны под WordPress. И если вы когда-нибудь услышите фразу «Натянуть шаблон на WordPress», знайте: вы это уже делали — описанные в статье действия простым языком называются именно так. Конечно, в работе с темами WordPress и тем более в их адаптации есть уйма тонкостей, но общий принцип построения и вёрстки остаётся неизменным.
Сообщить об ошибке
свою cms не проще написать для блога?)
Точно "не проще".
Спасибо! Может быть где-быстро, т.е. по "верхам", но в целом очень просто, доступно и понятно! Уважуха!!!!!!!!
Я просто в восторге! спасибо огромное за статью, очень помогло!
Бесполезная статья. Где остальные файлы WP к примеру functions ?
Подскажите, нет никаких принципиальных различий этой инструкции для версии ВП > 5