Цей пост присвячений питанню як додати Вашу тему в репозиторій WordPress.

Створення теми зазвичай починається з прочитання документації з кодексу wordpress, після Вам потрібно буде взяти список вимог і уважно пройтися по кожному пункту окремо приділивши увагу на чек-лист.
Окремо варто виділити наступні пункти:

Style.css

Файл стилів style.css – це перше з чим доводиться стикатися розробнику тим, до нього є ряд вимог. Перший пункт – файл style.css повинен в обов’язковому порядку містити шапку наступного формату:

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

! Параметри 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: none 0;
}
.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{/*…*/}

Корисно буде почитати:

  • Theme Development
  • Styling for Print
  • Styling for Mobile

Header

Зазвичай, це файл header.php

  • Повинен бути зазначений DOCTYPE
  • Всередині тега повинна бути викликана функції wp_head()
  • Тег повинен містити виклик функції language_attributes()
  • Заголовок і опис сайту повинні бути динамічними, тобто використовуйте bloginfo(‘name’) і bloginfo(‘description’)

Приклад шапки:

<?php
/**
* @package WordPress
* @subpackage Theme Name
*/
?>
<!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” <?php language_attributes(); ?>>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php wp_title(“); ?></title>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo(‘name’); ?> Atom Feed” href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?>
</head>
<body>

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

Content

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

  • Зверніть увагу на висновок списків, форм і вбудованих елементів (аля відео з YouTube)
  • Внесіть необхідні зміни в styles.css, як того вимагає кодекс: Styling_Images_in_WordPress (трохи вище є приклад)
  • Використовуйте функцію post_class() для генерації правильних класів всередині «Циклу»
  • Якщо додана велика картинка – контент повинен скрол, або ховатися, щоб не вилазити поверх сайдбара

Невеликий приклад файлу index.php:

<?php if (have_posts()) : ?>
<div id=”posts”>
<!– Тут головний Цикл wordpress’a–>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id=”post-<?php the_ID() ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php printf(__(‘Permanent Link to %s’, ‘Theme_Name’), the_title_attribute(‘echo=0’)); ?>”><?php the_title(); ?></a></h2>
<?php the_content(__(‘Read the rest of this entry »’, ‘Theme_Name’)) ?>
<?php wp_link_pages(array(‘before’ => ‘<p class=”pages”><strong>’.__(‘Pages’, ‘constructor’).’:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
<div class=”footer”>
<?php the_time(__(‘F jS, Y’, ‘Theme_Name’)) ?> |
<?php the_tags(__(‘Tags’, ‘Theme_Name’) . ‘: ‘, ‘, ‘, ‘|’); ?>
<?php edit_post_link(__(‘Edit’, ‘Theme_Name’), “, ‘ | ‘); ?>
<?php comments_popup_link(__(‘No Comments »’, ‘Theme_Name’), __(‘1 Comment »’, ‘Theme_Name’), __(‘% Comments »’, ‘Theme_Name’), “, __(‘Comments Closed’, ‘Theme_Name’) ); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<div class=”navigation”>
<?php next_posts_link(__(‘« Older Entries’, ‘Theme_Name’)) ?>
<?php previous_posts_link(__(‘Newer Entries »’, ‘Theme_Name’)) ?>
</div>
<?php endif; ?>

Footer

Цей файл footer.php

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

Простий приклад:

<?php
/**
* @package WordPress
* @subpackage Theme Name
*/
?>
<?php wp_footer(); ?>
</body>
</html>

! Тема не повинна містити ніяких «спонсорських» посилань

Error 404

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

Screenshot

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

  • файл screenshot.png 300×225, і тільки PNG
  • це повинен бути «живою» скрін, без додавання водяних знаків або інших елементів граффических

! Контент на скріншоті може бути будь, от тільки adult контент не проб’ється крізь модерацію

JavaScript

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

! У самому WordPress йде досить багато JavaScript бибилотек в комплекті – не тягніть зайве.

Навігація

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

Раджу почитати:

  • Good Navigation Links
  • Next and Previous Links
  • Styling Page-Links

! Хардкодить посилання на розділи сайту заборонено

Comments

Вимоги до коментарів гранично прості:

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

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

<ol class=”commentlist”>
<?php wp_list_comments();?>
</ol>

А так само бажано стилі підправити:

.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 лежить дві мої теми:

  • Urban Black – 3,555 скачувань
  • Constructor – 3,974 скачувань

P. S. У мене вже 111 “послідовників” на twitter’і, можливо моя інформація виявиться корисною і для Вас.