基本的なテンプレートの構成
ワードプレスは難しく使う必要はないがカスタマイズをするならばある程度知っていなければ具現化できないばかりかトラブルに対応も出来ない。ざっくりとは、LINKやスクリプトなどヘッダーに埋め込まれるべきものは外観>テーマ編集のヘッダー.phpで書き加えるか、プラグインのHesder and Footerを使い掘り込みます。またサイト上で具現化する要素の場合、ウィジェットを使い各パーツに入れていく様にしていきます。まあプラグイン→ウィジェットに依存しがちだと最悪プレビュー出来なくなって、再度バックアップから復活という事もないだろうからいいのだけども勝手にソースが入ったり、ショートソースを発行したりして、いざという時、wordpressの構造が理解しにくいところがあるにはある。
WordPress テーマは、画像を除くと、大きく分けて次の3種類のファイルから構成されています。
- style.css – テーマの情報 および ウェブページの外観を制御するスタイルシート
- functions.php – オプションの関数ファイル。プラグインのように動作。
- テンプレートファイル – 訪問者から要求されたページを生成するために使われる PHP ソースファイル。
WordPressのテーマは、下記の最少2ファイル構成でテーマが作成できます。
- style.css
- 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のインクルードタグを使用します。
インクルードタグ一覧
- ヘッダテンプレート(header.phpを読み込む) – < ?php get_header(); ? >
- フッタテンプレート(footer.phpを読み込む) – < ?php get_footer(); ? >
- サイドバーテンプレート(sidebar.phpを読み込む) – < ?php get_sidebar(); ? >
- 検索フォーム(searchform.phpを読み込む) – < ?php get_search_form(); ? >
- コメントテンプレート(comments.phpを読み込む) – < ?php comments_template(); ? >
※<と?の間に、半角スペースがあります。 各ファイルが現在のテーマディレクトリに存在しない場合、デフォルトテーマの対象ファイルを読み込みます。 また、WordPress 2.5 以上では、サイドバーテンプレートにパラメーターを渡すことにより、別のサイドバーを読みこませることが可能です。
テンプレート階層について
前述でテンプレートファイルについては、少しは理解できたと思いますので、次はテンプレート階層について紹介していきます。 WordPressへのアクセス時、WordPressは下記のように動作します。
- URI に含まれるクエリ文字列とクエリタイプを照合し、要求されているページの種類(メインページ、カテゴリーページなど)を判断。
- 該当するページ種類のテンプレート階層に基づき、現在のテーマディレクトリ内からテンプレートファイルを探す。
- 最初に見つかったテンプレートファイルを用いて、要求されたページを生成。
上記のような動作から、WordPressにはテンプレートファイルが呼ばれる順序があります。
ページ種類別テンプレート階層
WordPress は下記のリストの上から順に、ファイルが存在するか確認し、最初に見つけたファイルを使います。 今回は抜粋して紹介をしたいと思います。
固定ページ表示
- カスタムテンプレート: ページ作成画面の「ページテンプレート」ドロップダウンメニューで選択したファイル名
- page-slug.php – 例えば固定ページのスラッグが “about” の場合は page-about.php
- page-ID.php – 例えば固定ページの ID が1の場合は page-1.php
- page.php
- index.php
カテゴリー表示
- category-slug.php – 例えばカテゴリーのスラッグが “wordpress” の場合は category-wordpress.php
- category-ID.php – 例えばカテゴリーIDが1のテンプレートであれば category-1.php
- category.php
- archive.php
- index.php
- 404.php
- index.php
404 (Not Found) 表示
より詳しい情報は「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{ // その他の場合 } ?>
◆ 個別投稿記事でカテゴリ毎にデザインを変更する
<!--?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'); } ?>
◆ 特定のスラッグでサイドバー変更(ページ)
<!--?php // aboutページの場合、header-2.phpを読み込む if( is_page( 'about' ) ) { get_sidebar('2'); }else{ get_sidebar(); } ?-->
このように、より細かく制御が可能になります。
これらの情報はWordPress codexでより詳細に説明されてます。
コメントを残す