• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ゼロからつくるWord pressテーマ第5回
 

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

on

  • 1,248 views

 

Statistics

Views

Total Views
1,248
Views on SlideShare
727
Embed Views
521

Actions

Likes
0
Downloads
0
Comments
0

6 Embeds 521

http://wordpress.hitsuji.me 485
http://hitsuji.me 13
http://stylish.hitsuji.me 12
http://127.0.0.1 8
http://webcache.googleusercontent.com 2
http://local-wordpress.hitsuji.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • ゼロからつくるWordPressテーマ#5テンプレート階層を理理解する(前編) http://hitsuji.me
    • ⽬目次 前編 1.  テーマファイル⼀一覧 1.  前回までに作成したもの 2.  第5回で作成するもの 2.  今回のポイント 3.  テンプレートを決定する仕組み 後編(次回Up) 4.  ファイルの編集 5.  まとめ&次回予告ゼロからつくる WordPress テーマ #5 http://hitsuji.me 2
    • 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
    • 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
    • 2.今回のポイント 編集前のテーマ ü  テンプレートは、index.phpのみ   編集後のテーマ ü  テンプレートは、index.php,  home.php,  single.phpの3種類   ポイント   3種類のテンプレートは、どのように使い分けられるのか? ※ここでの「テンプレート」は、4ページで紹介したファイルの種類を指しますゼロからつくる WordPress テーマ #5 http://hitsuji.me 5
    • 3.テンプレートを決定する仕組み ⽬目次 1.  Webページを表⽰示する動き 2.  Webサーバ内の動き l  テンプレート決定フロー概要 l  例例1.  トップページ l  例例2.  個別ページ 3.  テンプレート階層とは?ゼロからつくる WordPress テーマ #5 http://hitsuji.me 6
    • 3-1.Webページを表⽰示する動き ①Webブラウザに   ③依頼されたアドレス アドレスを⼊入⼒力力   ②hitsuji.me/の   を⾒見見て、トップページ http://hitsuji.me/⏎   データを送るよう   を表⽰示すると判断   依頼する   WWW Webサーバ   Webブラウザ @hitsuji.me ④WPテンプレートで ⽣生成したトップページ ⑤届いたデータを使って   のデータを送る ブラウザがWebページを 表⽰示する   疑問:④で使われるテンプレートは、どのように決まるのか?ゼロからつくる WordPress テーマ #5 http://hitsuji.me 7
    • 3-‐‑‒2-‐‑‒1.テンプレート決定フロー概要 1.  表⽰示するWebページのアドレスを⾒見見て、 ページの種類を判断する トップページor個別記事orカテゴリor存在しないページ…etc 2.  テーマフォルダに⼊入っているテンプレー トのうち、ページの種類に最適なテンプ レートを選択する トップページ home.php 個別記事 single.phpゼロからつくる WordPress テーマ #5 http://hitsuji.me 8
    • 3-‐‑‒2-‐‑‒2.Webサーバ内の動き  例例1.トップページ表⽰示 “http://hitsuji.me/”   を表⽰示せよ 上記アドレスを⾒見見て、トップ ページを表⽰示すると判断 トップページの表⽰示設定を   ダッシュボード>設定>表⽰示設定   確認する で設定できる   ※今回は「最新の投稿」であると仮定 テンプレートファイルに、   home.phpがあるかどうか確認 ある ない home.phpに従って   index.phpに従って   最新投稿記事のhtml 最新投稿記事のhtml ソースを⽣生成する ソースを⽣生成するゼロからつくる WordPress テーマ #5 http://hitsuji.me 9
    • 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
    • 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
    • 第5回前編  まとめ&後編予告 n まとめ l  ページの種類ごとにテンプレート階層と呼ばれる テンプレートファイル名の優先順位がある。 l  Webページを⽣生成するときは、テーマフォルダ の中から、テンプレート階層の優先順位が⾼高いテ ンプレートが選択される。 l  選択されたテンプレートからhtmlを⽣生成する。 n 後編予告 l  home.phpとsingle.phpを作成して、前編で説明 したことの動作を確認します!ゼロからつくる WordPress テーマ #5 http://hitsuji.me 12
    • Appendix n  WordPress公式ページの関連記事 l  http://wpdocs.sourceforge.jp/テンプレート階層 ※11ページで紹介したテンプレート階層の   フルバージョンが掲載されています  ゼロからつくる WordPress テーマ #5 http://hitsuji.me 13