Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜

20,256 views

Published on

2014年10月11日に開催されたWordCamp Tokyo 2014でのセッションスライドです。

Published in: Design
  • Be the first to comment

これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜

  1. 1. これから WordPressのテーマ制作を はじめる人のために Mignon Style テ ーマを作って公式ディレクトリに登録しよう!
  2. 2. Mignon Style WordPress歴 約1年 Webデザイナー 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. Today's Menu
  7. 7. WordPressの オリジナルテーマを作ろう WordPress公式ディレクトリに 登録するテーマを作ろう WordPress公式ディレクトリに テーマを登録しよう Menu2 Menu1 Menu3
  8. 8. WordPressをはじめる前に HTML・CSSについての知識が必要です は じ め に わからない人は HTML・CSSを まず勉強しよう!
  9. 9. WordPressの オリジナルテーマを作ろう 初心者さん Menu1
  10. 10. テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
  11. 11. テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
  12. 12. HTML・CSSでデザインを作成1 何が必要か構成を考えよう トップページ グルーバルナビ サイト名 サ イ ド バ ー コピーライト 投稿記事一覧 投稿記事一覧 投稿記事一覧 記事ページ グルーバルナビ サイト名 サ イ ド バ ー コピーライト 記事タイトル 投稿日時 記事本文
  13. 13. 最初はシンプルなブログサイトから はじめたほうが簡単です ブログサイトの場合 index.html トップ ページ content.html 記事の ページ about.html About ページ style.css スタイル シート …などなど
  14. 14. テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
  15. 15. ・投稿ページ ブログの記事などの動的なページ ・固定ページ 「About」や「お問い合わせ」などの固定的なページ WordPressの構成2 WordPressには投稿ページと固定ページが あります
  16. 16. テーマを構成するテンプレートファイル WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テーマの作成 style.css index.php single.php page.php header.php footer.php sidebar.php comments.php screenshot.png functions.php スタイルシート メインのテンプレート 投稿ページのテンプレート 固定ページのテンプレート ヘッダーのテンプレート(get_header()で読み込み) フッターのテンプレート(get_footer()で読み込み) サイドバーのテンプレート(get_sidebar()で読み込み) コメント欄のテンプレート(comment_form()で読み込み) テーマのスクリーンショット(880px × 660px) 関数(PHPの命令文)用のファイル 必須 必須
  17. 17. page-6.php 固定 ページ page.php 固定 ページ index.php 固定 ページ 固定ページの場合 読み込まれるテンプレートファイルには 優先順位があります page-6.php がなかったら page.php がなかったら 該当するファイルが ないときはすべて index.phpを使用 ※ ページのIDが「6」の場合
  18. 18. WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレート階層 ページの種類 404ページ 検索結果ページ カテゴリーアーカイブ タグアーカイブ 作成者アーカイブ 日付アーカイブ 投稿ページ 固定ページ フロントページ category- $slug.php tag-$slug.php author- $nicename.php index.php category.php tag.php author.php date.php single-post.php page-$id.php front-page.php category-$id.php tag-$id.php author-$id.php page-$slug.php 404.php search.php archive.php single.php page.php home.php 優先順位高い 低 い
  19. 19. 結局どの テンプレートファイルを 使えばいいの?
  20. 20. 全部トップページと 同じレイアウトにするなら index.phpでOK!
  21. 21. 同じレイアウト ブログにあてはめてみると style.css スタイル シート これだけで OK! style.css スタイル シート index.html トップ ページ about.html About ページ content.html 記事の ページ トップ ページ index.php
  22. 22. テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
  23. 23. index.html トップ ページ 拡張子を phpに変更 テーマの有効化3 index.htmlの拡張子をhtmlからphpに変更 index.phpindex.html トップ ページ
  24. 24. /* Theme Name: テーマ名 Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 */ style.cssの行頭に以下を記述すると テーマの詳細に表示されます style.css スタイル シート
  25. 25. wp-content/themes フォルダの中に入れます WordPressの フォルダ フォルダ wp-contentフォルダ themesフォルダ mytheme フォルダ style.css スタイル シート トップ ページ index.php
  26. 26. テーマが 表示された! mythemeフォルダに screenshot.pngがあると キャプチャ画像が 表示されます screenshot.png 880px × 660px
  27. 27. テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
  28. 28. オリジナルのテーマを作るには PHPが わからない 最初は コピペでOK! HTML・CSSで作ったサイトをWordPressで 表示できるようにPHPでコーディングします
  29. 29. その前にデバッグモードを trueにします! ファイルの編集が終わったら デバッグモードを 元に戻してね!
  30. 30. デバッグモードとは? 編集中に画面が真っ白になったときなどに エラーメッセージを表示します
  31. 31. デバッグモードとは? WordPress初心者におすすめ! デバッグモードの使い方 http://mignonstyle.com/debug-mode/ WordPressの フォルダ フォルダ wp-config.php wp- config wp-config.php define('WP_DEBUG', false); define('WP_DEBUG', true);
  32. 32. WordPressのテンプレートタグを使って 投稿を表示できるように書き換えます WordPressのタグに書き換え4
  33. 33. index.php ページのタイトル index.php <title>ページタイトル | サイトタイトル</title> <title><?php wp_title( ' | ', true, 'right' );?> <?php bloginfo( 'name' ); ?></title>
  34. 34. index.php index.php <img src="images/photo.jpg" /> <img src="<?php echo get_template_directory_uri(); ?> /images/photo.jpg" /> 画像の表示
  35. 35. index.php index.php <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" /> スタイルシートの読み込み
  36. 36. よく使うテンプレートタグ WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレートタグ サイトのタイトルを表示 <?php bloginfo( 'name' ); ?> サイトのキャッチフレーズを表示 <?php bloginfo( 'description' ); ?> 投稿のタイトルを表示 <?php the_title(); ?> 投稿日を表示 <?php echo get_the_date(); ?> 投稿のパーマリンクを出力 <?php the_permalink(); ?> サイトのURLを出力 <?php echo home_url(); ?> 投稿の内容を表示 <?php the_content(); ?> 投稿の抜粋を表示 <?php the_excerpt(); ?>
  37. 37. よく使うテンプレートタグ WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレートタグ 投稿のカテゴリーを表示 <?php the_category(); ?> 投稿のタグを表示 <?php the_tags(); ?> 投稿のアイキャッチを表示 <?php the_post_thumbnail(); ?> テーマディレクトリのURLを出力 <?php echo get_template_directory_uri(); ?>
  38. 38. index.php index.php <h3>投稿のタイトル</h3> <p>2014/10/11</p> <div>今日はWordCamp Tokyo 2014に行ってきました。</div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_title( ‘<h3>’, ‘</h3>’ ); ?> <p><?php echo get_the_date(); ?></p> <div><?php the_content(); ?></div> <?php endwhile; endif; ?> 投稿のタイトルと本文を表示 この中に 書いてある 項目を繰り返し 表示します
  39. 39. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- ここに表示したい内容を記述します --> <?php endwhile; endif; ?> WordPressのループ これは 「もし表示する 投稿があったら 繰り返し表示する」 ということ トップページは 指定した回数 投稿 投稿 投稿 投稿ページや 固定ページは1回 投稿
  40. 40. </head>タグの直前に挿入 <?php wp_head(); ?> </body>タグの直前に挿入 <?php wp_footer(); ?> 必ず記述する決まり事(関数) Point! WordPressの プラグイン等で使ってる スタイルシートや スクリプトを 読み込みます
  41. 41. テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
  42. 42. テンプレートファイルの分割5 サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 header.php ヘッダー 部分 index.phpfooter.php フッター 部分 sidebar.php サイドバー 部分 コピペ コピペ コピペ ヘッダーやフッター・サイドバーなど 共通で使う部分をPHPファイルに分けます 1
  43. 43. index.php <!DOCTYPE html> <html lang="ja"> <head> <?php wp_head(); ?> </head> <body> <div id="wrapper"> <header> </header> <div id="contents"> <div id= "main-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; endif; ?> </div> <div id="sidebar"> </div> </div> <footer> </footer> </div> <?php wp_footer(); ?> </body> </html> 〜 〜 〜 〜 〜 sidebar.php サイドバー 部分 コピペ footer.php フッター 部分コピペ header.php ヘッダー 部分 コピペ
  44. 44. header.php <!DOCTYPE html> <html lang="ja"> <head> <?php wp_head(); ?> </head> <body> <div id="wrapper"> <header> </header> 〜 〜 footer.php <footer> </footer> </div> <?php wp_footer(); ?> </body> </html>〜 sidebar.php <div id="sidebar"> </div> 〜
  45. 45. index.php サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 header.phpを読み込む <?php get_header(); ?> sidebar.phpを読み込む <?php get_sidebar(); ?> footer.phpを読み込む <?php get_footer(); ?> index.phpのヘッダーやフッター・サイドバーの部分を テンプレートタグに書き換えます 2
  46. 46. index.php <?php get_header(); ?> <div id="contents"> <div id= "main-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; endif; ?> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> 〜 header.phpをインクルード sidebar.phpをインクルード footer.phpをインクルード
  47. 47. トップ ページ index.php 投稿 ページ single.php 固定 ページ page.php コピー コピー index.phpをコピーして変えたい部分を 編集します ページによって 表示する内容や 構成を変えたいときは テンプレートファイルを 分けたほうが 編集しやすいです
  48. 48. WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/条件分岐タグ <?php if ( is_single() ) : ?> <!-- 投稿ページに表示される内容を記述 --> <?php elseif ( is_page() ) : ?> <!-- 固定ページに表示される内容を記述 --> <?php else : ?> <!-- それ以外のページに表示される内容を記述 --> <?php endif; ?> 一部分だけ変えるときはファイルを分けるより 条件分岐タグを使うほうが便利です 投稿ページの場合 固定ページの場合
  49. 49. 調べてもわからないときは WordPress日本語フォーラムで 質問してみよう! フォーラムのルールは ちゃんと守ろう!
  50. 50. WordPressのテンプレートタグに 書き換えよう 必要になったらファイルを分割しよう index.phpとstyle.cssがあればOK
  51. 51. WordPress公式ディレクトリに 登録するテーマを作ろう 中級者さん初心者さん Menu2
  52. 52. WordPress公式ディレクトリとは? WordPress.org | Themes Directory https://wordpress.org/themes/ WordPress.orgに よって検証された テーマやプラグインを 無料で配布している サイトです
  53. 53. WordPressの 管理画面から選んで インストール できます WordPress公式ディレクトリのテーマとは?
  54. 54. 公式ディレクトリに 登録するために テーマを修正します
  55. 55. 公式ディレクトリのテーマ制作 2 CSSの修正 screenshot.pngの作成 テンプレートファイルの修正 テキストの英語化 テーマユニットテスト コーディングのチェック 5 3 4 6 1
  56. 56. CSSの修正1 /* image */ .aligncenter { ... } .alignleft { ... } .alignright { ... } style.css WordPressが生成するCSSのクラスを 設定します 画像や キャプション コメントなどの クラスを 設定します
  57. 57. /* Theme Name: テーマ名 Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追 加 追 加 追 加 追 加 style.cssを公式用に修正します
  58. 58. screenshot.pngの作成2 テーマの スクリーン ショット 画像サイズ:880px × 660px screenshot.png
  59. 59. テンプレートファイルの修正3 style.css スタイル シート index index.php comments comments.php 880px × 660px screenshot.png comments.phpを追加します 公式ディレクトリのテーマに必須の ファイルを用意します 1
  60. 60. コメント欄を 表示する場所に テンプレートタグを 記述します index.php サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 コメント欄 comments.phpを読み込む <?php comments_template(); ?>
  61. 61. コードの記述を「WordPressの 推奨する正しい書き方」に修正します 2 <html>タグの言語属性を表示 <html lang="ja"> index.php <html <?php language_attributes(); ?>> index.php 言語属性を 表示する テンプレート タグ
  62. 62. <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" /> index.php スタイルシートの読み込み この記述は 初心者さん向け の書き方 (非推奨)
  63. 63. function themeslug_enqueue_styles() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_styles' ); functions.php functions.phpファイルに記述します 正しい 書き方 (推奨) スタイルシートの読み込み
  64. 64. テーマを作るのに慣れてきたら Codexに載ってる正しい 書き方を覚えましょう
  65. 65. テキストの英語化4 <h2>Message</h2> <h2>メッセージ</h2> テキストはすべて英語で記述します
  66. 66. 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>Message</h2> 翻訳の ための テンプレート タグ
  67. 67. テーマユニットテスト http://codex.wordpress.org/Theme_Unit_Test テーマユニットテスト5 テストデータをインストールします1 Test Dataインストール https://wpcom-themes.svn.automattic.com/ demo/theme-unit-test-data.xml
  68. 68. レイアウトが正しく表示されているか リンク切れはないかなど確認します 2 タイトルが すごく長い 本文が 無い たくさんの カテゴリー たくさんの コメント コメント の階層 タイトルが無い 場合のリンク テーマ作者
  69. 69. 正しくコーディングされているか 警告やエラーが出ないか確認します コーディングのチェック6
  70. 70. デバッグ http://codex.wordpress.org/Debugging_in_WordPress エラーが出ないか確認 デバッグモード1 WordPressの フォルダ フォルダ wp-config.php wp- config wp-config.php define('WP_DEBUG', false); define('WP_DEBUG', true);
  71. 71. ・JavaScriptのエラーチェック 各ブラウザのチェックツール (IEの「F12 開発者ツール」など) ・HTMLの構文チェック(W3C XHTML Validator) http://validator.w3.org/ ・CSSの構文チェック(W3C CSS Validator) http://jigsaw.w3.org/css-validator/ 構文チェック2
  72. 72. Theme-Check http://wordpress.org/plugins/theme-check/ テーマの ガイドラインに 適合しているか チェック Theme-Check3
  73. 73. Chocolat passed the tests
  74. 74. Codexのテーマレビューや テーマレビューガイドラインを ちゃんと読みましょう
  75. 75. WordPress公式ディレクトリ用に テーマを修正しよう テストデータで表示を確認しよう エラーがないかチェックしよう
  76. 76. WordPress公式ディレクトリに テーマを登録しよう 中級者さん初心者さん テーマ作者さん Menu3
  77. 77. WordPress公式ディレクトリに テーマを登録すると…
  78. 78. 管理画面から選んでインストールできる! テーマの アップデートも 自動で ラクラク!
  79. 79. 世界中の人にテーマを使ってもらえる! このテーマ とても カワイイ! このテーマ すごく使い やすい! このテーマ 大好き! いいね!好き!
  80. 80. 親切な人がテーマの翻訳をしてくれる! 私の国の 言葉に翻訳 したから 使ってね! テーマ作者 翻訳 ファイル Mail
  81. 81. 初対面の人にも覚えてもらえる! 名刺交換 しましょう! テーマ登録した みにょんさん! テーマ 使ってみるね! テーマ 登録したの? すごいね! テーマ作者
  82. 82. 大勢の人と交流が深まる! 大勢の人と繋がりがもてる! コミュニティ 勉強会 SNS イベントテーマ作者
  83. 83. いい事いっぱい!
  84. 84. 公式ディレクトリにテーマ登録 するのはどうすればいいの? 誰でもできるの?
  85. 85. WordPressのルールを きちんと守れば大丈夫!
  86. 86. テーマの申請から登録まで フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード バック承 認 テーマ レビュアー がチェック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される 公式ディレクトリにテーマを申請 テーマレビュアー テーマ作者 修 正して 再 申 請 フ ィードバック
  87. 87. テーマの申請1 テーマのアップロード http://wordpress.org/themes/upload/ 形式:zipファイル ファイルサイズ:8Mまで
  88. 88. このチケットで 修正や質問などを やりとりします チケットの割当2
  89. 89. テーマレビュアー テーマレビューチーム 管理者 テーマのチェックはテーマレビュアーと テーマレビューチームの管理者がおこないます ボランティア
  90. 90. フィードバック3 エスケープ 処理してね レイアウトが 崩れてる ハードコーディング しないで セキュリティを しっかり Prefixが 抜けてるよ ライセンスを ちゃんと書いて テーマ レビュアー
  91. 91. テーマの承認4 テーマレビューチームの管理者がチェック テーマレビュアー APPROVED 承 認
  92. 92. テーマの登録5 公式ディレクトリに登録される テーマレビューチーム 管理者 LI V E 登 録
  93. 93. 公式ディレクトリに テーマを登録するのは 難しそう
  94. 94. わからないところは 質問しよう!
  95. 95. 慣れてきたら正しい書き方を覚えよう レビューガイドラインにあうよう テーマを修正しよう オリジナルのテーマを作ってみよう
  96. 96. ひとつずつ覚えていけば 大丈夫! が ん ば ろ う !
  97. 97. Let's try!! やってみよう!!
  98. 98. WordPress公式ディレクトリのテーマの登録について もっと詳しく知りたい人は Mignon Style WordPress公式テーマ 登録のための5ステップ W ordPress公式ディレクトリに挑戦! 2014.09.08 改訂版 http://www.slideshare.net/mignonstyle/wordpress5-38514853 WordPress公式テーマ登録のための5ステップ
  99. 99. ご清聴 ありがとうございました Mignon Style @mignon_style mignonxstyle

×