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

37,641 views

Published on

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

Published in: Design
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
37,641
On SlideShare
0
From Embeds
0
Number of Embeds
31,385
Actions
Shares
0
Downloads
31
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

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

  1. 1. WordPress 公式ディレクトリに挑戦! WordPress公式テーマ 登録のための5ステップ Mignon Style 2014.09.08 改訂版
  2. 2. Mignon Style WordPress歴 約1年 http://mignonstyle.com/ @mignon_style mignonxstyle
  3. 3. WordPressはじめて1年だけど WordPress公式ディレクトリに テーマ登録しちゃいました!!
  4. 4. WordPress公式テーマ「Chocolat」 https://wordpress.org/themes/chocolat
  5. 5. WordPress 公式テーマ Chocolat 〜 ショコラ 〜
  6. 6. 公式ディレクトリにテーマ登録 するのって難しいんでしょ? どうしたら登録できるの?
  7. 7. WordPressのルールを きちんと守れば大丈夫!
  8. 8. 公式テーマの申請から登録まで 公式ディレクトリにテーマを申請 フィードバック フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード テーマ レビュアー がチェック テーマレビュアーテーマ作者 修正して再申請 承認バック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される
  9. 9. STEP1 準備 Preparation
  10. 10. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  11. 11. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  12. 12. 1 テーマの作成 テーマを作成する方法はおもに4つあります 1 ゼロから作るオリジナルのテーマ 2 既存の公式テーマを利用した子テーマ 3 「テーマフレームワーク」を利用したテーマ 4 「_s」などのスターター・テーマを利用したテーマ
  13. 13. 4つのうち公式テーマに 登録できるのはどのテーマ? 1 ゼロから作るオリジナルのテーマ 2 既存の公式テーマを利用した子テーマ 3 「テーマフレームワーク」を利用したテーマ 4 「_s」などのスターター・テーマを利用したテーマ
  14. 14. 4つのうち公式テーマに 登録できるのはどのテーマ? 1 ゼロから作るオリジナルのテーマ 2 既存の公式テーマを利用した子テーマ 3 「テーマフレームワーク」を利用したテーマ全部登録できます!! 4 「_s」などのスターター・テーマを利用したテーマ
  15. 15. 既存のテーマやフレームワークを 利用する場合は、ライセンスや 著作権をreadme.txtに記載します 画像やjs・フォントファイルを 使用する場合はそのライセンスや 著作権も書きます!
  16. 16. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  17. 17. 2 ガイドライン ・テーマレビュー http://codex.wordpress.org/Theme_Review ・テーマレビューガイドライン http://tinyurl.com/nzxbkld ガイドラインは更新が 早いので英語版で確認します
  18. 18. ・コーディング基準 http://codex.wordpress.org/WordPress_Coding_Standards CSS JavaScript PHP HTML WordPressの コーディング基準
  19. 19. Required 必須 ライセンス ・ GPLライセンスの表記 必須ファイル ・ index.php ・ comments.php ・ style.css ・ screenshot.png(推奨サイズ:880 × 660px) 子テーマの場合は これより少なくてもOK
  20. 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. 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. 22. Required 必須 CSSクラス ・ WordPressに定義されたクラスのスタイル .aligncenter、.wp-caption、.sticky、.bypostauthor など 必須ではないけど必要なもの ・ readme.txt テーマの使い方や更新履歴など ・ potファイル 翻訳用のテンプレートファイル
  23. 23. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  24. 24. 3 国際化(英語) ・テキストはすべて英語で記述(必須) 国際化(翻訳対応)は推奨 国際化しない場合 <h2>メッセージ</h2> <h2>Message</h2>
  25. 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. 26. 国際化する場合 ・翻訳ファイルの読込 テキストドメイン = テーマ名のスラッグ load_theme_textdomain( 'text_domain', get_template_directory() . '/languages' );
  27. 27. 国際化する場合 ・POTファイルの作成 空のPOTファイルのダウンロード https://github.com/fxbenard/Blank-WordPress-Pot Poedit(無料版) を使うと簡単! WordPressプラグイン・テーマ翻訳:Poedit無料版で 新規POTファイルを作成する http://tinyurl.com/og7h6nd
  28. 28. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  29. 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. 30. すべてのレイアウトが正しく表示されて いるか確認 2 タイトルが すごく長い 本文が 無い たくさんの カテゴリー タイトルが 無い コメント の階層 たくさんの コメント テーマ作者
  31. 31. 3 すべてのページが正しく表示されるか確認 アーカイブページ 2014/08/30 タイトル 投稿ページへのリンク 投稿ページへのリンク 2014/08/31 投稿ページへのリンク リンク切れ がないか チェック タイトルと投稿日にそれぞれ投稿ページへのリンクがあれば タイトルが無くても投稿ページを表示できる
  32. 32. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  33. 33. 5 デバッグモード wp-config.php define('WP_DEBUG', true); エラーが出ないか確認 WordPress初心者におすすめ! デバッグモードの使い方 http://mignonstyle.com/debug-mode/ デバッグ http://codex.wordpress.org/Debugging_in_WordPress
  34. 34. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  35. 35. 6 構文チェック ・HTMLの構文チェック(W3C XHTML Validator) http://validator.w3.org/ ・CSSの構文チェック(W3C CSS Validator) http://jigsaw.w3.org/css-validator/ ・JavaScriptのエラーチェック 各ブラウザのチェックツール (IEの「F12 開発者ツール」など)
  36. 36. 申請する前の準備 1 2 テーマの作成 ガイドライン 国際化(英語) テーマユニットテスト デバッグモード 構文チェック Theme-Check 3 4 5 6 7
  37. 37. 7 Theme-Check テーマのガイドラインに 適合しているかチェック Theme-Check http://wordpress.org/plugins/theme-check/
  38. 38. Chocolat passed the tests
  39. 39. STEP2 申請 Upload
  40. 40. 公式テーマの申請から登録まで 公式ディレクトリにテーマを申請 フィードバック フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード テーマ レビュアー がチェック テーマレビュアーテーマ作者 修正して再申請 承認バック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される
  41. 41. 1 アカウントの作成 WordPress 日本語フォーラムの アカウントでOK アカウントの登録 https://wordpress.org/support/register.php
  42. 42. 2 テーマの申請 形式:zipファイル ファイルサイズ:8Mまで テーマのアップロード http://wordpress.org/themes/upload/
  43. 43. アップロードできないときは アップロードの時点で自動チェック テーマに構文ミスなどがあると ファイルが受け付けられません
  44. 44. このチケットで 修正や質問などを やりとりします 3 チケットの割当
  45. 45. 担当のレビュアーがつくまで 数日〜数週間かかるので のんびり待ちます レビュー待ちのテーマ https://themes.trac.wordpress.org/query?status=new
  46. 46. 申請後にミスを発見! テーマを修正してもいいの? フィードバックがまだのとき テーマを修正して 再アップしますー テーマ作者 c omm en t
  47. 47. フィードバック以外の修正を 一緒に行いたいときは? 1 フィードバックの修正をしたデータ 2 その後、自分の修正をしたデータ 順番にアップロード データの修正は分けても分けなくても いいけど、初心者レビュアーさんの場合は 分けたほうがチェックしやすいようです
  48. 48. お互いが気持ちよく作業 できるようにしよう Theme テーマレビュアーテーマ作者
  49. 49. STEP3 修正 Feedback
  50. 50. 公式テーマの申請から登録まで 公式ディレクトリにテーマを申請 フィードバック フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード テーマ レビュアー がチェック テーマレビュアーテーマ作者 修正して再申請 承認バック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される
  51. 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. 52. ン よくある フィードバックダメ出し
  53. 53. SEO robots.txt Analyticsの スクリプト SNSの 共有ボタン テーマ作者 metaタグO G P
  54. 54. SEO robots.txt Plugin Territory Analyticsの スクリプト SNSの 共有ボタン テーマ作者 metaタグO G P
  55. 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. 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. 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. 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. 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. 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. 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. 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. 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. 64. 野良テーマで配布して 好評だから公式登録 なんて楽勝でしょ!! 動けばO K!!
  65. 65. 野良テーマで配布して 好評だから公式登録 なんて楽勝でしょ!! Check Guideline 動けばO K!!
  66. 66. Codexに準拠した 正しい記述 セキュリティ的に 安全な実装 どのような使い方でも 正しく表示
  67. 67. わからないことは 質問しよう!!
  68. 68. STEP4 登録 Live
  69. 69. 公式テーマの申請から登録まで 公式ディレクトリにテーマを申請 フィードバック フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード テーマ レビュアー がチェック テーマレビュアーテーマ作者 修正して再申請 承認バック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される
  70. 70. 1 テーマの承認 テーマレビュアー 承認 APPROVED テーマレビューチームの管理者がチェック
  71. 71. 管理者がチェックするまで 数日〜数週間かかるので のんびり待ちます 管理者のチェック待ちのテーマ http://tiny.cc/2znlkx
  72. 72. 2 テーマの登録 テーマレビューチーム 管理者 登録 L I V E 公式ディレクトリに登録される
  73. 73. STEP5 挑戦 Challenge
  74. 74. 公式ディレクトリにテーマを 登録するのは難しそう GPL 国際化 ユニットテスト フィードバック 英語 エラーチェック
  75. 75. フィードバックがあった ところを修正しつづければ 登録できるから大丈夫!! あ き らめな い !
  76. 76. やってみよう!! Let's try!!
  77. 77. 参考になる書籍 公式テーマを使って解説している ので、Codexに準拠したテーマの 作り方がわかります プラグインの本ですが、GPLや コーディング基準、ユニットテスト 国際化対応など参考になります
  78. 78. WordPress公式ディレクトリにテーマを登録する方法 テーマの登録に関する内容は 公式テーマ開発者のnobitaさんに 確認していただきました。 この場をかりて御礼申し上げます。 ありがとうございました。 フォローアップ http://mignonstyle.com/wordpress-theme-review/
  79. 79. ご清聴 ありがとうございました Mignon Style @mignon_style mignonxstyle

×