テーマの作成
出典: WordPress Codex 日本語版
このページでは、自分用の WordPress テーマの作成とデザインについて説明します。テーマを構築するためのコードの記述についての技術的な内容ですが、テーマの大まかな構造を知っておくと、テーマを少しカスタマイズしたいときにも役立ちます。 テーマの使い方、新しいテーマの入手方法・切り替え方について知りたいときは、テーマの使い方をおさらいしましょう。
これを読めば、きっと自分のオリジナルテーマや配布用テーマを作りたくなるはずです。
WordPress テーマは、WordPress サイトの外観を作り上げるための PHP ファイルとスタイルシートのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。では、どうして独自テーマを作るべきなのでしょうか？
- 自分だけのデザインの WordPress サイトを作るため
- テンプレート、テンプレートタグ、ループを活用し、異なったコンテンツやデザインのサイトを作るため。
- 特定のサイト機能のための代替テンプレートを提供するため。例えばカテゴリーページや検索結果ページなど。
- 複数のサイトレイアウトを入れ替えるため、またはテーマ (スタイル) スイッチャーを活用して、訪問者がサイトの外観を変えられるようにするため。
- 公開テーマを作って、他の人にもあなたのデザインを楽しんでもらうため。
WordPress テーマにはたくさんの利点もあります。
- スタイルとテンプレートファイルをシステムファイル (WordPress コア) から分離し、テーマに大きな影響なくアップグレードできるようになる。
- デザインをカスタマイズして、テーマ独自のページが作れるようになる。
- サイトの外観を素早く変更できる。
- ユーザーが CSS、HTML、PHPを知らなくてもかっこいいサイトを持てる。
なぜ独自テーマを作るべきなのか、考えてみましょう。
- CSS、HTML/XHTML、PHP についてもっと良く知る良い機会だから。
- CSS、HTML/XHTML、PHP についての知識を実際に使ってみる良い機会だから。
- クリエイティブな作業だから。
- (たいていの場合は) 楽しいから。
- 公開テーマを作成すれば、WordPress コミュニティと何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます！)。
WordPress テーマは、wp-content/themes/ の中のサブディレクトリに存在します。例えば、「test」というテーマは、wp-content/themes/test/ ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面にその部分が表示されないので避けましょう。テーマフォルダには、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、画像といったものが含まれています。
ダウンロードした WordPress にはそれぞれ、Twenty Ten テーマがデフォルトテーマとして同梱されています。この二つのテーマでは、ウェブページの表示内容や外観を生成するために、異なる機能やタグを使っています。独自のテーマファイルを作成する方法をよりよく理解するために、これらのテーマを詳しく見ていきましょう。
WordPress テーマは、画像を除くと、大きく分けて次の3種類のファイルから構成されています。
-
style.css-- テーマの情報 および ウェブページの外観を制御するスタイルシート -
functions.php-- オプションの関数ファイル - テンプレートファイル -- ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御
では、個別に見ていきましょう。
style.css は、テーマの「スタイルシート」情報に加えて、コメントの形式で必ず「テーマ詳細」を記述する必要があります。管理パネルのテーマ設定ダイアログで問題が生じるので、同じ詳細内容が別のテーマのコメントヘッダ/en にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。
次の例は、テーマ「Rose」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
/* Theme Name: Rose Theme URI: テーマのホームサイトの URI Description: a-brief-description Author: 作者の名前 Author URI: 作者の URI Template: 親テーマの定義 (オプション) Version: バージョン番号 (オプション) . コメント／利用許諾の記述 (あれば) . */
style.css のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「管理パネル > デザイン > テーマ」画面に表示させるために必要なものです。
子テーマの style.css
最も単純なテーマには、style.css ファイルと画像だけが含まれます。これは、他のテーマを「親」とする「子テーマ」を作れる仕組みがあるからです。
このようなテーマを作成するには、style.css のヘッダコメント内の Template: 行を編集し、このテーマ用に継承させたいテンプレートのセットを指定する必要があります。例えば、テーマ「Rose」に、別の「test」というテーマからテンプレートを継承させたい場合、Rose の style.css の冒頭のコメントに Template: test と書きます。すると、「test」は、wp-content/themes/Rose ディレクトリにある style.css ファイルと付属画像のみからなる「Rose」の親テーマとなります。さらに (WordPress 2.7 の時点では)、子テーマはテンプレートファイルを含む事もできます。このファイルは通常の通り管理パネルから選択して、親テーマ内の同名のファイルより優先させることができます。
さらに詳しくは子テーマページをご覧ください。
注: 親テーマを定義するとき、コメントヘッダの Template: セクションには、スタイルのディレクトリ名を書かなければなりません。例えば、親テーマとして Cold Steel というテーマを使う場合は、Template: Cold Steel ではなく、このテーマのディレクトリ名を Template: cold_steel などのように書きます。また、デフォルトテーマを親とする場合は Template: セクションをまったく書かないでおきます。
テーマでは、オプションとして、テーマのサブディレクトリ内に functions.php というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理パネルとサイト表示の両方で)。このファイルの使用例:
- テーマ内の複数のテンプレートファイルで使う関数の定義
- 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理パネルの設置
WordPress のデフォルトテーマには、関数と管理パネルを定義する functions.php ファイルが入っているので見本にするといいでしょう。functions.php は基本的にプラグインのように動作するので、このファイルでできることの情報は、プラグインの作成リストを見るのが一番です。
テンプレートは、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テーマの部品として定義できる様々なテンプレートを見てみましょう。
WordPress では、ウェブログの各種の表示を個別のテンプレートとして定義できるようになっていますが、ウェブログ全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、テンプレート階層に基づいて選ばれ、生成されます。テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、ウェブログとして生成・表示する全てのページ用のテンプレートとして、index.php というテンプレートファイル一つだけを使うこともできます。通常は、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。
最少2ファイル構成の WordPress テーマ:
-
style.css -
index.php
両ファイルはそのテーマのディレクトリ内に置きます。index.php テンプレートファイルはとても融通が利きます。これは、参照するヘッダ・サイドバー・フッタ・コンテンツ・カテゴリ・アーカイブ・検索結果・エラーほか、サイト上で生成されるウェブページの全てに用いることができます。よく使われる部分の担当毎に、モジュール式のテンプレートファイルとして分割することもできます。
別にテンプレートファイルを用意しなかった場合、WordPress は内蔵のデフォルトファイルを使います。例えば、comments.php や comments-popup.php/en テンプレートファイルがないときは、WordPress は テンプレート階層に従って自動的に wp-comments.php や wp-comments-popup.php を使います。これらのデフォルトテンプレートがあなたのテーマに合わなければ、自分で用意したいと思うことでしょう。
通常、分割に用いる基本的なファイルは次のとおりです (テーマのディレクトリに加えます)。
-
header.php -
sidebar.php -
footer.php -
comments.php -
comments-popup.php
これらのモジュールテンプレートファイル使うには、最終的に生成するウェブページ内に表示したいユニットを読み込む／取得 (get) するためのマスターファイル index.php 内に、テンプレートタグを書きます。
- ヘッダ部の読み込みには
get_header()テンプレートタグを使用。 - サイドバーの読み込みには
get_sidebar()テンプレートタグを使用。 - フッタ部の読み込みには
get_footer()テンプレートタグを使用。
include の使用例:
<?php get_sidebar(); ?> <?php get_footer(); ?>
各種テンプレートの動作や異なる情報を表示する方法については、テンプレートをご覧ください。
WordPress では、各クエリ (要求) タイプによって異なるテンプレートをロードできます。これには二つの方法があります。内蔵の テンプレート階層の一環とするものと、テンプレートファイルのループ内で条件タグを用いる方法です。
テンプレート階層を使うには、通常、index.php を自動的に無効にする専用のテンプレートファイルが必要です。例えば、テーマに category.php というテンプレートがあり、カテゴリページが要求されると、index.php の替わりに category.php がロードされます。category.php が存在しなければ、従来どおり index.php が使われます。
テンプレート階層では、さらに特定の用途の、例えば category-6.php のようなファイルを取得できます。-- このファイルは、カテゴリID 6 のページを生成する際に category.php に替わって使われます (バージョン 2.3 以下では、カテゴリID はログイン中に「管理 > カテゴリー」で確認できます)。バージョン 2.5 では ID カラムが管理パネルから削除されました。 'カテゴリーを編集' をクリックして URL の '...categories.php?action=edit&cat_ID=3' という部分を確認してください (cat_ID=3 なので カテゴリー ID は 3)。この詳細は、カテゴリテンプレートをご覧ください。
テンプレート階層よりもさらにテンプレートファイルの制御が必要な場合、条件タグが使えます。条件タグは通常、ある特定の条件に当てはまるかをループ内でチェックし、その条件に基づいて特定のテンプレートを読み込んだり画面にテキストを配置したりします。
例えば、ある特定のカテゴリに属する投稿にのみ独自のスタイルを生成するには、次のようなコードになります (訳注: 一つ目の例は、原文で is_category(9) となっているが、個別投稿表示時であれば in_category() を使う)。
<?php
if (is_category(9)) {
// カテゴリ 9 に当てはまるとき
include(TEMPLATEPATH . '/single2.php');
} else {
// 他のカテゴリの投稿のとき
include(TEMPLATEPATH . '/single1.php');
}
?>
あるいは、クエリを用いて次のようにします (参考)。
<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>
どちらのコードの例も、表示しようとしている投稿のカテゴリに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。 -- 全てのオプションについては 条件タグのページをご覧ください。
この機能は 現在のところ、WordPress 2.5 以降で正しく動作しません。詳細を知りたい方は原文をご覧ください。
WordPress が認識するテーマテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが WordPress にとって特別な意味を持つことは覚えておいてください。追加情報はテンプレート階層をご覧ください。
style.css- メインのスタイルシート。テーマにはこのファイルが必須で、テーマのヘッダ情報を含まなければなりません。
index.php- メインテンプレート。(親テーマのテンプレートを利用するのではなく) このテーマ自身のテンプレートを設けるなら
index.phpは必須。 comments.php- コメントテンプレート。存在しなければデフォルトテーマの
comments.phpが使われる (3.0 以降ではデフォルトテーマに含まれないので自分で含める必要あり)。 comments-popup.php- ポップアップコメントテンプレート。存在しなければデフォルトテーマの
comments-popup.phpが使われる (3.0 以降ではデフォルトテーマに含まれないので自分で含める必要あり)。 home.php- ホームページテンプレート。
single.php- 個別投稿テンプレート。ひとつの投稿が要求 (クエリ) されたときに使用。このクエリテンプレートが存在しないときは
index.phpが使われる。この他のクエリテンプレートも同様。 single-<post-type>.php- カスタム投稿タイプの個別投稿が要求されたときに使われるテンプレート。例えば books というカスタム投稿タイプを表示するためには single-books.php が使われる。
page.php- ページテンプレート。特定のページが要求されたときに使用。
category.php- カテゴリテンプレート/en。あるカテゴリが要求されたときに使用。
- tag.php
- タグテンプレート/en。タグが要求されたときに使用。
- taxonomy.php
- 項目テンプレート/en。カスタム分類内の個別項目が要求されたときに使用。
author.php- 著者テンプレート/en。ある著者が要求されたときに使用。
date.php- 日時テンプレート。ある日付または時刻が要求されたときに使用。年・月・日・時・分・秒
archive.php- アーカイブテンプレート。あるカテゴリ・著者・日付が要求されたときに使用。このテンプレートは、各クエリ種類に対応する
category.php、author.php、date.phpによって無効となる。 search.php- 検索結果テンプレート。ある検索が実行されたときに使用。
404.php- 404 Not Found テンプレート。WordPress が要求に合う投稿やページを見つけられなかったときに使用。
これらのファイルは、テンプレート階層に従って適用できるファイルがあるときや、対応する条件タグ (別名 is_*() 関数) が true を返すとき、index.php に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に is_single() 関数は 'true' を返し、有効になっているテーマ内に single.php ファイルがあれば、ページの生成にはこのテンプレートが使われます。
コード <?php bloginfo('template_directory'); ?> は、テンプレートの出力にテンプレートディレクトリの URL を挿入します。テーマ内のファイルを参照するために、この出力にさらに URI 情報を付け足すこともできます (例: <?php bloginfo('template_directory'); ?>/style.css とすると、http://www.example.com/wordpress/wp-content/themes/default/style.css と出力)。
コード <?php bloginfo('stylesheet_directory'); ?> は、現在のテーマのスタイルシートが入っているディレクトリの URL を、テンプレートの出力に挿入します。テーマ内のファイル、具体的には、スタイルシートに使うファイルを参照するために、この出力にさらに URI 情報を付け足すことができます。
定数 TEMPLATEPATH は、現在のテーマのテンプレートディレクトリへの絶対パス (末尾の / を除く) への参照です。
スタイルシート内で使われている URL は、スタイルシートファイルに対する相対パスになっている事に注意してください。スタイルシートを読み込んでいるページに対する相対パスではありません。例えばテーマフォルダ内に images/ ディレクトリを含めた場合、CSS では以下のように書きます。
h1 { background-image: URL(images/my_background.jpg); }
これで、どのページから見ても画像が正しく表示されます。
WordPress を使って追加のカスタムテンプレートを定義する事もできます。この上級者向け機能を使うには、template_redirect というアクションフックを利用します。詳しくはプラグイン API のページを参照してください。
テーマを作成する時、どのプラグインを入れても動くようにしておくと良いでしょう。プラグインは"アクションフック"を通し、WordPress に対して拡張機能を追加します (詳しくはプラグイン API を参照) 。アクションフックの多くは WordPress のコア PHP コードの中にあるため、これらのみを使う場合はテーマファイルに特別なタグを入れる必要はありません。しかし、テーマのヘッダー、フッター、サイドバー、本文などに直接情報を表示するためには、いくつかのタグ必要です。以下が含めるべきアクションフックテンプレートタグの一覧です。
- wp_head
- HTML の
<head>要素内に挿入する。header.phpテンプレート用。プラグインによるフック使用の例: JavaScript コードを<head>内に書き込む。
- 使い方:
<?php do_action('wp_head'); ?> - または
<?php wp_head(); ?>
- wp_footer
- テーマのフッター部分に挿入する。
footer.phpテンプレート用。プラグインによるフック使用の例: ページが読み込まれる最後に実行する PHP のコードをフッター下に挿入する。
- 使い方:
<?php do_action('wp_footer'); ?> - または
<?php wp_footer(); ?>
- wp_meta
- 一般的には、テーマのメニューまたはサイドバーの
<li>Meta</li>セクションに含める。sidebar.phpテンプレート用。プラグインによるフック使用の例: 広告スイッチャーやタグクラウドを表示させる。
- 使い方:
<?php do_action('wp_meta'); ?> - または
<?php wp_meta(); ?>
- comment_form
-
comments.phpおよびcomments-popup.phpのコメントフォーム終了タグ (</form>) の直前に含める。プラグインによるフック使用の例: コメントプレビューを表示させる。
- 使い方:
<?php do_action('comment_form', $post->ID); ?>
実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。
テーマのドキュメンテーションには以下の内容を分かりやすく書いてください (テーマフォルダに README ファイルを入れておくと、多くのユーザーがツマづく可能性を防ぐ事ができるでしょう):
- このテーマとテンプレートファイルでできることをはっきり説明する。
- 標準のテーマ階層の命名法則に従う。
- テーマにできない事があれば知らせる。
- 特別な変更があれば、テンプレートやスタイルシートファイルの コメント/en ではっきり言及する。テンプレートファイルと相互関係がある場合は、変更点、テンプレートのセクション、CSS スタイルにコメントを加える。
- 特別な必要条件 (カスタムのリライトルール、追加の特別なテンプレート・画像・ファイルなど) があるなら、テーマを使うために必要なステップを明確に書く。
- テーマを複数のブラウザでテスト/enして、少なくともいくつか、ユーザーがあとで遭遇するかもしれないレイアウトの問題/enを見つけるようにする。
- サポート情報や質問のために、連絡先 (サイトまたはメールアドレス) を記入する。
時間をとって、公開テーマのデザインについて書かれたページを読みましょう。
WordPress サイトデザイン リファレンスには、WordPress テーマおよびテンプレートファイルに関する資料の一覧があります。
