ワードプレスのテーマのプログラム構造の基礎

WordPress ウェブサイトのページは静的なものではなく、動的なものです。ページは訪問されるたびにその場で作成され、別のファイルやデータベースから断片的に引き出されたデータから構築されています。

WordPressがサイトを動的に表示している方法

WordPress は大きく分けてデータベースとプログラムファイルから成り立ちます。

  • あなたのブログの情報(サイト名、ブログの記事、コメントなど)はすべて データベースに保存されています。
  • その情報は、PHPというプログラミング言語を使ってデータベースから引き出されます。
  • そして、取得した情報は、HTMLとCSSを使用して、テーマのテンプレートファイルを介して表示されます。

WordPress テーマのテンプレートファイルは PHP と HTML、CSS、JAVASCRIPT で書かれており、テーマを構成するプログラムファイルは.php で終わるファイルとなります。

テンプレートファイルの仕組み

各テーマのテンプレートファイルは、1つの投稿と1対1対応していません。

ワードプレスの1つの投稿は、通常、複数のテンプレートファイルを使って構成されています。ほとんどのテーマでは、ヘッダー、フッター、サイドバーは別々のPHPファイル(header.php、footer.php、sidebar.php)にプログラミングされています。
ワードプレスはこれらのテンプレートファイルを「呼び出し」して、統合し1つのページに組み立てています。
1000の投稿があるサイトでも、このたった5つのテンプレートファイルがサイトの表示を担うとお考え下さい。

WordPress のループ

ページやブログ記事のメインコンテンツは、The Loopと呼ばれる仕組みを使って、データベースからページの内容を取得することで表示されます。ワードプレスの特徴的なループプログラムの間にコンテンツを呼び出して表示する様々な組み込みの処理を使い、ページが描画されています。

ループのプログラムの例

if ( have_posts() ) : while ( have_posts() ) : the_post();
多くのテーマではこの間にデータベースから引き出したコンテンツを表示する処理があります
endwhile;

WordPress のテンプレート階層

WordPress は、特定のページを表示するための正しいテンプレートファイルをファイル名から探すように設計されています。

例としまして

あなたのブログの訪問者が著者の投稿を読み、その著者の名前をクリックして、その著者の投稿をさらに読むとします。そうすると、著者のアーカイブページ(この著者の投稿記事一覧ページ)に移動します。

著者アーカイブページを作成するために、WordPress は author.php を探します。このファイルは、あなたのサイトのあらゆる著者のアーカイブを表示するために使用されます。

テーマに author.php ファイルがない場合、WordPress は次に archive.php というファイル名を探します。このファイルは、特定のタグやカテゴリのアーカイブを含む、すべてのアーカイブを表示するために使用されます。

ブラウザーで現在表示されているページのテンプレートファイル

テーマのテンプレートファイルを変更したい場合は、どのテンプレートファイルが表示されているページを表示するのに使用されているのかを判別する必要があります。

一般的には下記のようなファイル名となっています。

404.php 記事が見つからないときに表示するページ
footer.php コンテンツ以外の共通フッター部分の出力
functions.php テーマ独自の処理が記載されています
header.php Bodyタグとその直後のメニューなど共通ヘッダーを出力
singular.php 単ページ(投稿、固定ページ)のコンテンツ部分を出力
comments.php コメントを出力
archive.php 記事一覧を出力
page.php 固定ページを出力
single.php 投稿ページを出力
sidebar.php サイドバーを出力

 

テーマのファイル構成をみる方法

WordPressのダッシュボードから、「外観」の下にある「テーマエディタ」をクリックします。テーマのテンプレートファイルは、右側の「テンプレート」の下にリストアップされています。

テンプレートファイルの仕組みを理解したら、WordPressのプロへの道が開けました。テーマの仕組みを基本的に理解していれば、テーマをより簡単に修正したり、新しいテンプレートを作成したり、独自のテーマを作成したりすることができます。

このコンテンツは役に立ちましたか?

関連コンテンツ

コメントを投稿する


上の計算式の答えを入力してください