2014年8月30日に開催されたWordFes Nagoya 2014でのセッションスライドです。

1. WordPress 公式ディレクトリに挑戦！
WordPress公式テーマ
登録のための5ステップ
Mignon Style
2014.09.08 改訂版

2. Mignon Style
WordPress歴 約１年
http://mignonstyle.com/
@mignon_style mignonxstyle

3. WordPressはじめて１年だけど
WordPress公式ディレクトリに
テーマ登録しちゃいました！！

4. WordPress公式テーマ「Chocolat」 https://wordpress.org/themes/chocolat

5. WordPress 公式テーマ
Chocolat
〜 ショコラ 〜

6. 公式ディレクトリにテーマ登録
するのって難しいんでしょ？
どうしたら登録できるの？

7. WordPressのルールを
きちんと守れば大丈夫！

8. 公式テーマの申請から登録まで
公式ディレクトリにテーマを申請
フィードバック
フィードバックが
なくなるまで
修正します
修正が
必要な
場合は
フィード
テーマ
レビュアー
がチェック
テーマレビュアーテーマ作者
修正して再申請
承認バック
テーマレビューチームの管理者がチェック
公式ディレクトリにテーマが登録される

9. STEP1 準備
Preparation

10. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

11. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

12. 1 テーマの作成
テーマを作成する方法はおもに4つあります
1 ゼロから作るオリジナルのテーマ
2 既存の公式テーマを利用した子テーマ
3 「テーマフレームワーク」を利用したテーマ
4 「_s」などのスターター・テーマを利用したテーマ

13. 4つのうち公式テーマに
登録できるのはどのテーマ？
1 ゼロから作るオリジナルのテーマ
2 既存の公式テーマを利用した子テーマ
3 「テーマフレームワーク」を利用したテーマ
4 「_s」などのスターター・テーマを利用したテーマ

14. 4つのうち公式テーマに
登録できるのはどのテーマ？
1 ゼロから作るオリジナルのテーマ
2 既存の公式テーマを利用した子テーマ
3 「テーマフレームワーク」を利用したテーマ全部登録できます!!
4 「_s」などのスターター・テーマを利用したテーマ

15. 既存のテーマやフレームワークを
利用する場合は、ライセンスや
著作権をreadme.txtに記載します
画像やjs・フォントファイルを
使用する場合はそのライセンスや
著作権も書きます！

16. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

17. 2 ガイドライン
・テーマレビュー
http://codex.wordpress.org/Theme_Review
・テーマレビューガイドライン
http://tinyurl.com/nzxbkld
ガイドラインは更新が
早いので英語版で確認します

18. ・コーディング基準
http://codex.wordpress.org/WordPress_Coding_Standards
CSS
JavaScript
PHP
HTML
WordPressの
コーディング基準

19. Required 必須
ライセンス
・ GPLライセンスの表記
必須ファイル
・ index.php
・ comments.php
・ style.css
・ screenshot.png（推奨サイズ：880 × 660px）
子テーマの場合は
これより少なくてもOK

20. Required 必須
テンプレートタグ・フック
・ wp_title()
・ body_class()
・ post_class()
・ $content_width（メインコンテンツの最大幅の定義）
・ 前後のページへのリンク
・ wp_head()
・ wp_footer()
・ wp_link_pages()
posts_nav_link() または paginate_links() または
previous_posts_link()/next_posts_link()

21. Required 必須
コメント
・ comments_template()
・ wp_list_comments()
・ comment_form()
・ wp_enqueue_script( 'comment-reply' )
・ comment_class()
（wp_list_comments()のコールバックを利用する場合）
・ 前後のコメントページへのリンク
paginate_comments_links() または
previous_comments_link() / next_comments_link()

22. Required 必須
CSSクラス
・ WordPressに定義されたクラスのスタイル
.aligncenter、.wp-caption、.sticky、.bypostauthor など
必須ではないけど必要なもの
・ readme.txt
テーマの使い方や更新履歴など
・ potファイル
翻訳用のテンプレートファイル

23. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

24. 3 国際化（英語）
・テキストはすべて英語で記述(必須)
国際化（翻訳対応）は推奨
国際化しない場合
<h2>メッセージ</h2>
<h2>Message</h2>

25. 国際化する場合
・翻訳のためのテンプレートタグを使用
<h2>メッセージ</h2>
<h2><?php _e( ‘Message’, ‘text_domain’ ); ?></h2>
I18n（国際化）http://codex.wordpress.org/I18n_for_WordPress_Developers
日本語版 http://wpdocs.sourceforge.jp/I18n_for_WordPress_Developers

