1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressのテーマ作成方法 > 
  5. WordPressのテンプレート階層を初心者でも分かるように解説

WordPressのテンプレート階層を初心者でも分かるように解説

WordPressのテンプレートの種類と階層、組み合わせ方などを初心者でも分かるように解説。シンプルなテーマを作成できるソースコードも掲載。

  • 2017/1/9
  • 2016/6/4

WordPressテーマは「テンプレート」と呼ぶファイルで構成されています。
テンプレートは階層構造になっていて、仮にあるテンプレートが無くても別のテンプレートで代用することができる仕組みになっています。

テンプレートの階層構造は少々分かりにくい構造になっていますので、初心者の方でも分かりやすいように解説します。

テンプレートの種類

WordPressテーマのテンプレートは、個別投稿ページやカテゴリー表示など「ページ表示用」の「ページテンプレート」と、ヘッダーやサイドメニューのHTMLを記述する「パーツテンプレート」があります。
そのほかにも投稿タイプや固定ページなどをページ別にデザイン変更する「カスタムテンプレート」などもあります。

パーツテンプレートは「サイドメニュー用」「フッター用」などのテンプレートがあり、ページテンプレート内にインクルード（取り込み）関数を書いて使う仕組みになっています。
ページテンプレートとパーツテンプレートの関係は、下の図のようになっています。

ページテンプレートとパーツテンプレートの説明図

このようにページの共通部分を一つのテンプレートにすることで、該当するパーツテンプレートを修正するだけで全てのページを変更できるというメリットがあります。

ページテンプレート

特定のページの表示をするためのページテンプレートの代表的なものには、以下のような種類があります。
テンプレートは「.php」の拡張子を持ったphpファイルで、多くのテンプレートで決まったファイル名をつけます。

ページ 使用するテンプレート
フロントページ front-page.php home.php index.php
ブログ投稿
インデックスページ		 home.php
カテゴリーページ category.php archive.php
タグページ tag.php
月別ページ date.php
カスタム投稿タイプページ archive-$posttype.php
個別投稿ページ single-post.php single.php
固定ページ $custom.php page.php
検索結果ページ search.php
404ページ 404.php

（$customなど$から始まる文字は変数を表していて、任意の文字が入ります）

この表を見ると、同じページで複数のテンプレートが1行内に表示されています。（投稿ページなら、single-post.php、single.php、index.php）
これは、そのページで使用するテンプレートの優先順位を表していて、左側のマスで表示されているテンプレートを優先して使用します。

個別投稿ページを表示する時に、テーマディレクトリにsingle-post.phpがあればsingle-post.phpを使い、single-post.phpがなかった場合にはsingle.php、single.phpもなかった場合はindex.phpを使用してページを表示します。

テンプレート階層の頂点（表の一番右側）にあるindex.phpさえあれば、あらゆるページの表示が可能です。

しかし、全ページの表示をindex.phpに記述すると、HTMLのソースコードが複雑化してしまいメンテナンス性も落ちてしまいます。
そのため、「投稿ページはsingle.php」、「固定ページはpgae.php」といった形で、それぞれのページ専用のテンプレートを利用するのが一般的です。

WordPress Codex日本語版 – テンプレート階層には、一般的なWebサイトでは使う機会の少ないテンプレートも含めた階層の概観図がありますので、興味がある方はご覧ください。

パーツテンプレート

パーツテンプレートの代表的なものには、以下のような種類があり、ページテンプレート内にインクルード（取り込み）関数を書いて使います。

表示部分 使用するテンプレート インクルード関数
ヘッダー部分 header.php <?php get_header(); ?>
サイドバー部分 sidebar.php <?php get_sidebar(); ?>
フッター部分 footer.php <?php get_footer(); ?>
コメント部分 comments.php <?php get_comments_template(); ?>
検索フォーム searchform.php <?php get_search_form(); ?>

表のインクルード関数を、ページテンプレート内のパーツテンプレートを読み込みたい箇所に記述すればOKです。

最小限のテーマを作成しよう

それでは最小限のテンプレート構成の、シンプルなテーマを作成していきましょう。
テンプレートは、テキストエディタでファイルを作成してそれぞれの名前で保存します。

screenshot.pngだけはPhotoShopやなどで作成する必要がありますが、用意しなくても特に問題はありません。

  • index.php
    トップページを表示するためのページテンプレート
  • header.php
    ページのヘッダー部分を表示するためのパーツテンプレート
  • footer.php
    ページのフッター部分を表示するためのパーツテンプレート
  • single.php
    個別投稿ページを表示するためのページテンプレート
  • functions.php
    テーマ内の様々な設定などを行うファイル
  • style.css
    デザインを整えるスタイルシート
  • screenshot.png
    WordPress管理画面のテーマ選択画面で表示する画像。300ピクセルx225ピクセルのPNG形式で作成します。

以下のソースコードを参考にして、各テンプレートファイルを作成しましょう。

index.php

投稿一覧をリストで表示するだけのシンプルなブログトップページです。

<?php get_header(); ?>

<h1>記事一覧</h1>

<ul>
<?php
if(have_posts()):
while(have_posts()): the_post();
?>

<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; endif; ?>

</ul>

<?php get_footer(); ?>

header.php

HTMLの頭部分から<body>までを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

single.php

<?php get_header(); ?>

<?php
if(have_posts()):
while(have_posts()): the_post();
?>

<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php endwhile; endif; ?>

<?php get_footer(); ?>

footer.php

<p>© xxx All Rights Reserved.</p>
</body>
</html>

functions.php

現時点では特に設定を記述する必要はありませんので、PHPの開始タグと終了タグがあるのみです。
テーマの設定やオリジナル関数を定義するためのファイルです。

<?php

?>

style.css

スタイルシートの冒頭部分には、作成するテーマの名前や説明、作成者の名前を記入しておく必要があります。

/*
Theme Name: テーマの名前
Description: テーマの説明
Author: 作成者の名前
Version: 1.0
*/

テンプレートを作成したら、ひとつのディレクトリにまとめてZIP形式で圧縮します。
圧縮したZIPファイルをWordPressの管理画面からアップロードして適用してみましょう。

WordPressにテーマを追加する方法
インターネット上で公開されているWordPressのテーマを追加したり、ファイルを上書きしたりする方法を解説。無料で使いやすいFTPクライアントがありますので、はじめての方でも簡単です。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