SlideShare a Scribd company logo
ゼロからつくる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

More Related Content

What's hot

WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
 
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックWordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
 
Word press34
Word press34Word press34
Word press34BREN
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るTakashi Uemura
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoyatamotsu toyoda
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部Yuki Suzuki
 
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
Takashi Uemura
 
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門muracchi
 
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解するWordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解する
Yoshinori Kobayashi
 
WordPressとjQuery
WordPressとjQueryWordPressとjQuery
WordPressとjQuery
Seto Takahiro
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordBeach @kurudrive
WordBeach @kurudriveWordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
 
Word press 3.5RC2 - パーフェクト functions.php -
Word press 3.5RC2   - パーフェクト functions.php - Word press 3.5RC2   - パーフェクト functions.php -
Word press 3.5RC2 - パーフェクト functions.php - BREN
 

What's hot (20)

WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックWordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成
 
Word press34
Word press34Word press34
Word press34
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
 
Wp html5
Wp html5Wp html5
Wp html5
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部
 
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
 
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
 
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解するWordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解する
 
WordPressとjQuery
WordPressとjQueryWordPressとjQuery
WordPressとjQuery
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と Bootstrap
 
WordBeach @kurudrive
WordBeach @kurudriveWordBeach @kurudrive
WordBeach @kurudrive
 
Word press 3.5RC2 - パーフェクト functions.php -
Word press 3.5RC2   - パーフェクト functions.php - Word press 3.5RC2   - パーフェクト functions.php -
Word press 3.5RC2 - パーフェクト functions.php -
 

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

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップWordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
Mignon Style
 
WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門
Michinari Odajima
 
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
 
Theme review-guidelines wckobe2013
Theme review-guidelines wckobe2013Theme review-guidelines wckobe2013
Theme review-guidelines wckobe2013hiratatsuya
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
 
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
Hirokazu Nishi
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
Akinori Kawamitsu
 
20141206 handson
20141206 handson20141206 handson
20141206 handson
Six Apart
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
 
Movable Type 5のテーマ機能を活用する
Movable Type 5のテーマ機能を活用するMovable Type 5のテーマ機能を活用する
Movable Type 5のテーマ機能を活用する
Hajime Fujimoto
 
MovableTypeとWordPressの比較
MovableTypeとWordPressの比較MovableTypeとWordPressの比較
MovableTypeとWordPressの比較
Hirofumi Nakahashi
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」ericsagnes
 
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」タカシ キタジマ
 
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibanaMediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
 
WebAppDev勉強会 #4
WebAppDev勉強会 #4WebAppDev勉強会 #4
WebAppDev勉強会 #4Kohei Noda
 
WordPressって何
WordPressって何WordPressって何
WordPressって何
Kazue Igarashi
 
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
 

Similar to ゼロからつくるWord pressテーマ第5回 (20)

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップWordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
 
WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門
 
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
 
Theme review-guidelines wckobe2013
Theme review-guidelines wckobe2013Theme review-guidelines wckobe2013
Theme review-guidelines wckobe2013
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
 
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
 
20141206 handson
20141206 handson20141206 handson
20141206 handson
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
 
Movable Type 5のテーマ機能を活用する
Movable Type 5のテーマ機能を活用するMovable Type 5のテーマ機能を活用する
Movable Type 5のテーマ機能を活用する
 
MovableTypeとWordPressの比較
MovableTypeとWordPressの比較MovableTypeとWordPressの比較
MovableTypeとWordPressの比較
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
 
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
 
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibanaMediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
 
WebAppDev勉強会 #4
WebAppDev勉強会 #4WebAppDev勉強会 #4
WebAppDev勉強会 #4
 
WordPressって何
WordPressって何WordPressって何
WordPressって何
 
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
 

Recently uploaded

FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
atsushi061452
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
atsushi061452
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 

Recently uploaded (15)

FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 

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

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