最低限度 CMS 的なレベル

2010年2月19日 金曜日 takafumi

テンプレート階層 – Template hierarchy

前回分の内容で WordPress のすべての表示形式に対応できます。
メインページなどの記事一覧はもちろん、単体記事の表示や固定ページの表示まで大丈夫です。

しかし、固定ページではレイアウトや色を変えたい、なんてのもよくある要望です。
そういう場合は index.php をコピーして page.php の名前で保存すれば固定ページを読み込むときだけ、テンプレートを変えることができます。
もちろん page.php の内容は表示させたい内容へ変更してください。たとえば div.page を追加するとか。
また、もし過去記事のアーカイブページではタイトルだけを並べたい、というような場合は同様に archive.php というファイルを作って中身を編集すれば OK です。

このように WordPress では表示させたい内容によってテンプレートを変える、言い換えれば違った形式で表示することができます。
これが WordPress の「テンプレート階層(Template hierarchy)」です。
WordPress が何かを表示しようとするときには必ずテンプレートを使いますが、どのテンプレートを使うかの優先順位が決められているというしくみです。

代表的なものだと単体ページなら single.php 、固定ページなら page.php 、カテゴリーページなら category.php 、などになります。
それぞれのスラッグや id を利用することで
さらに細かくテンプレートを指定することも可能です。
ただし単体記事については id などでの指定はできません。
この優先順位を図にすると以下のようになります。

File:Template Hierarchy.png « WordPress Codex

テンプレートの分割

こうしてテンプレートを使い分ける場合、どのテンプレートにもページのヘッダ・サイドバー・フッタなど共通部分が含まれることになります。
それぞれ違った内容ならそれもいいですが、たいていは共通です。
であれば、できるだけ重複しないようにした方が管理は簡単になります。
というわけでほとんどのテーマではテンプレートは以下のように分割しています。

<html>
<head>
<link rel='stylesheet' href="./wp-content/themes/tutorial/style.css" type="text/css">
<?php wp_head(); ?><!-- プラグインとか用おまじないその1 -->
</head>
<body>
<div id="header">
Hello WordPress theme!!
</div>

=== ↑ header.php ここで分割 ↓ index.php ===

<div id="main">
<!-- ↓ここから WordPress ループ 開始 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">表示したい記事
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p></div>
<?php endwhile; else: ?><!-- ↑が記事表示部分 ↓がエラーの時の表示 -->
ごめんっ!適当な内容が見つかりませんでしたっっ!!
<?php endif; ?>
<!-- ↑ここまで WordPress ループ -->
</div>

=== ↑ index.php ここで分割 ↓ sidebar.php ===

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><!-- サイドバーウィジェット開始用おまじない -->
<li>
<h2>sidebar</h2>
<p>sidesid esi des idesidesi desidesidesi desi de sidesi deside</p>
</li>
<?php endif; ?><!-- サイドバーウィジェット終了用おまじない -->
</ul>

=== ↑ sidebar.php ここで分割 ↓ footer.php ===

<div id="footer">
fooooooooooooooooooooooooooooooooooot
</div>
<?php wp_footer(); ?><!-- プラグインとか用おまじないその2 -->
</body>
</html>

分割して保存したら index.php が以下のようになるようおまじないを追加します。

<?php get_header(); ?><!-- ヘッダ部分を読み込み -->

<div id="main">
<!-- ↓ここから WordPress ループ 開始 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">表示したい記事
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p></div>
<?php endwhile; else: ?><!-- ↑が記事表示部分 ↓がエラーの時の表示 -->
ごめんっ!適当な内容が見つかりませんでしたっっ!!
<?php endif; ?>
<!-- ↑ここまで WordPress ループ -->

</div>

<?php get_sidebar(); ?><!-- サイドバー部分を読み込み -->

<?php get_footer(); ?><!-- フッタ部分を読み込み -->

この状態の index.php を複製してリネームして書き換えていけば、表示する内容によってテンプレートを変えることができます。

もし特定のテンプレートでは違うヘッダを読み込みたい、という場合は
<?php get_header(); ?> を <?php get_header(‘hoge’); ?> として、読み込ませたいヘッダテンプレートのファイル名を header-hoge.php にします。(ただしバージョン2.7以降)
サイドバーやフッタも同様です。

外部のテンプレートファイル

さて。ここでもうちょっとおまじないを追加してみます。

<!-- ↓ここから WordPress ループ 開始 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">表示したい記事
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_content(); ?></p></div>
<?php comments_template(); ?><!-- コメントテンプレートの読み込み -->
<?php endwhile; else: ?><!-- ↑が記事表示部分 ↓がエラーの時の表示 -->

記事単体へのリンクとコメント用テンプレートの読み込みを追加しました。
これで記事を単体で表示させたときにコメント欄が表示されるようになります。
しかしコメント用テンプレート comments.php は(tutorialフォルダ内に)作ってません。
このように読み込むように指定されたテンプレートがフォルダ内にない場合 WordPress は default テーマからテンプレートを読み込みます。
もし header.php を削除やリネームした場合、デフォルトテーマのヘッダテンプレートが読み込まれるわけです。
読み込まれますが、スタイルシートの url とかが変わってしまうので(あまりないとは思いますが)意図的に読み込む場合はスタイルや画像は用意する必要があります。

※3.0 以降は <?php comment_form(); ?> を利用することで比較的手軽にカスタマイズできるようになりました
そして自分で comments.php を作る場合ですが…かなりややこしいです。
というのはコメントが許可されているかとかログインせずにコメントが可能かとかをチェックする必要があるからです。
デフォルトテーマの comments.php へスタイルを指定するのが一番おすすめですが、表示されるテキストを変更したいような場合は comments.php を書き換えるしかありません。
しかし多言語化(国際化?)のシカケがされているのでちょっと見ただけではドコのテキストが対応しているかわかりづらくなっています。
私が適当に書き換えたものを一応 zip へ入れておきますが、参考程度でお願いします。

以上で最低限度CMS的なレベルで使えるようになったのではないでしょうか。
というわけで今回はここまで。
次回は同じようなことを実現する別のやりかたです。

さらに詳しい内容は今回と次回の内容に該当する Codex のページをご覧ください。

テンプレート階層 – WordPress Codex 日本語版

サンプルファイル:tutorial03

次:最低限度 php 的なレベル

カテゴリー:

コメントを残す