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

Mignon Sty le

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

WordPress公式ディレクトリに挑戦！

2014.09.08 改訂版

Mignon StyleWordPress歴約１年

http://mignonstyle.com/@mignon_style mignonxstyle

WordPressはじめて１年だけど

WordPress公式ディレクトリに

テーマ登録しちゃいました！！

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

WordPress公式テーマ

〜ショコラ〜

Chocolat

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

どうしたら登録できるの？

WordPressのルールを

きちんと守れば大丈夫！

公式テーマの申請から登録まで

フィードバックがなくなるまで修正します

修正が必要な場合は

フィードバック承認

テーマレビュアーがチェック

テーマレビューチームの管理者がチェック

公式ディレクトリにテーマが登録される

公式ディレクトリにテーマを申請

テーマレビュアーテーマ作者

修正して再申請

フィードバック

STEP1 準備Preparation

申請する前の準備

2

テーマの作成ガイドライン国際化（英語）テーマユニットテストデバッグモード構文チェックTheme-Check

5

3

4

6

7

1


2


5

3

4

6

7

1

テーマの作成1

1 ゼロから作るオリジナルのテーマ

4 「_s」などのスターター・テーマを利用したテーマ

2 既存の公式テーマを利用した子テーマ

3 「テーマフレームワーク」を利用したテーマ

テーマを作成する方法はおもに4つあります

4つのうち公式テーマに登録できるのはどのテーマ？




3 「テーマフレームワーク」を利用したテーマ




3 「テーマフレームワーク」を利用したテーマ全部登録できます!!

4つのうち公式テーマに登録できるのはどのテーマ？

既存のテーマやフレームワークを利用する場合は、ライセンスや

著作権をreadme.txtに記載します

画像やjs・フォントファイルを使用する場合はそのライセンスや著作権も書きます！


2


5

3

4

6

7

1

ガイドライン2・テーマレビュー http://codex.wordpress.org/Theme_Review

・テーマレビューガイドライン http://tinyurl.com/nzxbkld

ガイドラインは更新が早いので英語版で確認します

・コーディング基準

JavaScript

CSS

HTML

PHP

WordPressのコーディング基準

http://codex.wordpress.org/WordPress_Coding_Standards

ライセンス

Required必須

・ GPLライセンスの表記

必須ファイル

・ index.php

・ comments.php

・ style.css

・ screenshot.png（推奨サイズ：880 × 660px）

子テーマの場合はこれより少なくてもOK

テンプレートタグ・フック

Required必須

・ wp_head()・ wp_footer()・ wp_link_pages()

・ wp_title()

・ body_class()

・ post_class()

・ $content_width（メインコンテンツの最大幅の定義）

・前後のページへのリンク posts_nav_link() または paginate_links() または

previous_posts_link()/next_posts_link()

・ 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必須コメント

Required必須

・ WordPressに定義されたクラスのスタイル .aligncenter、.wp-caption、.sticky、.bypostauthor など

CSSクラス

・ readme.txt テーマの使い方や更新履歴など

・ potファイル翻訳用のテンプレートファイル

必須ではないけど必要なもの


2


5

3

4

6

7

1

<h2>メッセージ</h2>

<h2>Message</h2>

・テキストはすべて英語で記述(必須)

国際化（英語）3

国際化（翻訳対応）は推奨

国際化しない場合

I18n（国際化）http://codex.wordpress.org/I18n_for_WordPress_Developers日本語版 http://wpdocs.sourceforge.jp/I18n_for_WordPress_Developers

<h2><?php _e( ‘Message’, ‘text_domain’ ); ?></h2>

<h2>メッセージ</h2>

国際化する場合

・翻訳のためのテンプレートタグを使用

load_theme_textdomain( 'text_domain', get_template_directory() . '/languages' );

・翻訳ファイルの読込

テキストドメイン＝テーマ名のスラッグ


Poedit（無料版）

を使うと簡単!

・POTファイルの作成空のPOTファイルのダウンロードhttps://github.com/fxbenard/Blank-WordPress-Pot

WordPressプラグイン・テーマ翻訳:Poedit無料版で新規POTファイルを作成する http://tinyurl.com/og7h6nd



2


5

3

4

6

7

1

テストデータをインストール1

テーマユニットテスト http://codex.wordpress.org/Theme_Unit_Test

TestDataインストール

https://wpcom-themes.svn.automattic.com/ demo/theme-unit-test-data.xml

テーマユニットテスト4

すべてのレイアウトが正しく表示されているか確認

2

タイトルがすごく長い

本文が無い

たくさんのカテゴリー

たくさんのコメント

コメントの階層

タイトルが無い

テーマ作者

すべてのページが正しく表示されるか確認3

タイトル

2014/08/30

アーカイブページ

投稿ページへのリンク

投稿ページへのリンク

2014/08/31 投稿ページへのリンク

リンク切れがないかチェック

タイトルと投稿日にそれぞれ投稿ページへのリンクがあればタイトルが無くても投稿ページを表示できる


2


5

3

4

6

7

1

デバッグ http://codex.wordpress.org/Debugging_in_WordPress

WordPress初心者におすすめ！デバッグモードの使い方

http://mignonstyle.com/debug-mode/

wp-config.php

エラーが出ないか確認

define('WP_DEBUG', true);

デバッグモード5


