ゼロからつくるWord pressテーマ第5回

3,033 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
3,033
On SlideShare
0
From Embeds
0
Number of Embeds
1,844
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ゼロからつくるWord pressテーマ第5回

  1. 1. ゼロからつくるWordPressテーマ#5テンプレート階層を理理解する(前編) http://hitsuji.me
  2. 2. ⽬目次 前編 1.  テーマファイル⼀一覧 1.  前回までに作成したもの 2.  第5回で作成するもの 2.  今回のポイント 3.  テンプレートを決定する仕組み 後編(次回Up) 4.  ファイルの編集 5.  まとめ&次回予告ゼロからつくる WordPress テーマ #5 http://hitsuji.me 2
  3. 3. 1-‐‑‒1.前回までに作成したもの ファイル名 役割や特徴 ファイルの種類 index.php Webページ⽣生成に使⽤用する基本となる テンプレート ファイル header.php htmlヘッダーやサイト名などを部品化し パーツテンプレート たもの。 ※index.phpのようなテ content.php 記事出⼒力力部分を部品化したもの。ループ ンプレートから呼び出さ 内で使⽤用する。 れて使われる footer.php コピーライト表⽰示など、Webページフッ ター部分を部品化したもの。 style.css デザインを指定する スタイルシート screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示 テーマのサムネイル画像 される画像 darkred_**.png ⾒見見出しの先頭に使⽤用している画像 【補⾜足】   “パーツテンプレート”の名称は、WordPressフォーラムで度度々使われているので、ファイルの種類名 として採⽤用しました。ここでは、index.phpのようなファイルを単にテンプレートと呼び、パーツテ ンプレートと区別することにします。ゼロからつくる WordPress テーマ #5 http://hitsuji.me 3
  4. 4. 1-‐‑‒2.第5回で作成するもの…home.php  &  single.php ファイル名 役割や特徴 ファイルの種類 home.php トップページ表⽰示⽤用のテンプレート テンプレート single.php 個別投稿記事表⽰示⽤用のテンプレート 今回のキーワード index.php トップページと単⼀一投稿記事以外のペー ジを表⽰示する⽤用のテンプレート header.php htmlヘッダーやサイト名などを部品化し パーツテンプレート たもの。 ※index.phpのようなテ content.php 記事出⼒力力部分を部品化したもの。ループ ンプレートから呼び出さ 内で使⽤用する。 れて使われる footer.php コピーライト表⽰示など、Webページフッ ター部分を部品化したもの。 style.css デザインを指定する スタイルシート screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示 テーマのサムネイル画像 される画像 darkred_**.png ⾒見見出しの先頭に使⽤用している画像ゼロからつくる WordPress テーマ #5 http://hitsuji.me 4
  5. 5. 2.今回のポイント 編集前のテーマ ü  テンプレートは、index.phpのみ   編集後のテーマ ü  テンプレートは、index.php,  home.php,  single.phpの3種類   ポイント   3種類のテンプレートは、どのように使い分けられるのか? ※ここでの「テンプレート」は、4ページで紹介したファイルの種類を指しますゼロからつくる WordPress テーマ #5 http://hitsuji.me 5
  6. 6. 3.テンプレートを決定する仕組み ⽬目次 1.  Webページを表⽰示する動き 2.  Webサーバ内の動き l  テンプレート決定フロー概要 l  例例1.  トップページ l  例例2.  個別ページ 3.  テンプレート階層とは?ゼロからつくる WordPress テーマ #5 http://hitsuji.me 6
  7. 7. 3-1.Webページを表⽰示する動き ①Webブラウザに   ③依頼されたアドレス アドレスを⼊入⼒力力   ②hitsuji.me/の   を⾒見見て、トップページ http://hitsuji.me/⏎   データを送るよう   を表⽰示すると判断   依頼する   WWW Webサーバ   Webブラウザ @hitsuji.me ④WPテンプレートで ⽣生成したトップページ ⑤届いたデータを使って   のデータを送る ブラウザがWebページを 表⽰示する   疑問:④で使われるテンプレートは、どのように決まるのか?ゼロからつくる WordPress テーマ #5 http://hitsuji.me 7
  8. 8. 3-‐‑‒2-‐‑‒1.テンプレート決定フロー概要 1.  表⽰示するWebページのアドレスを⾒見見て、 ページの種類を判断する トップページor個別記事orカテゴリor存在しないページ…etc 2.  テーマフォルダに⼊入っているテンプレー トのうち、ページの種類に最適なテンプ レートを選択する トップページ home.php 個別記事 single.phpゼロからつくる WordPress テーマ #5 http://hitsuji.me 8
  9. 9. 3-‐‑‒2-‐‑‒2.Webサーバ内の動き  例例1.トップページ表⽰示 “http://hitsuji.me/”   を表⽰示せよ 上記アドレスを⾒見見て、トップ ページを表⽰示すると判断 トップページの表⽰示設定を   ダッシュボード>設定>表⽰示設定   確認する で設定できる   ※今回は「最新の投稿」であると仮定 テンプレートファイルに、   home.phpがあるかどうか確認 ある ない home.phpに従って   index.phpに従って   最新投稿記事のhtml 最新投稿記事のhtml ソースを⽣生成する ソースを⽣生成するゼロからつくる WordPress テーマ #5 http://hitsuji.me 9
  10. 10. 3-‐‑‒2-‐‑‒3.Webサーバ内の動き  例例2.個別記事表⽰示 “http://hitsuji.me/?p=256”   を表⽰示せよ 上記アドレスを⾒見見て、ある投稿記 事のパーマリンクであると確認 ※記事のステータスが「公開」になっている   &カスタム投稿ではないと仮定する テンプレートファイルに、   single.phpがあるかどうか確認 ある ない single.phpに従って   index.phpに従って   p=256の投稿記事の p=256の投稿記事の htmlソースを⽣生成する htmlソースを⽣生成するゼロからつくる WordPress テーマ #5 http://hitsuji.me 10
  11. 11. 3-‐‑‒3.テンプレート階層とは? テンプレートファイル名の優先順位のこと テンプレート階層(⼀一部抜粋) ページの種類 優先度度:⾼高 低 トップページ(最新投稿) home.php 個別記事 single-­‐{post_type}.php single.php 固定ページ custom.php page-­‐slug.php page-­‐ID.php page.php index.php category-­‐ category-­‐ カテゴリ表⽰示 category.php slug.php ID.php archive.php ⽇日付別表⽰示 date.php ページの種類ごとに、テーマフォルダに存在するテンプレートファイルの中から、   最も左側にあるファイル名のテンプレートが選択される   ※slug,  ID,  post_typeなどの詳細は別の機会に紹介します。  ゼロからつくる WordPress テーマ #5 http://hitsuji.me 11
  12. 12. 第5回前編  まとめ&後編予告 n まとめ l  ページの種類ごとにテンプレート階層と呼ばれる テンプレートファイル名の優先順位がある。 l  Webページを⽣生成するときは、テーマフォルダ の中から、テンプレート階層の優先順位が⾼高いテ ンプレートが選択される。 l  選択されたテンプレートからhtmlを⽣生成する。 n 後編予告 l  home.phpとsingle.phpを作成して、前編で説明 したことの動作を確認します!ゼロからつくる WordPress テーマ #5 http://hitsuji.me 12
  13. 13. Appendix n  WordPress公式ページの関連記事 l  http://wpdocs.sourceforge.jp/テンプレート階層 ※11ページで紹介したテンプレート階層の   フルバージョンが掲載されています  ゼロからつくる WordPress テーマ #5 http://hitsuji.me 13

×