Создание темы для WordPress

Зачем создавать свою тему, когда в Сети куча ресурсов, предлагающих уже готовые бесплатные темы? Это вопрос индивидуальный. Сначала я приведу список ресурсов, где можно бесплатно качать темы:

  • freewordpressthemes.ru
  • wpbot.ru
  • wpthemes.ru
  • blogstyle.ru
  • wordpressinside.ru
  • wpworld.ru

Именно к этим ресурсам я обращаюсь, когда мне нужна готовая тема. Не всегда возникает желание создавать тему оформления для какого-то маленького сайта. Не всегда заказчик платит мне достаточно, чтобы я создавал ему индивидуальную тему.

Но иногда сайту становится просто необходим именно свой индивидуальный неповторимый дизайн. Тогда нужно активизировать прямые руки и создавать свою тему.

К тому же, это не так уж и сложно. Недавно мы сделали вот такой дизайн для блога Надюши:

Тема оформления для блога hope-designer.ru

Конечно, как же дизайнеру без индивидуального дизайна. :) К тому же, это оказалось не так уж и сложно. Ненамного сложнее капитальной уборки в готовой теме. И эта работа помогла мне глубже понять внутреннее устройство WordPress, после я внёс некоторые изменения в темы других блогов, в том числе и этого.

Набравшись опыта, спешу и с вами поделиться. Так займёмся же таким благородным делом, как...

Создание темы WordPress с нуля

Как знать, может быть вы в последствии будете зарабатывать созданием тем.

Сперва определимся с таким вопросом, в котором путаются новички (ещё недавно путался и я): что называть темой WP, а что шаблоном?

Здесь всё просто. В состав темы WP входят шаблоны: например, основной шаблон (index.php), шаблон комментариев (comments.php), шаблон оформления записей (single.php) и т.д. Если для отображения какой-то страницы в теме нет подходящего шаблона (напирмер, страницы результатов поиска или архивов), то используется основной шаблон index.php.

Для создания своей темы можно обойтись как минимум шаблоном index.php и файлом стилей style.css. Но мы этим не ограничимся, а будем использовать возможности WordPress разнообразить содержимое нашего блога по максимуму. Но это со временем, а пока...

Создадим простейшую тему только с основным шаблоном

Заниматься этим на хостинге — долгое и мучительное занятие. На наше счастье есть Денвер, позволяющий развернуть Web-сервер на нашем персональном компьютере, не нагружая голову установкой всех необходимых программ, модулей и конфигурацией сервера. Качаем дистрибутив на сайте разработчиков, устанавливаем, запускаем. Затем качаем дистрибутив WordPress (я использую русскую версию, я ведь русский), устанавливаем. При установке везде пользуемся файлами readme.html, но если что-то не получилось — спрашиваем совета в комментариях.

В папке \wp-content\themes\ установленной CMS WordPress создаём папку под свою новую тему (например, temavasi подойдёт, если вас зовут Василий). В этой папке создаём файл style.css со следующим содержанием:

/*
Theme Name: Название темы
Theme URI: Сайт темы
Description: Описание темы
Version: Версия темы
Author: Разработчик
Author URI: Сайт разработчика
*/

Выделенное жирным надо изменить на ваши тексты. Всё это можете писать или не писать на ваше усмотрение. Но если планируется создание тем на продажу, всё это рекомендуется заполнять на английском языке. Вот пример файла style.css:

/*
Theme Name: My Best Theme
Theme URI: https://pavluha.net/sozdanie-temy-dlya-wordpress.html
Description: Учебная тема от Павлухи.net
Version: 1.0
Author: Pavluha.Net
Author URI: https://pavluha.net/
*/
body{
	font: 17px Colibri;
	color: green;
}

Здесь я указал лишь мета-информацию темы и задал шрифт и цвет текста на страницах блога — так, для красоты.

А теперь мой маленький секрет. :) Чтобы не было проблем и недопониманий, связанных с кодировками, с файлами WP следует работать в кодировке UTF-8 без BOM. Но не все редакторы корректно работают с этой кодировкой, потому рекомендую использовать Notepad++. После начала работы с файлом рекомендую убедиться, что используется нужная кодировка (в меню «Кодировки»).

Теперь создаём основной шаблон index.php. Для этого создаём одноимённый файл в папке темы и добавляем туда такое содержимое:

<html>
<head>
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />
</head>
<body>
<?php if (have_posts()) while (have_posts()) : the_post(); ?>
	<h2><?php the_title(); ?></h2>
	<?php the_content('Читать далее...'); ?>
<?php endwhile; ?>
</body>
</html>

Предполагаю, что с основами HTML вы знакомы. Поговорим о функциях, которые здесь используются во вставках PHP-кода.

  • wp_title () — отображает заголовок страницы;
  • bloginfo ('template_directory') — позволяет получить путь до файлов нашей темы;
  • Для отображения записей необходимо запустить цикл их перебора: запускаем кодом строки 7, заканчиваем цикл кодом строки 10;
  • the_title () — отображает заголовок записи;
  • the_content ('Читать далее...') — отображает содержимое записи (текст будет отображён до тега «далее», если он используется, и также в этом случае будет отображена ссылка с текстом, который мы передали функции).

Теперь можно активировать нашу тему и полюбоваться на зелёный текст на белом фоне (конечно, если вы уже добавили в блог хоть одну запись).

Вроде бы, элементарный результат, но сегодня мы проникли в саму концепцию создания темы. Далее простыми манипуляциями с кодом мы сделаем эту тему значительно более функциональной.

Скачать созданную мной тут тему можно по ссылке ниже.

Моя тестовая тема (838.0 B). Скачали: 106 раз
Запись опубликована в рубрике Web-мастеринг с метками , , . Короткая ссылка для добавления в закладки: Создание темы для WordPress.

17 Responses

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.