создаем тему wordpress

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

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

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

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

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

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

, то, наверняка, увидите в ней папку с названием 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> находится очень важная информация. Судите сами:

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — с помощью этого мета-тега прописана кодировка документа. Так как мы создаем сайт на движке WordPress, то и кодировка должна быть UTF-8. Это единственная кодировка, с которой работает движок wordpress.

<meta name=»description» content=»О том как создать сайт самому» /> — мета-тег description, то есть описание вашего сайта.

<meta name=»keywords» content=»создание сайтов, сайтостроение» /> — мета-тег keywords, то есть ключевые слова сайта.

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

<link rel=»alternate» type=»application/rss+xml» title=»RSS 2.0″ href=»http://feeds.feedburner.com/ваш фид» /> — ссылка на RSS фид Вашего сайта.

<link rel=»pingback» href=»<?php bloginfo (‘pingback_url’); ?>» /> — ссылка отсылки пингбеков на другие сайты или блоги. Что такое пингбеки – разберемся как-нибудь в другой раз.

<link rel=»stylesheet» href=»<?php bloginfo (‘stylesheet_url’); ?>» type=»text/css» media=»screen»/> — ссылка на css файл стилей Вашего сайта

<?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, устанавливаем и активируем тему!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Создаем простую тему на wordpress: 5 комментариев

  1. Владимир

    Здравствуйте. В вордпресс я почти что новичек. У меня такая проблема, что хочу на главной странице сайта оформить ссылочку словом «Регистрация» и чтоб нажимая на нее я переходил на страницу регистрации. Код на php +html+CSS — НЕ ПРОБЛЕМА. Вопрос: если я добавлю дополнительный шаблон с именем, например, registration.php к списку других шаблонов (header.php, footer.php и т.д.), и пропишу в нем код для формы регистрации, то заработает ли это?

  2. 2l1k

    не появляется страничка 404, выходит стандартный апач, как правельно подключить помогите пожалуйста, все форумы перерыл, только ненужно писать про .htaccess

Добавить комментарий