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

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

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     (ライセンス
*/

~以降スタイルを記述~
20140611_fujihara_000.png

スクリーンショット画像

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

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

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

20140611_fujihara_002.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 を探してあった場合にはそれがトップページとして表示されます。

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

20140611_fujihara_003.png

上記の絵のようなブログサイトでは home.php, header.php, footer.php, sidebar.php, single.php が使われています。
自身が作成するサイトの必要に応じてテンプレートは追加することが可能です。

functions.php

最後に関数ファイル function.php ファイルについてです。
functions.php とは、テーマ内で使用する機能や関数をまとめたファイルです。
関数ファイルとしてまとめておく事で、どのテンプレートからもその関数を使えます。

また、テーマ機能に対応する定義や、ユーザがテーマの外観をオプションで設定できる管理パネルの設置が行えます。

今回のまとめ

いかがでしたでしょうか。
テーマは世界中にあふれていますから、既存のテーマのファイルを見るのも勉強になると思います。
次回はWordPressの基本となる条件分岐とループについてご説明していこうと思います。

参考記事

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