Создаем простую тему на wordpress

Здравствуйте, давайте попробуем создать простую wordpress тему с нуля.

Скачать исходники для статьи можно ниже

Первое, что нам нужно знать – это из чего состоят wordpress темы?

Если вы откроете любую скачанную wordpress тему (для примера возьму свою простенькую тему – glossyblue):

, то, наверняка, увидите в ней папку с названием images – здесь хранятся картинки темы, из которых состоит ее дизайн.
Также вы найдете файл стилей – style.css, который служит для описания внешнего вида страницы, написанный с помощью языков разметки HTML и XHTML, то есть в нем прописывается где должен располагаться тот или иной блок сайта, его размеры, границы, шрифт текста и многое другое.

Здесь же вы увидите скриншот темы – screenshot.png.

Все остальное документы – это php файлы – их у темы для WordPress сайта может быть разное количество с разными названиями. Все зависит от создателя темы. Но вот те, которые действительно необходимы для создания темы, то есть без которых она просто не будет работать, совсем немного.

А типичный комплект php файлов таков:

index.php
single.php
page.php
header.php
sidebar.php
footer.php
comments.php
archives.php
404.php
functions.php

Каждый из вышеуказанных php-файлов называется шаблоном.

Страницы WordPress сайта собираются подобно пазлу из файлов-шаблонов:

За шапку отвечает шаблон – header.php.

За подвал отвечает – footer.php.

За боковые колонки – sidebar.php.

За контент (центральная, основная часть сайта) – index.php, page.php, single.php и др. – в зависимости от того, что вы просматриваете.

Какие же шаблоны используются при выводе разных типов контента в WordPress, упрощенно (более подробно читайте на “codex.wordpress.org” статью “иерархия шаблонов”):

Отображение главной страницы – home.php или index.php

Отображение одиночной записи (поста) – single.php

Отображение статической страницы – page.php

Отображение рубрики – category.php

Отображение меток – tag.php

Отображение результатов поиска – search.php

Отображение ошибки 404 (Не найдено) – 404.php

Отображение комментариев – comments.php

Отображение архива записей – archives.php

и др.

Некоторые шаблоны (например header.php и footer.php) задействованы практически на всех страницах, другие используются только при определенных условиях (например шаблон ошибки – отсутствие нужной страницы – 404.php).

Остался еще один типичный файл-шаблон для большинства тем wordpress – это functions.php.

В задачи этого файла входит обработка php кодов. Используя functions.php можно расширить функциональные возможности WordPress, как те, что предлагаются разработчиками WordPress (регистрация и настройка виджетов и т.п.), так и добавить свои функции, хаки, хуки и т.д.

Но для создаваемой нами простенькой темы wordpress данный файл-шаблон не понадобиться (functions.php).

Какие же шаблоны-файлы мы будем создавать для нашей простенькой темы:

index.php
header.php
sidebar.php
footer.php
comments.php

Создание файла header.php.

Header, хедер или шапка страницы сайта.

Что входит в этот файл.

Обычные и необходимые каждой странице сайта части html-кода.

Это доктип (DOCTYPE), теги <html>,<head> и тег <body>, мета-тег описывающий кодировку, мета-тег привязки стилей css, привязки rss фида, само собой разумеется, мета-теги title, description, keywords и другие. Здесь же по традиции находится так называемые «сквозные» элементы сайта, то есть те, которые применяются на каждой его странице. Это название сайта, и как Вы и сами могли заметить на многих сайтах – горизонтальное меню сайта.

Открываем бесплатный редактор кода – Notepad++ и вставляем следующий код:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="О том как создать сайт самому" />
<meta name="keywords" content="создание сайтов, сайтостроение" />
<title><?php wp_title (' '); ?> | <?php if (wp_title (' ', false)) { echo ' | '; } ?><?php bloginfo ('name'); ?></title>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/ваш фид" />
<link rel="pingback" href="<?php bloginfo ('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen"/>
<?php wp_head (); ?>
</head>
<body>
<div id="cont">
<div id="header">
<div id="blogtitle"><?php bloginfo ('name'); ?></div>
<div id="subtitle"><h1><?php bloginfo ('description');?></h1></div>
<ul id="menu">
<li><a href="http://ваш сайт.com/">Главная</a></li>
<li><a href="http://ваш сайт.com/o sajte">О сайте</a></li>
<li><a href="http://ваш сайт.com/kontakty">Контакты</a></li>
</ul>
</div>

