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

Опубликовано: 01.09.2018

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

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

rss