会員制記事の購読をご希望されるお客様はコチラより
ログインまたは会員登録してください。

パスワードをお忘れの方はコチラ

新規登録はコチラ

 


WordPressの基本構造を理解する

2010 年 12 月 3 日 投稿者: 伊藤太一
WordPressの基本構造を理解する 「WordPressを使っており独自のテーマを作成したい。」と言う方のために独自テーマ作成の基本であるWordPressの基本構造をまとめてみましたので紹介していきたいと思います。

基本的なテンプレートの構成

WordPress テーマは、画像を除くと、大きく分けて次の3種類のファイルから構成されています。
  1. style.css – テーマの情報 および ウェブページの外観を制御するスタイルシート
  2. functions.php – オプションの関数ファイル。プラグインのように動作。
  3. テンプレートファイル – 訪問者から要求されたページを生成するために使われる PHP ソースファイル。
WordPressのテーマは、下記の最少2ファイル構成でテーマが作成できます。
  1. style.css
  2. index.php
しかしながらindex.phpのみでは制御等が困難になります。 そこでWordPressでは、下記の図のように担当毎に、テンプレートファイルとして分割し結合することが可能です。

テーマテンプレートファイル一覧(基本)

  • style.css – テーマの情報 および ウェブページの外観を制御するスタイルシート
  • index.php – メインテンプレート。
  • comments.php – コメントテンプレート。
  • home.php – ホームページテンプレート。
  • single.php – 個別投稿テンプレート。
  • page.php – ページテンプレート。
  • category.php – カテゴリテンプレート。
  • tag.php – タグテンプレート。
  • archive.php – アーカイブテンプレート。
  • search.php – 検索結果テンプレート。
  • searchform.php – 検索フォームテンプレート。
  • 404.php – 404 Not Found テンプレート。
その他にもテンプレートファイルは存在しますが、基本は上記のテンプレートファイルになりますので、その他のテンプレートファイルについては、今回省かせていただきます。

各担当の結合方法

各担当ファイルをどのように結合するかというと、下記の図にある< ?php get_header(); ? >のようなWordPressのインクルードタグを使用します。

インクルードタグ一覧

  1. ヘッダテンプレート(header.phpを読み込む) - < ?php get_header(); ? >
  2. フッタテンプレート(footer.phpを読み込む) - < ?php get_footer(); ? >
  3. サイドバーテンプレート(sidebar.phpを読み込む) - < ?php get_sidebar(); ? >
  4. 検索フォーム(searchform.phpを読み込む) - < ?php get_search_form(); ? >
  5. コメントテンプレート(comments.phpを読み込む) - < ?php comments_template(); ? >
※<と?の間に、半角スペースがあります。
各ファイルが現在のテーマディレクトリに存在しない場合、デフォルトテーマの対象ファイルを読み込みます。
また、WordPress 2.5 以上では、サイドバーテンプレートにパラメーターを渡すことにより、別のサイドバーを読みこませることが可能です。
例えば、
<?php get_sidebar('2'); ?>
のように記述をすれば、sidebar-2.phpが読み込まれます。

テンプレート階層について

前述でテンプレートファイルについては、少しは理解できたと思いますので、次はテンプレート階層について紹介していきます。 WordPressへのアクセス時、WordPressは下記のように動作します。
  1. URI に含まれるクエリ文字列とクエリタイプを照合し、要求されているページの種類(メインページ、カテゴリーページなど)を判断。
  2. 該当するページ種類のテンプレート階層に基づき、現在のテーマディレクトリ内からテンプレートファイルを探す。
  3. 最初に見つかったテンプレートファイルを用いて、要求されたページを生成。
上記のような動作から、WordPressにはテンプレートファイルが呼ばれる順序があります。

ページ種類別テンプレート階層

WordPress は下記のリストの上から順に、ファイルが存在するか確認し、最初に見つけたファイルを使います。 今回は抜粋して紹介をしたいと思います。

固定ページ表示

  1. カスタムテンプレート: ページ作成画面の「ページテンプレート」ドロップダウンメニューで選択したファイル名
  2. page-slug.php – 例えば固定ページのスラッグが “about” の場合は page-about.php
  3. page-ID.php – 例えば固定ページの ID が1の場合は page-1.php
  4. page.php
  5. index.php

カテゴリー表示

  1. category-slug.php – 例えばカテゴリーのスラッグが “wordpress” の場合は category-wordpress.php
  2. category-ID.php – 例えばカテゴリーIDが1のテンプレートであれば category-1.php
  3. category.php
  4. archive.php
  5. index.php

404 (Not Found) 表示

  1. 404.php
  2. index.php
より詳しい情報は「WordPress Codex | WordPress テンプレート階層構造図」を参考にしてください。 ページ毎、カテゴリー毎にデザインを変更する時などに役立ちます。 また、ページの種類に合うテンプレートファイルを特定する方法は一つではありません。より細かい制御を行うにはWordPress条件タグがいいでしょう。 実際に簡単な例で条件タグを紹介します。

条件タグ

まずはじめに、条件タグとは。というところからお話します。 条件タグは表示しようとしているページの種類を判定できるので、その判定結果によってテンプレートファイルを切り替えたり、複数のページ種類で共通のテンプレートファイルを使い、その中の一部分だけをページ種類に応じて切り替える、といった細かい制御ができます。

◆ ページ内容毎に読み込むcssを変更する

▼ header.php
<?php

if ( is_home() ) {
    // メインページの場合
}elseif ( is_single() ) {
    // 個別投稿ページの場合
}elseif( is_page() ){
    // ページの場合
}elseif( is_category() ) {
    // カテゴリーのアーカイブページ
}elseif( is_404() ) {
    // 404 Not Foundの場合
}else{
    // その他の場合
}
?>

◆ 個別投稿記事でカテゴリ毎にデザインを変更する

▼single.php
<?php

// カテゴリーIDが 1 の場合、single01.phpを読み込み
// カテゴリーIDが 1 以外の場合、single02.phpを読み込む

$post = $wp_query->post;
if ( in_category('1') ) {
    include(TEMPLATEPATH . '/single01.php');
}else{
    include(TEMPLATEPATH . '/single02.php');
}
?>

◆ 特定のスラッグでサイドバー変更(ページ)

▼ page.php
<?php

// aboutページの場合、header-2.phpを読み込む

if( is_page( 'about' ) ) {
    get_sidebar('2');
}else{
    get_sidebar();
}

?>
このように、より細かく制御が可能になります。

これらの情報はWordPress codexでより詳細に説明されてます。

参考URL
WordPress codex | テーマの作成
WordPress codex | テンプレート階層
WordPress codex | インクルードタグ
WordPress codex | 条件分岐タグ



コメント:2件

  1. 岡野直喜 より:

    一人でやってると、あとから考えっるとばかみたいなことにつまずいています。このサイトで基本的な理解が深まりました。ありがとうございました。

コメントフォーム

コメントを投稿するにはログインしてください。

トラックバックとピンバック

  1. [...] まずは、WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる – かちびと.net フォー・ワン・ファースト / WordPressの基本構造を理解する [...]

トラックバック URL

おススメ記事