Собственно это и есть готовый код файла header. А теперь разберемся какая часть кода за что отвечает.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> – это так называемый доктайп <!DOCTYPE>, он предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях (HTML 4.01, HTML 5), также имеется XHTML (XHTML 1.0, XHTML 1.1).

<head> — Открывающий тег <head>. Между открывающим тегом <head> и закрывающим тегом </head> находится очень важная информация. Судите сами:

<title><?php wp_title (‘ ‘); ?> | <?php if (wp_title (‘ ‘, false)) { echo ‘ | ‘; } ?><?php bloginfo (‘name’); ?></title> — мета-тег title. Очень важный мета-тег. С помощью этого кода мета-тег title будет создан в виде: название рубрика – название статьи – название сайта.

<?php wp_head (); ?> — код, обеспечивающий работу многих плагинов, которые добавляют в страницу сайта свой код.

</head> — закрывающий тег <head>.

Дальше идет тег <body>. Все, что находится в пределах этого тега, собственно и есть Ваш сайт, то есть все то, что видят на экране монитора посетители Вашего сайта.

Первым идет открывающий тег контейнера cont — <div id=”cont”>. Что это за контейнер. В этом простом сайте, все контейнеры – header, sidebar, content и futer размещаются в общем контейнере cont.

<div id=”header”> — открывающий тег контейнера header

<div id=”blogtitle”><?php bloginfo (‘name’); ?></div> — контейнер blogtitle, с кодом вызова названия сайта. Название сайта Вы задаете в админпанели движка.

<div id=”subtitle”><h1><?php bloginfo (‘description’);?></h1></div> — контейнер subtitle, с кодом вызова описания сайта. Описание сайта Вы задаете в админпанели движка wordpress.

<ul id=”menu”> – меню в хедере, созданное с помощью списков.

<ul id=”menu”>
<li><a href=”http://ваш сайт.com/”>Главная</a></li>
<li><a href=”http://ваш сайт.com/o sajte”>О сайте</a></li>
<li><a href=”http://ваш сайт.com/kontakty”>Контакты</a></li>
</ul>

Правда, проще всего вставить меню с помощью функции wp_nav_menu – как это сделать читайте в моей предыдущей статье – Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu.

</div> — закрывающий тег контейнера header

Далее сохраняем созданный файл header в заранее созданной папке темы, естественно под именем header и как php файл.

Создаем файл стилей для нашей простой темы wordpress – style.css.

В самом деле, нужно же что-то делать с контейнерами, заголовком, описанием, меню – в общем всем, что мы напихали в файл хедера и еще напихаем в другие файлы. То есть дать указания всему этому хозяйству, где ему стоять и как при этом выглядеть. Вот для этого мы и создадим файл стилей css WordPress темы.

Если Вы откроете любой файл стилей css – style.css – готовой темы, то сможете сами убедиться в том, что все они начинаются со служебной информации, закрытой знаками комментария.

Текст в комментариях закрыт от браузеров, но он очень важен для движка WordPress. Этот текст не является непосредственно кодом css, но если WordPress не найдет этой записи, то не найдет и Вашу тему. Так что вставляем в самое начало файла стилей css вот такой код, естественно с Вашими данными:

/*
Theme Name: vasha tema
Theme URL: http://ваш сайт.com/
Description: moya tema o saitostroenii
Author: Ivan Pupkin
Author URI: http://ваш сайт.com/
Version: 1.0
*/

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

* {
border: 0;
margin: 0;
padding: 0;
}

body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif
}

h1 {font-size:12px;}
h2 {font-size:16px;}
h3 {font-size:12px;}
h4 {font-size:14px;}

#cont {
width: 900px;
margin: 0 auto;
}

#header {
width: 890px;
height: 150px;
margin: 0 auto;
}

#blogtitle{
width:100px;
font-size:200%;
float:left;
color: #008800;
position: absolute;
left: 450px;

}
#subtitle {
width:250px;
text-align:justify;
left: 400px;
float: left;
position: absolute;
top: 60px;
}

#menu {
position:absolute;
width: 50px;
float: left;
left: 800px;
}

