【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

27Apr2012

[WordPress] 最初に覚えるテンプレートテーマの構造

初めてWordPressに触れるときは「どのファイルがトップページのテンプレートか?」もわからずオロオロしてしまいます。。

僕はWEB制作を請け負っていますが、ゼロから作るよりも、現在あるサイトをちょこっとを改善する依頼がメインです。
メールでご相談を受ける中で「制作会社に既存サイトのWordPress化を発注したら、HTMLを理解しているのに見出しのデザインすら変更できなくなりました」といった悩みをよく聞きます。

静的なサイトと違い、WordPressはフォルダ構造=URLではないので、このような事が起こります。

逆に静的サイトにはない便利さもあり、そのひとつに「テーマ」という存在があります。

WordPressは”テーマ”を変える事で、サイトのデザインを全て変更できます。

それぞれのテーマはひとつのフォルダに収まっていますので、テーマの構造さえ知っておけばカスタマイズはとっても簡単!

今回は、テーマ(デザインテンプレート)の基本構造をお勉強します。

1. テーマフォルダの場所

テーマフォルダは以下の場所にあります。

/wp-content/themes/テーマフォルダ/

WordPressをインストールした時点で、上記場所にはデフォルトのテーマ「Twenty Ten」や「Twenty Eleven」が設置されています。

他に自分でインストールしたテーマも、この場所に保存されます。

テーマフォルダの保存場所

デザインを変更する場合は、各テーマ内のテンプレートファイルを変更します。

※ [ 管理パネル – 外観 – テーマの編集 ] でも利用中テーマのテンプレートファイルを変更できますが、ご利用は計画的に^^;
初心者はFTPソフトを使ってファイルのバックアップを作成しながら変更してください。

2. テーマフォルダの中身

テーマフォルダの内容の一例をあげると、このようになっています。

テーマフォルダの中身

中身はテーマによって異なりますが、テンプレートに使えるファイル名は決められていますので、例に上げたファイル名のいくつかはお使いのテーマフォルダでも見つかるはずです。

3. テンプレートファイルの構造

テーマフォルダを見てみると、

header.php
footer.php

という、WEB制作で聞き慣れた名前が付けられたファイルに気づくと思います。

これらは名前の通り、各ページのヘッダー部分・フッター部分のみが記述されたファイルで、他のテンプレート内で呼び出して使う事ができます。

こんな感じです。

テンプレートファイルの構造

個別記事のテンプレート[single.php]内で、ヘッダー・フッター・サイドバー、それぞれのテンプレートファイルを読み込んでいます。

header.phpを読み込む際は、テンプレートファイル内に以下のタグ(テンプレートタグ)を書きます。

一般的に、header.phpなどの共通パーツは、すべてのテンプレートファイルで読み込まれます。
これにより、header.phpを一度変更するだけで、サイト全体に反映されます。

テンプレートファイルの種類

4. どのページで、どのファイルが読み込まれるの??

さて。ついに一番気になるお話が始まります。

WordPressでは以下のような決まりがあります。

○○ページの出力には○○.phpを読み込む。

トップページにはindex.php
個別記事にはsingle.php
固定ページにはpage.php などなど。

これに加えて、もうひとつ決まりがあります。

○○.phpが無いときは、△△.php。 これが無いときは□□.phpを使う

固定ページにはpage.phpを使う。無い場合はindex.phpを使う。

この様に、テンプレートファイルには優先順位があります。

WordPress Codexで全てのページテンプレートの優先順位を確認できます。

WordPress:Codex テンプレート階層

全てのページテンプレートの優先順位を把握する必要はないと思いますので、今回、特に重要と思われるテンプレートだけをピックアップしました。

WordPressテンプレートファイルの階層(優先順位)

当サイトの愛犬カテゴリーの、カテゴリー別アーカイブページを例に取って説明します。
愛犬カテゴリーのスラッグは[lovedog]、ID[26]です。

  1. 愛犬カテゴリーの一覧ページにアクセスがあった時、WordPressはテーマフォルダ内に[category-lovedog.php]が存在するか調べます。 存在する場合は、愛犬カテゴリーのアーカイブページには[category-lovedog.php]が適用されます。
  2. 上記ファイルが存在しない場合、次に[category-26.php]を探します。
  3. その次が[category.php]です。一般的に配布されるテーマで見かけるのは、このファイルからです。
  4. category.phpも存在しない場合は、[archive.php]が適用されます。 archive.phpが用意されていないテーマは、あまり見かけません。
  5. archive.phpも存在しない場合は、[index.php]が適用されます。 index.phpが無いテーマはあり得ません。

上の表を見ると分かる通り、ページに対応するテンプレートが無い場合、最終的に全てのページはindex.phpを参照します。

極論を言えば、index.phpだけあればテーマは成り立つ。という事になります。

多くのテーマではトップページの出力に[index.php]を利用しますが、先述の通りindex.phpは最後の砦ですので、このファイルはカスタマイズをしないほうが安全です。

トップページデザインを変更したい場合は、index.phpをコピーしてhome.phpを作成、カスタマイズする方法がオススメです。

5. カテゴリーごとに異なるテンプレートを読み込む

テンプレートの優先順位を使った簡単なカスタマイズをしてみましょう。

カテゴリー別アーカイブページでは、カテゴリーごとに異なるテンプレートを用意する事ができます。

