WordPressのテンプレートファイルの仕組みを理解したい前編

皆さんこんにちは、webデザイナーのハナフサです。
WordPressに関する記事を書いていくにあたり、初めて実装したときにつまづいた所などを織り交ぜつつ、習得中の私ならではの目線から紹介できたらなと思っています。テンプレートファイルを説明するのに一回で紹介するには範囲が広すぎるので、まずはテンプレートファイルとWordPressの関係性などの理解からまとめていきます。

この記事の内容

1 テーマの説明
2 テーマを構成しているファイル
3 WordPressのテンプレート
4 構造や階層については後編へ

テーマの説明

まず、テンプレートファイルの説明に必要不可欠なWordPressのテーマについて説明します。テーマとはwebサイトの外観と機能が備わったものです。外観は見た目部分のことです。機能は、例えばテーマカスタマイズ(ナビゲーションの文字などを管理画面から編集できる)機能や、お問い合わせフォームなどの機能のことです。

ただし、注意すべき点があってWordPressの公式ページによると、作成するテーマに決定的な機能を追加することは推奨されていないということです。

ここで言う決定的な機能とは、テーマを変更して機能が消えたときに、なくなると困る機能のことを指しているのではないかと思います。

例えば、一番最初に選んだテーマにお問い合わせフォームの機能が備わっていたとします。しかし、サイトのデザインを変えるために他のテーマに変更しました。ところが、変更後のテーマにはお問い合わせフォームの機能が備わっておらず、以前のテーマで使用していたお問い合わせフォームが機能しなくなり、お問い合わせを受け付けることができなくなりました。というような問題が起こるからです。

そういう問題を起こさないためには、決定的な機能はプラグインを使用すると、機能を保ったままサイトデザインの変更ができるようになります。なので、外観に関わる機能はテーマ、それ以外の機能はプラグイン。という感じに分けてWordPressを構成していくことが理想的な形なのかなと思います。

テーマを構成しているファイル

基本的にテーマを構成しているファイルは、次のように分類できます。

見た目を定義するスタイルシート (style.css)
HTMLを構成するテンプレートファイル (index.phpやpage.phpなど)
機能の追加やカスタマイズするfunctions.php
画像やJavaScriptファイル

CSSはページの見た目を記述するファイルというのはご存じだと思います。ただ、WordPressのstyle.cssはそれに加えてテーマを認識させるための記述が必ず必要です。詳しくはWordPressの公式ページを見てください。

テンプレートファイルはPHPファイルです。このPHPでHTMLを生成します。

functions.phpもPHPファイルですが、テンプレートとは違って直接HTMLを生成するのではなくWordPressにテーマの機能を追加したり、カスタマイズするために使用します。

WordPressのテンプレート

テンプレートとはweb上に、サイトをどのように表示させるかを定義するファイルです。一般的にテンプレートといえば、文章を流し込む雛型のことを言うと思います。下のように、<% ～ %>で囲まれた部分がそれぞれ置き換わるように想定したものはテンプレートと言えると思います。

<div>
    <h2><% タイトル %></h2>
    <p><% 文章 %></p>
</div>

WordPressのテンプレートも似たようなものです。HTMLは共通で、コンテンツの部分だけが入れ替わるように、PHP、テンプレートタグを使って書くことができます。

    <div>
        <h2><?php the_title(); ?></h2>
        <p><?php the_content(); ?></p>
    </div>

the_title()やthe_content()はテンプレートタグと呼び、現段階ではタイトルと文章を取得しているものだと思ってください。

構造や階層については後編へ

今回の記事では、テンプレートファイルが何に使われているのかと、WordPressのテンプレートについて説明をしました。後編では今回説明しなかったWordPressのテンプレートファイル、それに関わる階層や構造などについて深く掘り下げようと思います。