これからWordPressのテーマ制作をはじめる人のために ?テーマを作って公式ディレクトリに登録しよう！?
43 likes25,572 views
2014年10月11日に開催されたWordCamp Tokyo 2014でのセッションスライドです。
これからWordPressのテーマ制作をはじめる人のために ?テーマを作って公式ディレクトリに登録しよう！?
- 6. Today's Menu
- 8. WordPressをはじめる前に HTML?CSSについての知識が必要です は じ め に わからない人は HTML?CSSを まず勉強しよう！
- 15. ?投稿ページ ブログの記事などの動的なページ ?固定ページ 「About」や「お問い合わせ」などの固定的なページ WordPressの構成2 WordPressには投稿ページと固定ページが あります
- 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の命令文）用のファイル 必須 必須
- 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 優先順位高い 低 い
- 24. /* Theme Name: テーマ名 Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 */ style.cssの行頭に以下を記述すると テーマの詳細に表示されます style.css スタイル シート
- 33. index.php ページのタイトル index.php <title>ページタイトル | サイトタイトル</title> <title><?php wp_title( ' | ', true, 'right' );?> <?php bloginfo( 'name' ); ?></title>
- 34. index.php index.php <img src=/slideshow/howto-makewordpresstheme/40079352/"images/photo.jpg" /> <img src="<?php echo get_template_directory_uri(); ?> /images/photo.jpg" /> 画像の表示
- 35. index.php index.php <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" /> スタイルシートの読み込み
- 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. よく使うテンプレートタグ WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレートタグ 投稿のカテゴリーを表示 <?php the_category(); ?> 投稿のタグを表示 <?php the_tags(); ?> 投稿のアイキャッチを表示 <?php the_post_thumbnail(); ?> テーマディレクトリのURLを出力 <?php echo get_template_directory_uri(); ?>
- 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. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- ここに表示したい内容を記述します --> <?php endwhile; endif; ?> WordPressのループ これは 「もし表示する 投稿があったら 繰り返し表示する」 ということ トップページは 指定した回数 投稿 投稿 投稿 投稿ページや 固定ページは1回 投稿
- 40. </head>タグの直前に挿入 <?php wp_head(); ?> </body>タグの直前に挿入 <?php wp_footer(); ?> 必ず記述する決まり事（関数） Point! WordPressの プラグイン等で使ってる スタイルシートや スクリプトを 読み込みます
- 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. 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. index.php サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 header.phpを読み込む <?php get_header(); ?> sidebar.phpを読み込む <?php get_sidebar(); ?> footer.phpを読み込む <?php get_footer(); ?> index.phpのヘッダーやフッター?サイドバーの部分を テンプレートタグに書き換えます 2
- 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をインクルード
- 48. WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/条件分岐タグ <?php if ( is_single() ) : ?> <!-- 投稿ページに表示される内容を記述 --> <?php elseif ( is_page() ) : ?> <!-- 固定ページに表示される内容を記述 --> <?php else : ?> <!-- それ以外のページに表示される内容を記述 --> <?php endif; ?> 一部分だけ変えるときはファイルを分けるより 条件分岐タグを使うほうが便利です 投稿ページの場合 固定ページの場合
- 52. WordPress公式ディレクトリとは？ WordPress.org | Themes Directory https://wordpress.org/themes/ WordPress.orgに よって検証された テーマやプラグインを 無料で配布している サイトです
- 55. 公式ディレクトリのテーマ制作 2 CSSの修正 screenshot.pngの作成 テンプレートファイルの修正 テキストの英語化 テーマユニットテスト コーディングのチェック 5 3 4 6 1
- 56. CSSの修正1 /* image */ .aligncenter { ... } .alignleft { ... } .alignright { ... } style.css WordPressが生成するCSSのクラスを 設定します 画像や キャプション コメントなどの クラスを 設定します
- 57. /* Theme Name: テーマ名 Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追 加 追 加 追 加 追 加 style.cssを公式用に修正します
- 61. コードの記述を「WordPressの 推奨する正しい書き方」に修正します 2 <html>タグの言語属性を表示 <html lang="ja"> index.php <html <?php language_attributes(); ?>> index.php 言語属性を 表示する テンプレート タグ
- 62. <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" /> index.php スタイルシートの読み込み この記述は 初心者さん向け の書き方 （非推奨）
- 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ファイルに記述します 正しい 書き方 （推奨） スタイルシートの読み込み
- 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> 翻訳の ための テンプレート タグ
- 71. ?JavaScriptのエラーチェック 各ブラウザのチェックツール （IEの「F12 開発者ツール」など） ?HTMLの構文チェック（W3C XHTML Validator） http://validator.w3.org/ ?CSSの構文チェック（W3C CSS Validator） http://jigsaw.w3.org/css-validator/ 構文チェック2
- 73. Chocolat passed the tests
- 83. いい事いっぱい！
- 86. テーマの申請から登録まで フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード バック承 認 テーマ レビュアー がチェック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される 公式ディレクトリにテーマを申請 テーマレビュアー テーマ作者 修 正して 再 申 請 フ ィードバック
- 90. フィードバック3 エスケープ 処理してね レイアウトが 崩れてる ハードコーディング しないで セキュリティを しっかり Prefixが 抜けてるよ ライセンスを ちゃんと書いて テーマ レビュアー
- 94. わからないところは 質問しよう！