WordPress で作成するサイトの見た目や表示内容は、使用するテーマによって異なります。ここでは、WordPressテーマの役割と、基本的な構造についてご紹介します。
WordPressのテーマとは？
テーマとは、一般的なブログで「テンプレート」と呼ばれるものに似ています。テーマを変更すると、サイトの”着せ替え”が簡単にできます。
テーマを変更して、簡単に着せ替えられる
次の3つの画像は、WordPressの標準テーマ「Twenty Seventeen」「Twenty Sixteen」「Twenty Fifteen」を利用したときの表示例です。これらは全て、記事タイトルや本文の内容は同じですが、見た目がかなり違います。
また、見た目だけでなく表示内容も異なっています。先の画像で「Twenty Seventeen」では記事の公開日と作者名が表示されていました。「Twenty Sixteen」では、加えて作成者の画像やカテゴリーの情報(未分類)も表示されています。しかし、「Twenty Fifteen」では記事冒頭にこれらの情報は表示されていません。
テーマを手に入れるには？
テーマの多くが無料で公開されています。また、有償販売されているものもあります。おすすめのテーマは、ブログ初心者におすすめ！シンプル＆おしゃれなWordPressテーマで紹介しています。
テーマを変更するには？
テーマは、管理画面で簡単に変更することができます。変更方法について、くわしくはWordPressのテーマを変更する方法をご覧ください。
WordPress テーマの役割
では、なぜテーマを変更するだけでサイトの見た目や表示内容がガラリと変わるのでしょうか。
ここで、テーマの役割をわかりやすくするために、次の4者の関係について簡単に説明します。
- WordPress
- データベース
- サイト訪問者
- テーマ
テーマの役割を理解するために①記事データの保管場所
まず、WordPressの管理画面で作成した記事のデータは、データベースという場所に保管されます。データとは、例えば記事タイトルや本文、カテゴリーやタグ、アイキャッチ画像など、記事の作者自身が入力・指定するものがあります。他にも、いつ記事を公開したのか、誰が記事を作成したのか、といったさまざまなデータが含まれます。
データベースについて、くわしくはデータベースの基礎知識をご覧ください。
テーマの役割を理解するために②ページ表示に必要なデータの取得
記事公開後、サイト訪問者からそのページを表示するようリクエストされたとします。すると、WordPressはデータベースにアクセスし、Webページの表示に必要なデータを取得します。
この時点で、WordPressはただデータを取得しただけです。Webページとしてどのように見せるか、その役割を担うのがテーマです。
テーマの役割を理解するために③テーマによって表示内容や見た目が決まる
WordPressが取得した各データは、テーマによって表示内容や見た目のデザインが決定され、Webページとして表示されます。
上の画像のように、テーマ「A」では、
- 記事タイトルは、30pxのサイズで太字にしよう
(タイトルの文字サイズと太さを指定) - 記事タイトルの上に、記事の公開日と作者名を表示しよう
(公開日と作者名の表示位置を指定) - 記事タイトルの下に、本文を表示しよう
(タイトルと本文の位置関係を指定)
一方、テーマ「B」では、
- 記事タイトルは、20pxのサイズで青色にしよう
(タイトルの文字サイズと色を指定) - 記事の公開日は、本文の下に表示しよう
(公開日の表示位置を指定) - 作者名は、表示しないようにしよう
(作者名を非表示化)
という具合に、テーマの設定内容によって同じコンテンツデータでも見た目や表示内容を変える（着せ替えができる）わけです。
px(ピクセル)は、コンピューター上で用いられる単位です。この値が大きいほど、文字は大きく表示されます。
WordPress テーマの構造
WordPressのテーマは、どのような構造になっているのでしょうか。例として、2017年のWordPress標準テーマ「Twenty Seventeen」のなかみを見てみましょう。
このように、テーマの中にはたくさんのファイルやフォルダーが含まれています。そのうち、名前の末尾に「.php」と付いたファイルが目立ちます。これらは、コンテンツデータの表示内容や表示位置などを決めるための中心的な役割をしているファイルで、テンプレートファイルといいます。
テンプレートファイルについては、テーマをカスタマイズするときに最低限知っておきたいことでも解説しています。また、PHPファイルのうち「functions.php」については関数を指定するためのファイルで、テンプレートファイルには含まれません。
また、末尾に「.css」と付いたファイルがレイアウトや色・大きさなど見た目を決めるファイルで、スタイルシートといいます。
- WordPressテーマに必須のファイル
- テーマには、「Twenty Seventeen」のように必ずしも多くのファイルが必要なわけではありません。ただし、「index.php」と「style.css」の2つはWordPressテーマに必須のファイルで、これらが存在しないと正しく機能しません。「index.php」が必須なのは、WordPressのテンプレート階層が関係しています。
テーマに必須のテンプレートファイルが「index.php」のみとは言え、ほとんどのテーマでは複数のテンプレートファイルが用意されています。よく利用されるテンプレートファイルは、次の通りです。
| テンプレートファイル名 | 表示内容 |
|---|---|
| single.php | 個別投稿 |
| page.php | 固定ページ |
| archive.php | アーカイブ |
| front-page.php | フロントページ |
| home.php | ホームページ |
| search.php | 検索結果 |
| 404.php | 404 Not Found |
| comments.php | コメント |
| header.php | ヘッダー |
| footer.php | フッター |
| sidebar.php | サイドバー |
| index.php | メインインデックス |
このように、WordPressテーマでは、ページの種類や部分ごとにテンプレートファイルを分けることで、管理・運営をしやすくするのが一般的です。
テーマの選択とカスタマイズ
サイトの表示内容や見た目はテーマを変更することによって、”着せ替え”できることがわかりました。さらに、自分の好みに応じてテーマの内容を変更(カスタマイズ)することもできます。しかし、カスタマイズの作業にはHTML、CSS、PHP、加えてWordPress独自の関数などの知識が少なからず必要になります。
したがって、なるべくカスタマイズしなくても済むようにあなたのサイトのイメージに合ったテーマを選ぶことが、サイト制作の効率化につながります。