26. 国際化する場合
・翻訳ファイルの読込
テキストドメイン ＝ テーマ名のスラッグ
load_theme_textdomain( 'text_domain',
get_template_directory() . '/languages' );

27. 国際化する場合
・POTファイルの作成
空のPOTファイルのダウンロード
https://github.com/fxbenard/Blank-WordPress-Pot
Poedit（無料版）
を使うと簡単!
WordPressプラグイン・テーマ翻訳:Poedit無料版で
新規POTファイルを作成する http://tinyurl.com/og7h6nd

28. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

29. 4 テーマユニットテスト
1 テストデータをインストール
Test
インストールData
https://wpcom-themes.svn.automattic.com/
demo/theme-unit-test-data.xml
テーマユニットテスト http://codex.wordpress.org/Theme_Unit_Test

30. すべてのレイアウトが正しく表示されて
いるか確認
2
タイトルが
すごく長い
本文が
無い
たくさんの
カテゴリー
タイトルが
無い
コメント
の階層
たくさんの
コメント
テーマ作者

31. 3 すべてのページが正しく表示されるか確認
アーカイブページ
2014/08/30
タイトル
投稿ページへのリンク
投稿ページへのリンク
2014/08/31 投稿ページへのリンク
リンク切れ
がないか
チェック
タイトルと投稿日にそれぞれ投稿ページへのリンクがあれば
タイトルが無くても投稿ページを表示できる

32. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

33. 5 デバッグモード
wp-config.php
define('WP_DEBUG', true);
エラーが出ないか確認
WordPress初心者におすすめ！
デバッグモードの使い方
http://mignonstyle.com/debug-mode/
デバッグ http://codex.wordpress.org/Debugging_in_WordPress

34. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

35. 6 構文チェック
・HTMLの構文チェック（W3C XHTML Validator）
http://validator.w3.org/
・CSSの構文チェック（W3C CSS Validator）
http://jigsaw.w3.org/css-validator/
・JavaScriptのエラーチェック
各ブラウザのチェックツール
（IEの「F12 開発者ツール」など）

36. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化（英語）
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7

37. 7 Theme-Check
テーマのガイドラインに
適合しているかチェック
Theme-Check http://wordpress.org/plugins/theme-check/

38. Chocolat passed the tests

39. STEP2 申請
Upload

40. 公式テーマの申請から登録まで
公式ディレクトリにテーマを申請
フィードバック
フィードバックが
なくなるまで
修正します
修正が
必要な
場合は
フィード
テーマ
レビュアー
がチェック
テーマレビュアーテーマ作者
修正して再申請
承認バック
テーマレビューチームの管理者がチェック
公式ディレクトリにテーマが登録される

41. 1 アカウントの作成
WordPress
日本語フォーラムの
アカウントでOK
アカウントの登録 https://wordpress.org/support/register.php

42. 2 テーマの申請
形式：zipファイル
ファイルサイズ：8Mまで
テーマのアップロード http://wordpress.org/themes/upload/

43. アップロードできないときは
アップロードの時点で自動チェック
テーマに構文ミスなどがあると
ファイルが受け付けられません

44. このチケットで
修正や質問などを
やりとりします
3 チケットの割当

45. 担当のレビュアーがつくまで
数日〜数週間かかるので
のんびり待ちます
レビュー待ちのテーマ https://themes.trac.wordpress.org/query?status=new

46. 申請後にミスを発見！
テーマを修正してもいいの？
フィードバックがまだのとき
テーマを修正して
再アップしますー
テーマ作者
c omm en t

47. フィードバック以外の修正を
一緒に行いたいときは？
1 フィードバックの修正をしたデータ
2 その後、自分の修正をしたデータ
順番にアップロード
データの修正は分けても分けなくても
いいけど、初心者レビュアーさんの場合は
分けたほうがチェックしやすいようです

48. お互いが気持ちよく作業
できるようにしよう
Theme
テーマレビュアーテーマ作者

49. STEP3 修正
Feedback

50. 公式テーマの申請から登録まで
公式ディレクトリにテーマを申請
フィードバック
フィードバックが
なくなるまで
修正します
修正が
必要な
場合は
フィード
テーマ
レビュアー
がチェック
テーマレビュアーテーマ作者
修正して再申請
承認バック
テーマレビューチームの管理者がチェック
公式ディレクトリにテーマが登録される

51. セキュリティ
クレジット
P l u g i n
Te r r i t o r y
オプション
サニタイズ
エスケープ
バリデーション
A P I
O p t- i n
リセットボタン
P r e f i x
o v e r f l o w
w o r d
w r a p
H a r d
c o d i n g
スタイリング
ライセンス

52. ン
よくある
フィードバックダメ出し

53. SEO robots.txt
Analyticsの
スクリプト
SNSの
共有ボタン
テーマ作者
metaタグO G P

