Добавляем тему в репозиторий WordPress

WordPress Logotype

Данный пост посвящен вопросу как добавить Вашу тему в репозиторий WordPress.

Создание темы обычно начинатся с прочтения документации из кодекса wordpress, после Вам нужно будет взять список требований и внимательно пройтись по каждому пункту, отдельно уделив внимание на чек-лист.
Отдельно стоит выделить следующие пункты:

Style.css

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

/*   
Theme Name: Уникальное Имя Темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы, не должно содержать ссылки на спонсоров
Author: Ваше Имя
Author URI: http://ссылка-на-вашу-домашнюю-страницу
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия

Текс лицензии...

*/

! Параметры Theme URI и Author URI должны быть различны, и ссылки должны быть живыми…

Пункт два – обязательные стили – внесите их сразу:

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Советую так же определить стили для автогенерируемых классов (это пункт три):

.categories {/*...*/}
.cat-item {/*...*/}
.current-cat {/* стиль текущей категории */}
.current-cat-parent {/* стиль для предка(ов) текущей категории */}
.pagenav {/* постраничная навигация */}
.page_item {/*...*/}
.current_page_item {/*...*/}
.current_page_parent {/*...*/}
.widget {/* все виджеты обернуты в сей класс */}
.widget_text {/*...*/}
.blogroll {/*...*/}
.linkcat{/*...*/}

Полезно будет почитать:

Header

Обычно это файл header.php

Должен быть указан DOCTYPE
Внутри тега <head> должна быть вызвана функции wp_head()
Тег <html> должен содержать вызов функции language_attributes()
Заголовок и описание сайта должны быть динамическими, т.е. используйте bloginfo(‘name’) и bloginfo(‘description’)

Пример шапки:

&lt;?php
/**
 * @package WordPress
 * @subpackage Theme Name
 */
?&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &lt;?php language_attributes(); ?&gt;&gt;
&lt;head profile=&quot;http://gmpg.org/xfn/11&quot;&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;&lt;?php bloginfo('html_type'); ?&gt;; charset=&lt;?php bloginfo('charset'); ?&gt;&quot; /&gt;
    &lt;title&gt;&lt;?php wp_title(''); ?&gt;&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;?php bloginfo('stylesheet_url'); ?&gt;&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
    &lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;&lt;?php bloginfo('name'); ?&gt; RSS Feed&quot; href=&quot;&lt;?php bloginfo('rss2_url'); ?&gt;&quot; /&gt;    
    &lt;link rel=&quot;alternate&quot; type=&quot;application/atom+xml&quot; title=&quot;&lt;?php bloginfo('name'); ?&gt; Atom Feed&quot; href=&quot;&lt;?php bloginfo('atom_url'); ?&gt;&quot; /&gt;
    &lt;link rel=&quot;pingback&quot; href=&quot;&lt;?php bloginfo('pingback_url'); ?&gt;&quot; /&gt;
    &lt;?php wp_get_archives('type=monthly&amp;format=link'); ?&gt;
    &lt;?php wp_head(); ?&gt;
&lt;/head&gt;
&lt;body&gt;

! Хардкодить логотип сайта с текстом запрещено.

Content

За вывод информации отвечают файлы index.php, single.php, page.php и т.д., для проверки правильности отображения различной информации – добавьте “рыбу” в систему (Tools -> Import).

Обратите внимание на вывод списков, форм и встраиваемых элементов (аля видео с YouTube)
Внесите необходимые изменения в styles.css, как того требует кодекс: Styling_Images_in_WordPress (чуть выше есть пример)
Используйте функцию post_class() для генерации правильных классов внутри «Цикла»
Если добавлена большая картинка – контент должен скролится, либо скрываться – дабы не вылазить поверх сайдбара

Небольшой пример файла index.php:

&lt;?php if (have_posts()) : ?&gt;
        &lt;div id=&quot;posts&quot;&gt;
        &lt;!-- Тут главный Цикл WordPress'a--&gt;
        &lt;?php while (have_posts()) : the_post(); ?&gt;
            &lt;div &lt;?php post_class(); ?&gt; id=&quot;post-&lt;?php the_ID() ?&gt;&quot;&gt;
                 &lt;h2&gt;&lt;a href=&quot;&lt;?php the_permalink() ?&gt;&quot; rel=&quot;bookmark&quot; title=&quot;&lt;?php printf(__('Permanent Link to %s', 'Theme_Name'), the_title_attribute('echo=0')); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
                &lt;?php the_content(__('Read the rest of this entry &amp;raquo;', 'Theme_Name')) ?&gt;
                &lt;?php wp_link_pages(array('before' =&gt; '&lt;p class=&quot;pages&quot;&gt;&lt;strong&gt;'.__('Pages', 'constructor').':&lt;/strong&gt; ', 'after' =&gt; '&lt;/p&gt;', 'next_or_number' =&gt; 'number')); ?&gt;
                &lt;div class=&quot;footer&quot;&gt;
                    &lt;?php the_time(__('F jS, Y', 'Theme_Name')) ?&gt; |
                    &lt;?php the_tags(__('Tags', 'Theme_Name') . ': ', ', ', '|'); ?&gt;
                    &lt;?php edit_post_link(__('Edit', 'Theme_Name'), '', ' | '); ?&gt;
                    &lt;?php comments_popup_link(__('No Comments &amp;#187;', 'Theme_Name'), __('1 Comment &amp;#187;', 'Theme_Name'), __('% Comments &amp;#187;', 'Theme_Name'), '', __('Comments Closed', 'Theme_Name') ); ?&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;?php endwhile; ?&gt;
        &lt;/div&gt;
        &lt;div class=&quot;navigation&quot;&gt;
            &lt;?php next_posts_link(__('&amp;laquo; Older Entries', 'Theme_Name')) ?&gt;
            &lt;?php previous_posts_link(__('Newer Entries &amp;raquo;', 'Theme_Name')) ?&gt;
        &lt;/div&gt;
