Spreadfirefox Affiliate Button
»

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

11 июня
2007 года

Оригинал статьи – anekostudios.com. Перевод вольный.

Часто спрашивают, как изменить дизайн сайта так, чтобы он работал под Wordpress. На самом деле, это довольно просто. Сайт, который вы видите — мой первый опыт в изготовлении подобных тем. Я расскажу, как заставить мирно сосуществовать Wordpress и любые дизайны. Надеюсь, у вас есть хотя бы какие-то познания в HTML, CSS и — в идеале — PHP, но если возникнут вопросы, можете задавать их прямо здесь, в комментариях.

Итак, я расскажу, что я обычно делаю, когда у меня есть:
1) сайт, который надо совместить с Wordpress
и/или 2) желание создать новую тему специально для Wordpress.

Шаг первый. Оформление вашего сайта.

Для начала надо создать сам сайт. Я использую тот язык разметки, который мне удобнее (обычно XHTML 1.0 Strict, при необходимости Transitional), и просто сооружаю шаблон сайта: кодирую всё, как если бы делала обычную статическую страницу, создаю кнопки, заголовки, файл стилей CSS и цвета — всё. После этого я проверяю код и файл стилей на наличие ошибок. Такая проверка очень важна, особенно если вы собираетесь разместить готовую тему для общего пользования. Если вы исправите ошибки сейчас, то более чем в два раза сократите время последующих правок. Я также стараюсь чаще комментировать во время работы, особенно когда кодирую в XHTML. Нет ничего противнее, чем наблюдать кучу <div>-тэгов в начале файла, столько же в конце, еще больше — в середине, и не знать, какой <div> закрыт, а какой нет.

пример дизайна, состоящего из двух колонок В общем, для примера возьмем дизайн, состоящий из двух колонок. Конечный код (без текстового наполнения) будет выглядеть примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>
<body>
<div id="wrapper">

<div id="header">
</div> <!-- конец заголовка -->

<div id="content">

<div id="sidebar">
</div> <!-- конец боковой панели -->

<div id="main">
</div>

</div> <!-- конец содержимого -->

<div id="footer">
</div> <!-- конец нижней части -->

</div> <!-- конец наполнителя -->
</body>
</html>

Зачем мне получившийся файл с готовым дизайном? Я хочу быть уверена в том, что все составляющие шаблона находятся на своих местах и в правильном порядке, и проверить ошибки на этой стадии — ведь, например, один незакрытый тэг <div> может превратить ваш дизайн в бесполезное месиво из текста и картинок. Закончите кодировку шаблона сейчас, прежде чем мы разделим этот сайт под Wordpress, исправлять что-либо потом будет немного сложнее, особенно если вы не очень разбираетесь в коде. :)

А теперь, когда готов сам дизайн, давайте приспособим его для Wordpress.

Шаг второй. Разделение шаблона.

Итак, сначала нужно разделить шаблон. Вы должны разделить свой дизайн на 4 части: header.php, footer.php, index.php и sidebar.php. Что они значат?

header.php — заголовок, то, начало вашего сайта. Обычно состоит из статичных элементов: какие-то картинки, ссылки, иногда меню.

sidebar.php — боковая панель. :)

index.php — «начинка» сайта, тут лежит ценное содержимое и динамически меняющиеся элементы (то есть программный код). :)

footer.php — нижний колонтитут, конец шаблона.

Wordpress, грубо говоря, соединяет эти четыре части, как паззл. Каждый файл ложиться на свое место и образует сам сайт. Для чего это нужно? Возьмем пример, когда в вашем сайте более ста страниц. У каждой страницы одинаковый заголовок, фоновые изображения, панель навигации и т.д., меняется чаще всего только содержимое. И если вам нужно, к примеру, добавить ссылку в меню, то придется вручную вставлять эту ссылку на каждую из 100 страниц. Когда вы используете темы, то достаточно сделать только одно изменение – например, добавить ссылку в sidebar.php — и изменяться все остальные страницы. По-моему, очень мило.

Вернемся к коду, который мы соорудили, и я покажу, как разбить его на части.

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>

<body>

<div id="wrapper">

<div id="header">
</div> <!-- Конец заголовка -->

<div id="content">