この機能を使えば、例えば”WordPress”のカテゴリーページにだけ、上部に「WordPressカスタマイズ承ります!」という文字を表示させる事ができます。

5.1. カテゴリー用のテンプレートを複製する

デフォルトのカテゴリー用テンプレート(category.php)を複製します。

※category.phpがない場合はarchive.phpを複製します。ここの仕組みは前項で説明した通りですね!

テンプレートファイルを複製します

5.2. 特定カテゴリー専用にする

複製したファイル名を、WordPressカテゴリー専用にします。

前項で作成した表を確認すると、カテゴリーページのテンプレートの優先順位は・・・

1, category-$slag.php
2, category-$id.php
3, category.php
4, archive.php
5, index.php

今回は2番の[category-$id.php]を作成してみます。

WordPressカテゴリーのidを確認して、ファイル名を変更します。

・カテゴリーIDを簡単に調べる方法

「管理パネル – 投稿 – カテゴリー」 でカテゴリー編集画面を表示。
IDを知りたいカテゴリーに進み、そのページのURLを調べると書いてあります。

http://yourdomain.com/~~category&tag_ID=10~~~

カテゴリーidの確認方法は以下の記事でもご紹介しています。
指定カテゴリの人気記事リストを任意の場所に表示

例えば、WordPressカテゴリーのIDが”5″だった場合、ファイル名を[category-5.php]にします。

5.3. 複製したcategory.phpを変更して動作確認

作成した[category-5.php]に対してカスタマイズを行います。

ここではTwenty Elevenのソースコードの例で、実際にやってみます。

コピー元のcategory.php

<?php
/**
 * The template for displaying Category Archive pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

		<section id="primary">
			<div id="content" role="main">

			<?php if ( have_posts() ) : ?>

				<header class="page-header">
					<h1 class="page-title"><?php
						printf( __( 'Category Archives: %s', 'twentyeleven' ), '<span>' . single_cat_title( '', false ) . '</span>' );
					?></h1>

					<?php
						$category_description = category_description();
						if ( ! empty( $category_description ) )
							echo apply_filters( 'category_archive_meta', '<div class="category-archive-meta">' . $category_description . '</div>' );
					?>
				</header>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>

					<?php
						/* Include the Post-Format-specific template for the content.
						 * If you want to overload this in a child theme then include a file
						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
						 */
						get_template_part( 'content', get_post_format() );
					?>

				<?php endwhile; ?>

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

			<?php else : ?>

				<article id="post-0" class="post no-results not-found">
					<header class="entry-header">
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post-0 -->

			<?php endif; ?>

			</div><!-- #content -->
		</section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

以下がカスタマイズをしたcategory-5.phpです。
line.17に文章を追加しました。HTMLファイルと同様に、classやidを指定してCSSでデザインをする事もできます。

<?php
/**
 * The template for displaying Category Archive pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

		<section id="primary">
			<div id="content" role="main">

			<?php if ( have_posts() ) : ?>

				<p>WordPressカスタマイズ承ります</p>

				<header class="page-header">
					<h1 class="page-title"><?php
						printf( __( 'Category Archives: %s', 'twentyeleven' ), '<span>' . single_cat_title( '', false ) . '</span>' );
					?></h1>

					<?php
						$category_description = category_description();
						if ( ! empty( $category_description ) )
							echo apply_filters( 'category_archive_meta', '<div class="category-archive-meta">' . $category_description . '</div>' );
					?>
				</header>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>

					<?php
						/* Include the Post-Format-specific template for the content.
						 * If you want to overload this in a child theme then include a file
						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
						 */
						get_template_part( 'content', get_post_format() );
					?>

				<?php endwhile; ?>

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

			<?php else : ?>

				<article id="post-0" class="post no-results not-found">
					<header class="entry-header">
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post-0 -->

			<?php endif; ?>

			</div><!-- #content -->
		</section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

line.10とline66,67を見て下さい。3項で解説した、header.phpなどを読み込むテンプレートタグが記述されています。

TwentyElevenはデフォルトテーマですが、様々な機能を詰め込んでいる為、かなり複雑なソースコードになっています。
カスタマイズしながらWordPressを学ぶには最適なテーマですが、カスタマイズベースとしては他にもっとシンプルなテーマがたくさんあります。

とりあえず簡単にデザインカスタマイズをしたい!という場合は、以下のシンプル系テーマのまとめ記事が参考になると思います^^

[WordPress] カスタマイズベースに使えそうなシンプルテーマまとめ

あとがき

今回カスタマイズした方法では、アーカイブページのみカテゴリー別に対応していますが、実際の利用を想定すると、個別記事ページなどもデザインを変更したいと思います。残念ながら個別記事ページをカテゴリー別にカスタマイズするにはテンプレートの優先順位だけでは対応できませんので、single.php内にPHPで条件分岐をしたりします。

WordPressは、CMSの中では圧倒的に情報がありますので、やりたいことは大抵ネット上で方法が見つかります。
PHPの条件分岐も、そこまで難しくはありませんので、コピペで実現できるかもしれません。

WordPressはブログツールでありながら、汎用CMSとしてコーポレートサイトの構築に使われるくらいの”自由度の高さ”が特徴です。
やりたいことが見つかったら、是非、調べてみてください。

関連記事