&lt;?php endif; ?&gt;

Footer

Это файл footer.php

До закрытия тега <body> должна быть вызвана функции wp_footer()
В обязательном порядке должна быть ссылка на сайт wordpress.org, а так же можете добавить ссылку на свой сайт (но лишь одну, никаких спонсорских ссылок)

Пример прост:

&lt;?php
/**
 * @package WordPress
 * @subpackage Theme Name
 */
?&gt;
&lt;?php wp_footer(); ?&gt;
&lt;/body&gt;
&lt;/html&gt;

! Тема не должна содержать никаких «спонсорских» ссылок

Error 404

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

Screenshot

Тут требований не много:

файл screenshot.png 300×225, и только PNG
это должен быть «живой» скрин, без добавления водяных знаков или иных граффических элементов

! Контент на скриншоте может быть любой, вот только adult контент не пробьется сквозь модерацию

JavaScript

JavaScript в HTML должен быть правильно обрамлен (хотя лучше его и вовсе избегать):
```
&lt;script type=&quot;text/javascript&quot;&gt;
/* &lt;![CDATA[ */
// content of your Javascript goes here
/* ]]&gt; */
&lt;/script&gt;
```
Для подключения внешнего JavaScript’a используйте функцию wp_enqueue_script в файле function.php

! В самом WordPress идет достаточно много JavaScript бибилотек в комплекте – не тащите лишнее.

Следите за тем, чтобы у вас не было тупиковых страниц (пришел на страницу – а дальше нет ссылок)
Проверяйте правильность работы навигации, а так же правильность отображения кол-ва страниц/комментариев (если конечно используете не стандартные функции wordpress)
В файлах post.php, single.php (либо index.php если таковых нет) должен быть вызов функции wp_link_pages – сие необходимо для правильного отображения многостраничных элементов

Советую почитать:

! Хардкодить ссылки на разделы сайта запрещено

Comments

Требования к комментариям предельно просты:

Комментарии должны поддерживать сервис gravatar
Комментарии должны быть как для постов, так и для страниц
Пингбеки и трекбеки должны отображаться как и другие комментарии

Если не хотите особо заморачиваться с комментариями – то можете использовать функцию wp_list_comments (WP 2.7+) :

&lt;ol class=&quot;commentlist&quot;&gt;
&lt;?php wp_list_comments();?&gt;
&lt;/ol&gt;

А так же желательно стили подправить:

.children { /*...*/ }
.commentlist { /*...*/ }
.commentlist .avatar { /* Поиздеваемся над аватаром */ }
.nocomments { /*...*/ }
.comment-author { /* Автора можно выделить */}

.thread-even, .even { /* Четный комментарий / четная ветвь дискуссии*/ }
.thread-odd, .odd { /* Нечетный комментарий / нечетная ветвь дискуссии */}
.alt { /* Альтернативный стиль - дублирует прыдущие */}
.depth-2, 
.depth-4 { /* Стиль для определнной вложенности */}

Примечание: чтобы пройти автовалидацию – добавьте закомментированную строчку в index.php:
// get_avatar();

Widgets

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

Localization

Будьте взрослыми – создавайте мультиязычные темы, ведь это достаточно просто, для этого советую прочесть статью «Translating WordPress».

Uploading

После того как мы выполнили все требования – пора пробывать заливать Вашу тему в репозиторий, Вам надо будет пройти 2 проверки – ботом и человеком – с первым все понятно, данная проверка происходит на этапе загрузки архива (кстати парсер бота с багом) – о всех ошибках Вам сообщат сразу, а вот с модератором все сложнее, во-первых он может отказать в приеме темы не объяснив причин, во-вторых – просматривая тему он может и не выловить все ошибки разом, а будет растягивать удовольствие – каждая проверка может растянуться на сутки и более…

И еще – не стесняйтесь спрашивать причину отказа в принятии темы, Вам все расскажут и покажут…

! Заливайте тему вечерком (18:00 GMT+0) – к полуночи тему просмотрят и добавят в репозиторий…

P.S.

Возможно что-то упустил, но вроде бы это все, с чем мне пришлось столкнутся при создании темы. На данный момент в репозитории WordPress.org лежит две мои темы:

Black Urban – 3,555 скачиваний
Constructor – 3,974 скачиваний

P.S. У меня уже 111 “последователей” на Twitter’e, возможно моя информация окажется полезной и для Вас.

6 thoughts on “Добавляем тему в репозиторий WordPress”

lilumi says:

2009-04-13 at 20:49

Спасибо что рассказал про свой опыт, я вот сделал тему, но не думал над тем чтобы заливать на wordpress.org но раз там так все просто и я все требования выполнил, то пожалуй воспользуюсь возможностю и сделаю это.

D.Nice says:

2009-04-15 at 09:22

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

Sergunik says:

2009-04-15 at 20:41

Мне тоже не особо хочется следовать всем этим правилам…
Пишу так как дуже хочется :)

RemezovMax says:

2009-10-04 at 11:05

Примечание: чтобы пройти автовалидацию – добавьте закомментированную строчку в index.php:
// get_avatar();

Извините, а доступным языком можно? ))) Куда и что вставить? Спасибо!

Тима says:

2010-01-20 at 12:05

Спасибо за статью. Сейчас как раз доделоваю тему. Буду заливать в репозиторий.

Yuriy says:

2011-01-18 at 17:52

А какой с этого профит?