Что здесь и к чему. Самый первый код со звездочкой это так называемые глобальные правила. Звездочка означает, что эти правила действуют для всего сайта. Зачем нужна такая «глобализация». Как видите, с помощью этих правил, заданы нулевые значения рамок, полей и отступов. То есть если в файле стилей css WordPress темы не указаны для какого-то элемента числовые значения этих параметров, то они будут равны нулю для всех браузеров. Что очень не помешает в кроссбраузерности создаваемого сайта.

Дальше выписаны правила для тега body. Здесь просто задан размер шрифта для всей страницы и его тип.

Задан размер шрифта для заголовков. Очень удобно.

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

Правила для контейнера header. Просто заданы ширина, высота контейнера и положение. Хотя куда ему деваться из контейнера.

Правила для контейнера blogtitle. В этом контейнере будет название сайта. Здесь заданы: ширина контейнера, далее размер шрифта и его цвет, положение контейнера – слева, размещение – слева 450.

Правила для контейнера subtitle. В этом контейнере будет описание сайта. Здесь заданы: предполагаемая ширина контейнера, выравнивание текста по ширине, положение контейнера – слева, размещение – слева 400, а так же размещение сверху – 60. Чтобы он не лег на blogtitle.

Правила для контейнера menu. Заданы позиционирование, ширина, положение и оступ слева – 800.

Вот пока и все по созданию файла стилей css WordPress темы. Это конечно далеко не все, естественно, что мы еще вернемся к файлу стилей.

Создание файла index.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

<?php get_header (); ?>
<div id="content">
<?php if (have_posts ()) : while (have_posts ()) : the_post (); ?>
<div class=«title»><h2><?php the_title (); ?></h2></div>
<div class="date"><?php the_time ('F dS, Y') ?></div>
<?php the_content (__ ('Читать полностью'));?>
<?php endwhile; else: ?>
<p><?php _e ('Такая страница не существует'); ?></p>
<?php endif; ?>
<?php if (function_exists ('wp_pagenavi')) { wp_pagenavi (); } ?>
</div>
<?php get_sidebar (); ?>
<?php get_footer (); ?>

Ну и по строкам:

<?php get_header (); ?> — код, отвечающий за вставку шапки сайта, то есть хедера или точнее шаблона header

<div id=”content”> — открывающий тег контейнера content, в котором мы собственно и видим содержание страницы сайта

<?php if (have_posts ()) : while (have_posts ()) : the_post (); ?> — код цикла, отвечающий за вывод контента на страницу сайта

<div class=”title”><h2><?php the_title (); ?></h2></div> — контейнер title, в котором находится заголовок страницы

<div class=”date”><?php the_time (‘F dS, Y’) ?></div> — контейнер date, в котором находится код отвечающий за вывод даты создания записи

<?php the_content (__ (‘Читать полностью’));?> — обязательная часть кода цикла. Если Вы создаете не полную запись, а срезанную с помощью тега more, то этот код создаст ссылку на полный вариант записи

<?php endwhile; else: ?>
<p><?php _e (‘Такая страница не существует’); ?></p> — код с условием, если не найдена страница сайта и строка, появляющаяся в результатах поиска

<?php endif; ?> — закрывающий тег кода цикла

<?php if (function_exists (‘wp_pagenavi’)) { wp_pagenavi (); } ?> — код вывода страниц с помощью очень хорошего плагина wp-pagenavi, который очень часто вставляют в шаблоны сайтов WordPress. В чем его «хорошесть». В админ-панели движка WordPress можно выставить значение количества записей на одной странице. Если количество записей станет больше указанного, то следующие записи WordPress покажет на другой странице, а внизу появится строка со ссылками на эти другие страницы. Причем внешний вид ссылок легко можно настроить

</div> — закрывающий тег контейнера content

<?php get_sidebar (); ?> — код, отвечающий за вставку сайдбара или шаблона sidebar

<?php get_footer (); ?> — код, отвечающий за вставку футера или шаблона footer

Вот и весь код файла index.php. Как видите, потихоньку шаблоны сайтов WordPress открывают свои секреты… Да, чуть не забыл! В файл стилей добавим вот такой код:

