【WordPress 連載企画第2回】テーマファイルの構造を理解しよう

2014.06.17

10日で覚えるWordPress カスタマイズ、連載第2回の今回は、テーマファイルの構造について説明します。

WordPressテーマ

今回は WordPress のテーマについて説明していきます。
テーマとは、サイトのデザインや機能をまとめた一つのファイル群です。wp-content/themes/を見てみると、各テーマがまとめられています。

テーマは WordPress 管理画面の[外観]→[テーマ]で有効化することで切替が可能になります。

それでは今回は、WordPress にデフォルトで同梱されているテーマ「twentytwelve」をベースにカスタマイズしていきます。
テーマ「twentytwelve」を複製し、オリジナルテーマ「bashalog-theme」というテーマを作りました。

テーマに必要なファイルは、このテーマディレクトリ wp-content/themes/bashalog-theme 配下に作成していきます。

テーマに必要な各種ファイル

スタイルシート　　　　　　　　　(style.css)
スクリーンショット画像　　　　　(screenshot.png)
テンプレートファイル　　　　　　(index.php, header.php, sidebar.php, etc...)
テーマ内で使用する関数ファイル　(functions.php)

スタイルシート

まずはスタイルシート(style.css)です。
通常のスタイルシートと異なるのは、ファイルの冒頭に渡り、WordPressでテーマを扱うための設定を必ず書く必要があります。
以下のスタイルは記述例です。


/*
Theme Name: バシャログ。テーマ 			    (テーマ名
Author: C-brains Corporation.			    (社名
Description: オリジナルのテーマファイルです	    (テーマの説明
Version: 1.0.0					    (バージョン
License: GNU General Public License v2 or later     (ライセンス
*/

～以降スタイルを記述～

スクリーンショット画像

次にスクリーンショット画像です。
これはブログテーマを選択するときに一覧で使用される画像です。一目で特徴がわかる画像を使用するよう心がけましょう。

執筆時の最新バージョン WordPress 3.9 での推奨サイズは、横 880px × 縦 660pxとなっています。
スクリーンショット画像があると、お客さんにとっても分かりやすいですし、是非設置してきたいところです。

テーマディレクトリ直下に screenshot.png というファイルを配置すると下の画像の赤枠部分に配置した画像が表示されます。

テンプレートファイル

3つ目はテンプレートファイルです。
WordPressのテンプレートでよく使われるテンプレートには以下のようなものがあります。

home.php･･･････トップページ
index.php･･････メインテンプレート ※必須ファイル
header.php･････ヘッダー
footer.php･････フッター
sidebar.php････サイドバー
single.php･････投稿記事
page.php･･･････固定ページ
category.php･･･カテゴリアーカイブ
archive.php････日付別アーカイブ
tag.php････････タグアーカイブ
404.php････････404エラー
search.php･････検索結果

WordPress のページ表示方法は階層構造になっていて、ユーザからの要求があった場合、それに見合ったファイルを表示してくれます。
home.php ファイルがある場合には通常サイトのトップページにあたる index.php ではなく先に home.php を探してあった場合にはそれがトップページとして表示されます。

言葉とファイル名だけではわかり辛いので、一般的なブログ型サイトに使われるテンプレートを絵にしてみました。