С этого когда будет начинаться каждая ваша wordpress-страница. Далее у нас идет боковая панель:

sidebar.php:

<div id="sidebar">
</div> <!-- конец боковой панели --> И, наконец, нижняя панель:

footer.php:

</div> <!-- конец содержимого -->
<div id="footer">
</div> <!-- конец нижней части -->
</div> <!-- конец наполнителя -->

</body>
</html>

Я пропустила index.php, чтобы для начала показать статичные (не меняющиеся) области сайта. Конечно, впоследствии вы можете вставить туда и динамически меняющиеся элементы. А теперь index.php:

index.php:

<?php
get_header();
?>

<?php
get_sidebar();
?>

<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> —
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
</div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>

<div class="feedback">

<?php wp_link_pages(); ?>

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>

</div> <!--closing .post -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>

<?php posts_nav_link(' — ', __('« Предыдущая страница'), __('Следующая страница »')); ?>

<?php get_footer(); ?>

</div>

Если вы приглядитесь, то заметите, что это все тот же шаблон, разграниченный тэгами <div>. Только теперь он разбит на части:

<?php
get_header();
?>

<?php
get_sidebar();
?>

Здесь идет содержимое сайта, а именно, программный код. Чтобы разбираться в нем, желательно знать основы PHP-программирования. И заканчивается…

<?php
get_footer();
?>

Wordpress начнет загрузку сайта с того, что вызовет страницу index.php, которая, в свою очередь, увидит этот php-код и обратиться к header.php, sidebar.php и footer.php. К примеру,
<?php
get_header();
?>
разместит на странице заголовок — содержимое файла header.php. И так далее, пока наш сайт не соберется, как детский конструктор.

Шаг третий. Использование CSS

Итак, шаблон сайта готов, но если вы загрузите его прямо сейчас, то работать он не будет. :) Почему? Дело в том, что мы не позаботились указать правильный путь к файлу со стилями. Обычный адрес вроде

<link rel=»stylesheet» href=»style1.css» />

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

<link rel=»stylesheet» href=»<?php bloginfo(’stylesheet_url’); ?>» />

«Стоп!», – скажете вы. У меня же есть и другие файлы стилей: например, дополнительные заплатки для броузера IE или стили для печати страницы на принтере. Воспользуемся альтернативным вариантом:

<?php bloginfo(‘template_directory’); ?>

Это код указывает путь к вашей директории шаблонов (themes). Далее вам нужно самим указать конкретный файл со стилями, например, print.css для печати страницы на принтере:
<link rel=»stylesheet» href=»<?php bloginfo(‘template_directory’); ?>/print.css» media=»print» />
Также помните, что Wordpress, помимо своих собственных тэгов, активно использует готовые тэги HTML. Например, меню пол умолчанию оформляется как список:

<ul><h2>Ваше меню</h2>
<li>ссылка первая</li>
<li>ссылка вторая</li>
<li>еще ссылка</li>
<li>ссылка</li>
</ul>

Таким образом, если вы не используете <li> в стилях, ваша панель навигации будет выглядеть странно. Лучше назначить CSS какие-то свойства для этих тэгов. Если встретитесь с подобной ситуацией, просто посмотрите сам код страницы («CTRL» + «U» в браузере Firefox), чтобы узнать, какие-именно тэги использовал Wordpress.

Окончание

С внешним оформлением вы закончили, осталось наполнить его содержимым. Например, изменить index.php по вашему желанию, включить панель навигации в sidebar.php:

<div id="sidebar">
<?php get_links_list(); ?>
</div>

Теперь надо сделать скриншот, чтобы наш дизайн красиво отображался на странице выбора шаблонов (панель администратора Wordpress, по умолчанию Presentation или «Внешний вид»). Откройте шаблон в вашем браузере, нажмите Print Screen, затем вставьте изображение в любой графический редактор (Edit -> Paste). Уменьшите изображение до размера 300х225 и сохраните как «screenshot.png» (расширение — png).

Также желательно добавить информацию о шаблоне в css-файл. Открываете файл со стилями и в самом начале пишете:

/*
Theme Name: Название вашей темы.
Theme URI: Адрес темы в интернете.
Description: Описание.
Author: Ваше имя. :)
Author URI: Ваш сайт.
Version: Версия. Первая, вторая и так далее. Обычно номеруют: version 1.0, 2.0 и так далее. Впрочем, можете обозначать версии любым способом, каким вам удобно, например, указывать дату создания шаблона.
*/