54. SEO robots.txt
Plugin
Territory
Analyticsの
スクリプト
SNSの
共有ボタン
テーマ作者
metaタグO G P

55. functions.phpにコードを直書き
functions.php
register_sidebar( array(
'name' => _ _( 'Sidebar Widget', 'text_domain' ),
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
add_theme_support( 'custom-background' );

56. callbacks
functions.phpにコードを直書き
functions.php and
register_sidebar( array(
'name' => _ _( 'Sidebar Widget', 'text_domain' ),
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
hooked
add_theme_support( 'custom-background' );
ズ

57. 自作の関数・変数にはユニークな接頭辞をつける
functions.php
function themeslug_widgets_init() {
register_sidebar( array(
'name' => _ _( 'Sidebar Widget', 'text_domain' ),
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'themeslug_widgets_init' );
適切なアクションにフックする

58. header.php
<head>
〜
スタイルシートのリンクをheader.phpに記述
<link rel="stylesheet"
href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Quicksand">
<?php wp_head(); ?>
</head>

59. header.php
<head>
〜
スタイルシートのリンクをheader.phpに記述
Hard
coding
<link rel="stylesheet"
href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Quicksand">
<?php wp_head(); ?>
</head>

60. wp_enqueue_scriptsフックを使う
functions.php
function themeslug_enqueue_styles() {
wp_enqueue_style( 'themeslug-style',
get_stylesheet_uri() );
wp_enqueue_style( 'themeslug-quicksand',
'//fonts.googleapis.com/css?family=Quicksand' );
}
add_action( 'wp_enqueue_scripts',
'themeslug_enqueue_styles' ); 「http:」は
省略

61. スクリプトのリンクをheader.phpやfooter.phpに記述
footer.php
<body>
</body>
</html> 〜
<?php wp_footer();?>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo
get_template_directory_uri(); ?>/js/slider.js"></script>

62. スクリプトのリンクをheader.phpやfooter.phpに記述
Hard
coding
footer.php
<body>
</body>
</html> 〜
<?php wp_footer();?>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo
get_template_directory_uri(); ?>/js/slider.js"></script>

63. wp_enqueue_scriptsフックを使う
functions.php
function themeslug_enqueue_scripts() {
〜
wp_enqueue_script( 'themeslug-slider',
get_template_directory_uri() . '/js/slider.js',
array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts',
'themeslug_enqueue_scripts' );
WordPressに
デフォルトで
入っている
jQueryを使用

64. 野良テーマで配布して
好評だから公式登録
なんて楽勝でしょ!!
動けばO K!!

65. 野良テーマで配布して
好評だから公式登録
なんて楽勝でしょ!!
Check
Guideline
動けばO K!!

66. Codexに準拠した
正しい記述
セキュリティ的に
安全な実装
どのような使い方でも
正しく表示

67. わからないことは
質問しよう！!

68. STEP4 登録
Live

69. 公式テーマの申請から登録まで
公式ディレクトリにテーマを申請
フィードバック
フィードバックが
なくなるまで
修正します
修正が
必要な
場合は
フィード
テーマ
レビュアー
がチェック
テーマレビュアーテーマ作者
修正して再申請
承認バック
テーマレビューチームの管理者がチェック
公式ディレクトリにテーマが登録される

70. 1 テーマの承認
テーマレビュアー
承認
APPROVED
テーマレビューチームの管理者がチェック

71. 管理者がチェックするまで
数日〜数週間かかるので
のんびり待ちます
管理者のチェック待ちのテーマ http://tiny.cc/2znlkx

72. 2 テーマの登録
テーマレビューチーム
管理者
登録
L I V E
公式ディレクトリに登録される

73. STEP5 挑戦
Challenge

74. 公式ディレクトリにテーマを
登録するのは難しそう
GPL
国際化
ユニットテスト
フィードバック
英語
エラーチェック

75. フィードバックがあった
ところを修正しつづければ
登録できるから大丈夫!!
あ
き
らめな
い
!

76. やってみよう!!
Let's try!!

77. 参考になる書籍
公式テーマを使って解説している
ので、Codexに準拠したテーマの
作り方がわかります
プラグインの本ですが、GPLや
コーディング基準、ユニットテスト
国際化対応など参考になります

78. WordPress公式ディレクトリにテーマを登録する方法
テーマの登録に関する内容は
公式テーマ開発者のnobitaさんに
確認していただきました。
この場をかりて御礼申し上げます。
ありがとうございました。
フォローアップ
http://mignonstyle.com/wordpress-theme-review/

79. ご清聴
ありがとうございました
Mignon Style
@mignon_style mignonxstyle