Создание темы для WordPress
Зачем создавать свою тему, когда в Сети куча ресурсов, предлагающих уже готовые бесплатные темы? Это вопрос индивидуальный. Сначала я приведу список ресурсов, где можно бесплатно качать темы:
- freewordpressthemes.ru
- wpbot.ru
- wpthemes.ru
- blogstyle.ru
- wordpressinside.ru
- wpworld.ru
Именно к этим ресурсам я обращаюсь, когда мне нужна готовая тема. Не всегда возникает желание создавать тему оформления для какого-то маленького сайта. Не всегда заказчик платит мне достаточно, чтобы я создавал ему индивидуальную тему.
Но иногда сайту становится просто необходим именно свой индивидуальный неповторимый дизайн. Тогда нужно активизировать прямые руки и создавать свою тему.
К тому же, это не так уж и сложно. Недавно мы сделали вот такой дизайн для блога Надюши:
Конечно, как же дизайнеру без индивидуального дизайна. 
К тому же, это оказалось не так уж и сложно. Ненамного сложнее капитальной уборки в готовой теме. И эта работа помогла мне глубже понять внутреннее устройство WordPress, после я внёс некоторые изменения в темы других блогов, в том числе и этого.
Набравшись опыта, спешу и с вами поделиться. Так займёмся же таким благородным делом, как...
Создание темы WordPress с нуля
Как знать, может быть вы в последствии будете зарабатывать созданием тем.
Сперва определимся с таким вопросом, в котором путаются новички (ещё недавно путался и я): что называть темой WP, а что шаблоном?
Здесь всё просто. В состав темы WP входят шаблоны: например, основной шаблон (index.php), шаблон комментариев (comments.php), шаблон оформления записей (single.php) и т.д. Если для отображения какой-то страницы в теме нет подходящего шаблона (напирмер, страницы результатов поиска или архивов), то используется основной шаблон index.php.
Для создания своей темы можно обойтись как минимум шаблоном index.php и файлом стилей style.css. Но мы этим не ограничимся, а будем использовать возможности 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 ('Читать далее...') — отображает содержимое записи (текст будет отображён до тега «далее», если он используется, и также в этом случае будет отображена ссылка с текстом, который мы передали функции).
Теперь можно активировать нашу тему и полюбоваться на зелёный текст на белом фоне (конечно, если вы уже добавили в блог хоть одну запись).
Вроде бы, элементарный результат, но сегодня мы проникли в саму концепцию создания темы. Далее простыми манипуляциями с кодом мы сделаем эту тему значительно более функциональной.
Скачать созданную мной тут тему можно по ссылке ниже.
17 ответов к “Создание темы для WordPress”
Очень доходчиво и поэтапно рассказал
Молодец! Очень полезный подробный мануал для новичков 
Спасибо, Надюша. Это только начало. Дальше будет интересней
А когда будет продолжение, а то я никак не дойду до изменения темы на своем блоге Киномана . Может посмотрите, подскажите?
Продолжение прямо следом: pavluha.net/sozdanie-temy...wordpress-2.html
Если и этого будет мало, напишите, о чём ещё поведать — я это с радостью (кстати, там предпросмотр темы временно не работает)
Никогда не делал div'ную верстку...Всегда, когда пытаюсь использовать этот тег, он у меня работает не так, как мне надо
Да, знакомо и мне такое. Но после долгих ковыряний и курений чужих шаблонов всё же основные заморочки победил. Что больше всего напрягает в div-ах — их иногда надо «заставлять» описывать объекты, помещённые в них. А что нравится — если элемент не вписался в заданную ширину ячейки таблицы — разъедется вся таблица, а если не вписался в div — просто элемент выйдет за границы div-а, дизайн не пострадает
Коненчо, в сети так много ресурсов, где можно найти хорошие темы для блога.
Это очень сложно, но можно попробывать.
Может мне рассказать в блоге, как я верстал silenseo.ru? ))
Там не только дивная верстка, там еще и шаманы с бубнами мне помогали.
А вообще, для новичка в css советую Эрика Мейера. Он знатный парень и в книгах у него все доходчиво и конструктивно.
Статья спецом для тех, кто только открыл в браузере интернеты и решил создать свой блог.
Аха. Слишком подробно. Во второй части исправился
Как во время я с тобой познакомилась!
Я как раз хочу поменять дизайн
на своём блоге!
Хорошее желание. На каком из них?
Оцени своим взглядом, новый шаблон:)
Отличненько!
Скажи правду: чего не хватает?
Рекламы мало.
Я вообще не особо дизайнер — такие вопросы лучше Надюше задавать. Но если надо сказать, чего не хватает, то это я всегда могу, даже если всего хватает.
Возможно, самих детей в дизайне не хватает. Вот это: город, самолёт, подсолнухи — это хитрый коллаж, где каждый элемент имеет какой-то скрытый смысл (я надеюсь). Но вместо всего этого богатства я бы нарисовал натуральную детскую площадку с играющими детьми. А левую часть (куклы и погремушки) оставил бы как есть
Спасибо за пост, помог мне поменять заголовок в шаблоне сделаном в Artisteer c h2 на h1. Оказалось в файле Single.php надо было просто прописать перед началом поста, весь день на это потратил, ещё раз спасибо буду потихоньку разбираться в устройстве тем для WordPress.