Вот и всё. Теперь поместите файлы в какую-нибудь папку, например, newtheme. Осталось загрузить папку в директорию с другими шаблонами, по умолчанию это wp-content/themes.

Например: http://www.сайт.com/wordpress/wp-content/themes/newtheme

Добавить в:
  • Digg
  • del.icio.us
  • Netvouz
  • description
  • blogmarks
  • Reddit
  • StumbleUpon
  • Technorati
  • YahooMyWeb
  • BlinkList
  • Simpy
  • Google
  • Scoopeo

Тэги: ,
Написано в Wordpress | Комментариев: 28 »

Всего комментариев: 28 на запись “Создание темы для Wordpress.”

  1. ElaSTiC пишет:
    15 января 2008 в 10:30

    Спасибо, полезно.

  2. vredin пишет:
    4 февраля 2008 в 23:52

    Привет. понятно и доступно и темы твои прикольные. у меня такой вопрос: какой минимум кода и стилей надо положить файлы чтобы увидеть результат? я сделал как ты написала, но css еще пуст(только начал разбирать что это), вроде активировал тему, а ничего не показывается когда пытаюсь войти на сайт :(

  3. deerstop пишет:
    5 февраля 2008 в 02:02

    Привет! CSS в этом плане не имеет значения, он служит только для украшательства и не влияет на появление содержимого. Если на странице вообще ничего не показывается (пустой белый экран), то, вероятно, ошибка где-то в php-коде. Я могу посмотреть, но советую вам просто открыть index.php из шаблона Default (по умолчанию) и банально копировать код себе.

  4. ААА пишет:
    22 марта 2008 в 04:50

    Осталось загрузить папку в директорию с другими шаблонами, по умолчанию это wp-content/themes.
    Вот на этом месте можно подробнее. Во первых где эту папку найти, во вторых какой прогой все туда залить. Я сутки ее ищу и не могу найти. В браузере или где она. На компе понятно где. Тогда как ее на сайт перенести.

  5. deerstop пишет:
    22 марта 2008 в 16:07

    Вам нужен FTP-клиент. Эта такая программа, которая позволяет напрямую заходить в папки у вашего хостера без использования браузера, например, Total Commander или CuteFTP. Нужно будет ввести данные, которые легко найти на сайте вашего хостинга, и установить соедиение. Тогда вы увидите ветвь директорий, в том числе wp-content.

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

  6. Виктор пишет:
    12 мая 2008 в 09:49

    Приятная статья, мне даже очень и очень понравилось! Попробовал, помогло, спасибо :)

  7. Евгений пишет:
    26 июля 2008 в 19:35

    Статья супер, я без особых навыков почти «натянул» html шаблон на WordPress, но, и столкнулся с рядом проблемм:
    1. Возле ссылки отображаються кружки чёрные..
    2. Это даже не проблема, это вопрос: нажмите на моё имя, перейдите на сайт – можно ли этот шаблон натянуть на WordPress? И не возникнет ли проблем с областями ссылок меню?
    3. Сколько примерно стоит натяжка шаблона на двиг?

  8. deerstop пишет:
    31 июля 2008 в 15:41

    По поводу первого вопроса. Чёрные кружки, я так понимаю, отображаются у бокового меню? Подозреваю, что оно оформлено списками. Добавьте в CSS-файл следуюший код: ul,ol { list-style:none; }

    Ваш сайт, безусловно, натянуть можно. Хотя я не совсем понимаю насчет «областей ссылок». Стоить это будет недорого, потому что шаблон простой.

  9. Евгений пишет:
    6 сентября 2008 в 13:00

    Напишите мне на имейл сколкьо точно будет стоить натяжка шаблона на двиг, и если можно, вашу асю, чтоб я сразу к вам постучался – обсудим подробности…
    Жду ответа…

  10. deerstop пишет:
    14 сентября 2008 в 02:49

    Написала.

  11. Fir пишет:
    22 сентября 2008 в 09:47

    А как сделать два сайдбара? Как например у iPhones.ru?

  12. deerstop пишет:
    22 сентября 2008 в 19:12

    Если нужно именно два меню в двух файлах, то вместо

    php get_sidebar();

    можно написать, например, так:

    php include_once("sidebar1.php"); include_once("sidebar2.php");

    В данном случае sidebar1.php – это первое меню, а sidebar2.php – второе. Но, судя по коду, на iPhones.ru всё сделано банальными таблицами.

  13. Андрей пишет:
    26 октября 2008 в 07:26

    Неплохой материал. Жду новых публикаций.

  14. Антон пишет:
    7 ноября 2008 в 18:41

    Подписался бы на RSS, но не нашел где, ответьте пожалуйста на е-мэил

  15. Михаил Александров пишет:
    19 ноября 2008 в 11:55

    Прикольный у вас дизайн на блоге. Заказывали где то или это бесплатный ?

  16. mambu пишет:
    6 декабря 2008 в 05:51

    Интернет пишется с большой буквы внутри предложения, если что. И сотые не с точкой, а с запятой. Это по стандарту.
    А так неплохо все, просто вэри гуд!

  17. serg пишет:
    6 декабря 2008 в 08:57

    Спасибо! Можно было еще добавить самих файлов, чтобы скачать.

  18. lolaNala пишет:
    17 декабря 2008 в 18:36

    Хороший ресурс)) Темы интересные и дизайн красивый)

  19. Женя пишет:
    20 января 2009 в 15:59

    Супер статья! Подписался на RSS, буду следить =)

  20. Lfway пишет:
    17 ноября 2009 в 00:48

    Спасибо за статью!

    Вопрос: при добавлении темы в Вордпрессе и при переходе в раздел «Виджеты», появляется сообщение «Сайдбары не определены» и «…тема, который вы сейчас используете, виджет-несовместимая…»

    Уже курю мануал, но если Вы знаете что можно сделать, чтобы пофиксить, скажите, пожалуйста.

  21. Lfway пишет:
    17 ноября 2009 в 00:56

    Спасибо, разобрался.

    Надо добавить functions.php – например, переписать из темы classic.

    На всякий случай, текст sidebar.php:

    first

    second

  22. deerstop пишет:
    18 ноября 2009 в 22:43

    По идее, Wordpress сам должен подключать недостающие файлы из темы default.

  23. Никита Шехов пишет:
    26 декабря 2009 в 09:32

    У меня есть более полный обзор о том, Как создать свою Wordpress-тему. Читайте — http://shehov.name/blog/2009-06-20-17

  24. Kont пишет:
    16 марта 2010 в 09:44

    Спасибо! это первое, что я нашёл, но отличное начало.

  25. Андрей пишет:
    19 марта 2010 в 02:53

    А куда саму тему сохранять, в каком файле или «screenshot.png». Не разберу, сам дизайн темы разработал, скриншот сделал. А как и где сохранить не пойму, помогите!!!

  26. deerstop пишет:
    19 марта 2010 в 05:24

    Андрей, попробуйте на панели управления выбрать «Внешний вид» — «Добавить» тему — загрузить файл — установить тему из «.zip» архива.

    Другой вариант: вам надо загрузить папку с темой туда, где у вас находится сам Wordpress, то есть, в /wp-content/themes/. Потом её, опять-таки, можно будет выбрать во вкладке «Внешний вид».

  27. Андрей пишет:
    21 марта 2010 в 23:15

    Спасибо но до загрузки темы по FTP рано. Я не могу понять как мой шаблон, который я создал в отдельном файле Dreamweaver разкидать по четырём файлам для Wordpress и я так думаю что скриншот темы тоже нужно определить в какойто файл. Не разберу также где нужно прописать путь <link rel=»stylesheet» href=»» /> к CSS файлу. Спасибо за понимание но с кодированием проблемы.

  28. deerstop пишет:
    22 апреля 2010 в 09:50

    Между <head> и </head> нужно написать <link rel=»stylesheet» href=»<?php bloginfo(’stylesheet_url’); ?>» type=»text/css» />.

Оставьте отзыв!

Все комментарии предварительно проверяются администратором. Если ссылка на ваш сайт вызывает у меня сомнения (сайт рекламный, принадлежит не вам и т.п.), комментарий модерацию не пройдет. Пожалуйста, учтите это,прежде чем оставлять сообщение.