WordPress公式テーマ登録のための5ステップ

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

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

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

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

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

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

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

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

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

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

4つのうち公式テーマに
登録できるのはどのテーマ？
3 「テーマフレームワーク」を利用したテーマ

4つのうち公式テーマに
登録できるのはどのテーマ？
3 「テーマフレームワーク」を利用したテーマ全部登録できます!!

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

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

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

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

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()

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()

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

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

国際化する場合
・翻訳のためのテンプレートタグを使用
<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

セキュリティ
クレジット
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
スタイリング
ライセンス

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

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

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

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

callbacks
functions.phpにコードを直書き
functions.php and
) );
hooked
add_theme_support( 'custom-background' );
ズ

自作の関数・変数にはユニークな接頭辞をつける
functions.php
function themeslug_widgets_init() {
) );
}
add_action( 'widgets_init', 'themeslug_widgets_init' );
適切なアクションにフックする

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

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

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:」は
省略

スクリプトのリンクを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>

スクリプトのリンクを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>

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を使用

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress公式テーマ登録のための5ステップ

More Related Content

What's hot

Viewers also liked

Similar to WordPress公式テーマ登録のための5ステップ

WordPress公式テーマ登録のための5ステップ