#content{
width:720px;
float: left;
padding-bottom: 20px;
padding-right: 20px;
text-align: justify;
}
.title {
color: #FF0000;
font-size: 18px;
text-decoration:none;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.date {
font-size: 10px;
padding: 0px 0px 10px 0px;
background-color: #f2f2f2;
}

Что это такое:

Правила для контейнера content. Задана ширина контейнера, положение, отступы снизу и справа для того, чтобы не наезжал на сайдбар и футер, выравнивание текста записи по ширине

Правила для контейнера title. Заданы параметры шрифта заглавия страниц сайта: цвет, размер, полужирное начертание и тип шрифта

Правила для контейнера date. Заданы параметры шрифта даты создания записи: размер шрифта, отступы, фон

Во пока, на сегодня, и все о том, как создавать шаблоны сайтов WordPress и в частности как создавать файл index.php. Остались файлы sidebar и footer.

Создаем файл sidebar.php.

Чтобы создаваемая нами простая тема wordpress заработала, нам осталось сделать еще три файла, даже два – sidebar.php и futer.php. Файл 404.php на работоспособность темы не влияет. Просто если из файла index.php убрать код вывода этого файла, то он совсем пустой будет. Да и файл этот совсем простой. Итак – к делу!

Открываем редактор кода – Notepad++ и вставляем следующий код:

<div id="sidebar">
<h4>Категории</h4>
<br>
<ul><?php wp_list_cats ('sort_column=name'); ?></ul>
<br>
<h4>Новое на сайте</h4> <br>
<ul><?php get_archives ('postbypost', 10); ?></ul>
<br>
<h4>Архивы</h4> <br>
<ul><?php wp_get_archives ('type=monthly'); ?></ul>
</div>

, где:

<div id=”sidebar”> – открывающий тег контейнера sidebar.

<h4>Категории</h4> — заглавие списка категорий.

<br> — тег перевода строки, чтобы не сбилось все в кучу.

<ul><?php wp_list_cats (‘sort_column=name’); ?></ul> — код вывода списка категорий.

И аналогично дальше заглавия списков новых записей и архивов по месяцам, с кодами их вывода.

Внесем изменения в файл стилей (style.css). Вставим вот такой код:

#sidebar{
float:left;
width:150px;
margin-top: 20px;
}

Правила для контейнера sidebar. Здесь просто задано положение контейнера sidebar, его ширина и отступ сверху, для красоты.

Создаем файл footer.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

<div id="footer">
<p>Copyright &copy; 2013 <a href="<?php bloginfo ('url'); ?>"><?php bloginfo ('name'); ?></a></p>
</div>
</div>
</body>
</html>

, где:

<div id=”footer”> — открывающий тег контейнера footer.

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

</div> — закрывающий тег контейнера footer.

</div> — закрывающий тег контейнера cont.

Ну и закрывающие теги </body> и </html>.

В файл стилей (style.css) добавим:

#footer {
height:50px;
width: 890px;
float: left;
}

#footer p {
font-weight: bold;
color: #FF0000;
}

Правила для контейнера footer. Заданы высота, ширина и положение контейнера.

Правила для надписи в футере: начертание и цвет шрифта.

Создаем файл 404.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

<?php get_header (); ?>
<div id="content">
<h4>К сожалению, такой страницы нет</h4><br>
<p>Страница, которую Вы ищете, видимо, удалена или не существовала ранее.</p>
<p>Однако вы можете попробовать поискать необходимую информацию в следующих статьях:</p><br>
<ul>
<?php get_archives ('postbypost', 50); ?>
</ul>
</div>
<?php include (TEMPLATEPATH."/sidebar.php");?>
<?php get_footer (); ?>

Чем-то похож на файл index.php. Зачем он нужен. Если кто-то неправильно наберет адрес страницы Вашего сайта, то вместо простого сообщения, что такая страница не найдена, файл не только сообщит об этом, а и выдаст список страниц сайта, в количестве 50 штук. Может посетитель Вашего сайта найдет среди них что-то нужное для себя.

Вот и готовы все файлы!

Результат создания темы wordpress с нуля.

В итоге у нас должно получиться следующее:

Скачать тему можете по следующей ссылке – Моя простая тема (mytheme)!

У вас скачается zip архив с названием mytheme (если вы посмотрите внутрь, то увидите в нем 6 файлов, которые мы и создавали выше: header.php, index.php, footer.php, sidebar.php, 404.php, style.css).

Как установить данную тему на свой сайт?

Заходим в панель управления wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Темы”, далее сверху в закладках выбираем “Установка тем оформления”, после выбираем пункт “Загрузить” и с помощью кнопки “Обзор” выбираем скачанный нами zip файл – mytheme, устанавливаем и активируем тему!