2


5

3

4

6

7

1

・JavaScriptのエラーチェック各ブラウザのチェックツール（IEの「F12 開発者ツール」など）

・HTMLの構文チェック（W3C XHTML Validator）

http://validator.w3.org/

・CSSの構文チェック（W3C CSS Validator）

http://jigsaw.w3.org/css-validator/

構文チェック6


2


5

3

4

6

7

1

Theme-Check7

Theme-Check http://wordpress.org/plugins/theme-check/

テーマのガイドラインに適合しているかチェック

Chocolat passed the tests

STEP2 申請Upload












アカウントの作成1

アカウントの登録 https://wordpress.org/support/register.php

WordPress日本語フォーラムの

アカウントでOK

テーマの申請2

テーマのアップロード http://wordpress.org/themes/upload/

形式：zipファイルファイルサイズ：8Mまで

アップロードできないときは

テーマに構文ミスなどがあるとファイルが受け付けられません

アップロードの時点で自動チェック

このチケットで修正や質問などを

やりとりします

チケットの割当3

レビュー待ちのテーマ https://themes.trac.wordpress.org/query?status=new

担当のレビュアーがつくまで数日〜数週間かかるので

のんびり待ちます

申請後にミスを発見！テーマを修正してもいいの？

フィードバックがまだのとき

テーマを修正して再アップしますー

テーマ作者

comment

フィードバック以外の修正を一緒に行いたいときは？

順番にアップロード

フィードバックの修正をしたデータ1

その後、自分の修正をしたデータ2

データの修正は分けても分けなくてもいいけど、初心者レビュアーさんの場合は分けたほうがチェックしやすいようです

お互いが気持ちよく作業できるようにしよう

テーマ作者テーマレビュアー

Theme

STEP3 修正Feedback












セキュリティPlugin

Territory

サニタイズエスケープ

バリデーション

A P I

Opt-in

リセットボタン

Prefix

オプション

overflow

wordwrap

Hardcoding

クレジットスタイリング

ライセンス

セキュリティ

バリデーション

リセットボタン


ダメ出しよくある

metaタグ OGP

robots.txtSEO

Analyticsのスクリプト

SNSの共有ボタン

テーマ作者

metaタグ OGP

robots.txtSEO

Analyticsのスクリプト

SNSの共有ボタン

テーマ作者

PluginTerritory

functions.phpにコードを直書き

register_sidebar( array( 'name' => __( 'Sidebar Widget', 'text_domain' ), 'before_title' => '<h3>', 'after_title' => '</h3>',) );

add_theme_support( 'custom-background' );

functions.php

functions.phpにコードを直書き

register_sidebar( array( 'name' => __( 'Sidebar Widget', 'text_domain' ), 'before_title' => '<h3>', 'after_title' => '</h3>',) );

add_theme_support( 'custom-background' );

functions.phpcallbacksand

hooked

サニタイズ

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' );

自作の関数・変数にはユニークな接頭辞をつける

適切なアクションにフックする

functions.php

header.php

<head>

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Quicksand"> <?php wp_head(); ?></head>

〜

スタイルシートのリンクをheader.phpに記述

野良テーマで配布して

好評だから公式登録なんて楽勝でしょ!!

動けば O K!!



動けば O K!!

header.php

<head>

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Quicksand"> <?php wp_head(); ?></head>

〜

スタイルシートのリンクをheader.phpに記述

Hardcoding



動けば O K!!



動けば O K!!

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

省略



動けば O K!!

footer.php

<body>

<?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> </body></html>

〜

スクリプトのリンクをheader.phpやfooter.phpに記述

footer.php

<body>

<?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> </body></html>

〜

スクリプトのリンクをheader.phpやfooter.phpに記述

Hardcoding

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' );

〜

functions.php

wp_enqueue_scriptsフックを使う

WordPressにデフォルトで入っている

jQueryを使用



動けば O K!!



動けば O K!!



動けば O K!!



動けば O K!!

CheckGuideline



動けば O K!!

Codexに準拠した正しい記述

セキュリティ的に安全な実装

どのような使い方でも正しく表示

わからないことは

質問しよう！!

STEP4 登録Live













テーマレビュアー

テーマの承認1

APPROVED承認

管理者のチェック待ちのテーマ http://tiny.cc/2znlkx

管理者がチェックするまで数日〜数週間かかるので

のんびり待ちます

テーマの登録2

公式ディレクトリに登録される

テーマレビューチーム管理者

L I V E登録

STEP5 挑戦Challenge

公式ディレクトリにテーマを登録するのは難しそう

ユニットテスト

GPL

国際化

エラーチェック

英語


フィードバックがあったところを修正しつづければ

登録できるから大丈夫!!

あ

きらめな

い!

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

参考になる書籍

公式テーマを使って解説しているので、Codexに準拠したテーマの作り方がわかります

プラグインの本ですが、GPLやコーディング基準、ユニットテスト国際化対応など参考になります

テーマの登録に関する内容は公式テーマ開発者のnobitaさんに

確認していただきました。この場をかりて御礼申し上げます。

ありがとうございました。

フォローアップ

http://mignonstyle.com/wordpress-theme-review/WordPress公式ディレクトリにテーマを登録する方法

ご清聴ありがとうございました

Mignon Style@mignon_style mignonxstyle

Design

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