• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「テーマの作成」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(スタイルシートガイドライン)
(各節にdivタグ埋め込み。2章の構成を原文に揃えました。)
1行目: 1行目:
 
{{テーマ・テンプレートガイド|テンプレート}}
 
{{テーマ・テンプレートガイド|テンプレート}}
 
このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、[[テーマの使い方]]をおさらいしましょう。[[テーマの使い方]]ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。
 
このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、[[テーマの使い方]]をおさらいしましょう。[[テーマの使い方]]ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。
 
+
<div id="Why WordPress Themes">
 
==なぜ、WordPress テーマを作るの?==
 
==なぜ、WordPress テーマを作るの?==
 
+
</div>
 
WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。
 
WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。
  
28行目: 28行目:
 
* [[Theme_Review|公開テーマ]]を作成すれば、[[WordPress への協力|WordPress コミュニティ]]と何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。
 
* [[Theme_Review|公開テーマ]]を作成すれば、[[WordPress への協力|WordPress コミュニティ]]と何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。
  
 +
<div id="Theme Development Standards">
 
== テーマの開発基準 ==
 
== テーマの開発基準 ==
 
+
</dvi>
 
WordPress テーマは以下の基準に則ってコーディングする必要があります。
 
WordPress テーマは以下の基準に則ってコーディングする必要があります。
  
36行目: 37行目:
 
* [[Site Design and Layout|WordPress デザインリファレンス]] 内のデザインガイドラインに従っている。
 
* [[Site Design and Layout|WordPress デザインリファレンス]] 内のデザインガイドラインに従っている。
  
 +
<div id="Anatomy of a Theme">
 
=== テーマの構造 ===
 
=== テーマの構造 ===
 
+
</div>
 
WordPress テーマは、WordPress の themes ディレクトリ (デフォルトでは <code>wp-content/themes/</code>) の中のサブディレクトリに存在します。themes ディレクトリの場所は <code>wp-config.php</code>を使って[[Editing wp-config.php#Moving_themes_folder|移動することはできません]]/[[:en:Editing wp-config.php#Moving_themes_folder|en]])。サブディレクトリ (テーマフォルダ) には、スタイルシートファイル、[[テンプレート入門|テンプレートファイル]]、オプションの関数ファイル (<code>functions.php</code>)、JavaScript ファイル画像といったものが含まれています。例えば、「test」というテーマは、<code>wp-content/themes/test/</code> ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面の利用可能なテーマ一覧に表示されないので避けましょう。
 
WordPress テーマは、WordPress の themes ディレクトリ (デフォルトでは <code>wp-content/themes/</code>) の中のサブディレクトリに存在します。themes ディレクトリの場所は <code>wp-config.php</code>を使って[[Editing wp-config.php#Moving_themes_folder|移動することはできません]]/[[:en:Editing wp-config.php#Moving_themes_folder|en]])。サブディレクトリ (テーマフォルダ) には、スタイルシートファイル、[[テンプレート入門|テンプレートファイル]]、オプションの関数ファイル (<code>functions.php</code>)、JavaScript ファイル画像といったものが含まれています。例えば、「test」というテーマは、<code>wp-content/themes/test/</code> ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面の利用可能なテーマ一覧に表示されないので避けましょう。
  
52行目: 54行目:
 
では、個別に見ていきましょう。
 
では、個別に見ていきましょう。
  
=== 子テーマ ===
+
<div id="Child Themes">
 
+
==== 子テーマ ====
 +
</div>
 
最も単純なテーマは <code>style.css</code> ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。
 
最も単純なテーマは <code>style.css</code> ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。
  
 
さらに詳しくは[[子テーマ]]のページをご覧ください。
 
さらに詳しくは[[子テーマ]]のページをご覧ください。
  
 +
<div="Theme Stylesheet">
 
=== テーマスタイルシート ===
 
=== テーマスタイルシート ===
 
+
</dvi>
 
<code>style.css</code> は、テーマの「CSS スタイル」情報に加えて、コメントの形式で'''必ず'''「テーマ詳細」を記述する必要があります。管理パネルの[[管理パネル#Design_-_Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ詳細内容が別のテーマのコメント[[File Header|ヘッダ]]/[[:en:File Header|en]] にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。
 
<code>style.css</code> は、テーマの「CSS スタイル」情報に加えて、コメントの形式で'''必ず'''「テーマ詳細」を記述する必要があります。管理パネルの[[管理パネル#Design_-_Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ詳細内容が別のテーマのコメント[[File Header|ヘッダ]]/[[:en:File Header|en]] にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。
  
87行目: 91行目:
 
<code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「[[管理パネル]] > [[管理パネル#.E5.A4.96.E8.A6.B3_-_.E3.83.96.E3.83.AD.E3.82.B0.E3.81.AE.E8.A6.8B.E3.81.9F.E7.9B.AE.E3.82.92.E5.A4.89.E3.81.88.E3.82.8B|外観]] > [[テーマの使い方|テーマ]]」画面に表示させるために必要なものです。
 
<code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「[[管理パネル]] > [[管理パネル#.E5.A4.96.E8.A6.B3_-_.E3.83.96.E3.83.AD.E3.82.B0.E3.81.AE.E8.A6.8B.E3.81.9F.E7.9B.AE.E3.82.92.E5.A4.89.E3.81.88.E3.82.8B|外観]] > [[テーマの使い方|テーマ]]」画面に表示させるために必要なものです。
  
=== スタイルシートガイドライン ===
+
<div id="Stylesheet Guidelines">
 
+
==== スタイルシートガイドライン ====
 +
</div>
 
* CSS を記述する際には [[CSS_Coding_Standards|CSS コーディング基準]]に従う。
 
* CSS を記述する際には [[CSS_Coding_Standards|CSS コーディング基準]]に従う。
 
* 可能であれば valid なCSSを使う。ただし、ベンダープレフィックスを使って CSS3 を活用する場合は除く。
 
* 可能であれば valid なCSSを使う。ただし、ベンダープレフィックスを使って CSS3 を活用する場合は除く。
97行目: 102行目:
 
** 印刷用のスタイルシートを <tt>media="print"</tt> と指定してインクルード、もしくはメインのスタイルシート内に記述する。
 
** 印刷用のスタイルシートを <tt>media="print"</tt> と指定してインクルード、もしくはメインのスタイルシート内に記述する。
  
 +
<div id="Functions File">
 
=== テーマ関数ファイル ===
 
=== テーマ関数ファイル ===
 
+
</div>
 
テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理パネルとサイト表示の両方で)。このファイルの使用例:
 
テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理パネルとサイト表示の両方で)。このファイルの使用例:
 
* [[Widgets_API|サイドバー]]、[[Navigation Menus|ナビゲーションメニュー]]、[[Post Thumbnails|投稿サムネイル]]、[[Post Formats|投稿フォーマット]]、[[Custom Headers|カスタムヘッダー]]、[[Custom Backgrounds|カスタム背景]]などの[[Theme Features|テーマ機能]]に対応するための定義  
 
* [[Widgets_API|サイドバー]]、[[Navigation Menus|ナビゲーションメニュー]]、[[Post Thumbnails|投稿サムネイル]]、[[Post Formats|投稿フォーマット]]、[[Custom Headers|カスタムヘッダー]]、[[Custom Backgrounds|カスタム背景]]などの[[Theme Features|テーマ機能]]に対応するための定義  
111行目: 117行目:
 
同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数は<code>functions.php</code>ではなく、[[Plugins|プラグイン]]内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。
 
同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数は<code>functions.php</code>ではなく、[[Plugins|プラグイン]]内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。
  
 +
<div id="Template Files">
 
=== テーマテンプレートファイル ===
 
=== テーマテンプレートファイル ===
 
+
</div>
 
[[テンプレート入門|テンプレート]]は、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして [[Template Tags|WordPress テンプレートタグ]]で構成されています。
 
[[テンプレート入門|テンプレート]]は、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして [[Template Tags|WordPress テンプレートタグ]]で構成されています。
  
123行目: 130行目:
 
テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する''全ての''ページ用のテンプレートとして、<code>index.php</code> というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。
 
テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する''全ての''ページ用のテンプレートとして、<code>index.php</code> というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。
  
 +
<div id="Template Files List">
 
==== テンプレートファイル一覧 ====
 
==== テンプレートファイル一覧 ====
 
+
</div>
 
WordPress が認識するテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。追加情報は[[Template Hierarchy|テンプレート階層]]をご覧ください。
 
WordPress が認識するテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。追加情報は[[Template Hierarchy|テンプレート階層]]をご覧ください。
  
149行目: 157行目:
 
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[Conditional Tags|条件タグ]]が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に <code>[[Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
 
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[Conditional Tags|条件タグ]]が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に <code>[[Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
  
 +
<div id="Basic Templates">
 
==== 基本的なテンプレート ====
 
==== 基本的なテンプレート ====
 
+
</div>
 
WordPress テーマは、最小で2ファイルから構成される。
 
WordPress テーマは、最小で2ファイルから構成される。
  
185行目: 194行目:
 
各種テンプレートの動作や異なる情報を表示する方法については、[[WordPress サイトデザイン リファレンス#テンプレートファイル|テンプレートファイルの項]]をご覧ください。
 
各種テンプレートの動作や異なる情報を表示する方法については、[[WordPress サイトデザイン リファレンス#テンプレートファイル|テンプレートファイルの項]]をご覧ください。
  
 +
<div id="Custom Page Templates">
 
====カスタム固定ページテンプレート====
 
====カスタム固定ページテンプレート====
 
+
</div>
 
固定ページのテンプレートファイルは[[Using Themes|テーマ]]ディレクトリの中にあります。固定ページの為の新規のカスタム固定ページテンプレートを作成するには、新しくファイルを作る必要があります。例えば、''snarfer.php'' という固定ページの為の固定ページテンプレートを作るとします。''snarfer.php'' ファイルの冒頭に以下のコードを記述します。
 
固定ページのテンプレートファイルは[[Using Themes|テーマ]]ディレクトリの中にあります。固定ページの為の新規のカスタム固定ページテンプレートを作成するには、新しくファイルを作る必要があります。例えば、''snarfer.php'' という固定ページの為の固定ページテンプレートを作るとします。''snarfer.php'' ファイルの冒頭に以下のコードを記述します。
  
201行目: 211行目:
 
冒頭に記述する上記の5行のコードの後に何を記述するかはあなた次第です。記述したコードの内容により、Snarfer 固定ページテンプレートを使う固定ページがどのように表示されるかコントロールされます。この目的に使用できる WordPress テンプレート関数の詳細は[[Template Tags|テンプレートタグ]]をご覧ください。場合によっては、他のテンプレートファイル(''page.php'' や ''index.php'' など)をコピーし、''snarfer.php'' とリネームし、上記5行のコードをファイルの冒頭に記述する方が作りやすいでしょう。全てをスクラッチから(イチから)作るよりも、HTML と PHP コードを''変更''するだけですみます。例は[[#Examples|下記]]をご覧ください。ページテンプレートを作成し、テーマディレクトリに保存すると、固定ページを新規作成もしくは編集の際に、選択肢の1つとして現れます。('''注意''':上記方法によって、少なくとも1つ以上のページテンプレートが存在しない限り、固定ページの作成・編集時にページテンプレート選択のオプションは表示されません。)
 
冒頭に記述する上記の5行のコードの後に何を記述するかはあなた次第です。記述したコードの内容により、Snarfer 固定ページテンプレートを使う固定ページがどのように表示されるかコントロールされます。この目的に使用できる WordPress テンプレート関数の詳細は[[Template Tags|テンプレートタグ]]をご覧ください。場合によっては、他のテンプレートファイル(''page.php'' や ''index.php'' など)をコピーし、''snarfer.php'' とリネームし、上記5行のコードをファイルの冒頭に記述する方が作りやすいでしょう。全てをスクラッチから(イチから)作るよりも、HTML と PHP コードを''変更''するだけですみます。例は[[#Examples|下記]]をご覧ください。ページテンプレートを作成し、テーマディレクトリに保存すると、固定ページを新規作成もしくは編集の際に、選択肢の1つとして現れます。('''注意''':上記方法によって、少なくとも1つ以上のページテンプレートが存在しない限り、固定ページの作成・編集時にページテンプレート選択のオプションは表示されません。)
  
 +
<div id="Query-based Template Files">
 
==== クエリベースのテンプレート ====
 
==== クエリベースのテンプレート ====
 
+
</div>
 
+
 
WordPress では、各''クエリ'' (要求) タイプによって異なる[[テンプレート入門|テンプレート]]をロードできます。これには二つの方法があります。内蔵の [[テンプレート階層]]の一環とするものと、テンプレートファイルの[[The Loop|ループ]]内で[[Conditional Tags|条件タグ]]を用いる方法です。
 
WordPress では、各''クエリ'' (要求) タイプによって異なる[[テンプレート入門|テンプレート]]をロードできます。これには二つの方法があります。内蔵の [[テンプレート階層]]の一環とするものと、テンプレートファイルの[[The Loop|ループ]]内で[[Conditional Tags|条件タグ]]を用いる方法です。
  
239行目: 249行目:
 
どちらのコードの例も、表示しようとしている投稿のカテゴリーに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。使える全ての種類の条件については、[[Conditional Tags|条件タグ]]のページをご覧ください。
 
どちらのコードの例も、表示しようとしている投稿のカテゴリーに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。使える全ての種類の条件については、[[Conditional Tags|条件タグ]]のページをご覧ください。
  
 +
<div id="Defining Custom Templates">
 
====カスタムテンプレートの定義====
 
====カスタムテンプレートの定義====
 
+
</div>
 
WordPress プラグインを使って、カスタム基準に応じるカスタムテンプレートを追加定義することもできます。この上級者向け機能を使うには、<code>template_redirect</code> という[[プラグイン API#Current Hooks For Actions|アクションフック]]を利用します。プラグインの作成についてより詳しくは[[プラグイン API|プラグイン API]] のページを参照してください。
 
WordPress プラグインを使って、カスタム基準に応じるカスタムテンプレートを追加定義することもできます。この上級者向け機能を使うには、<code>template_redirect</code> という[[プラグイン API#Current Hooks For Actions|アクションフック]]を利用します。プラグインの作成についてより詳しくは[[プラグイン API|プラグイン API]] のページを参照してください。
  
 +
<div id="Including Template Files">
 
==== テンプレートファイルのインクルード ====
 
==== テンプレートファイルのインクルード ====
 
+
</div>
 
(ヘッダー、サイドバー、フッターなど、<tt>[[関数リファレンス/get_header|get_header()]]</tt>といった定義済み関数が存在しない)その他のテンプレートファイルをテンプレートにロードするには、<tt>[[関数リファレンス/get_template_part|get_template_part()]]</tt> が使用できます。これにより、テーマ内のコードをセクション単位で簡単に再利用することができます。
 
(ヘッダー、サイドバー、フッターなど、<tt>[[関数リファレンス/get_header|get_header()]]</tt>といった定義済み関数が存在しない)その他のテンプレートファイルをテンプレートにロードするには、<tt>[[関数リファレンス/get_template_part|get_template_part()]]</tt> が使用できます。これにより、テーマ内のコードをセクション単位で簡単に再利用することができます。
  
 +
<div id="Referencing Files From a Template">
 
==== テンプレートからファイルを参照 ====
 
==== テンプレートからファイルを参照 ====
 
+
</div>
 
テーマ内に存在するその他のファイルを参照する場合、URIやファイルパスをハードコードする(直書きする)のは避け、<tt>[[テンプレートタグ/bloginfo|bloginfo()]]</tt> を使って参照します。<!--注:原文に次のようにあるが、Referencing Files From a Templateはこのテンプレートからファイルを参照の項。間違い? 詳しくは [[Theme_Development#Referencing_Files_From_a_Template|Referencing Files From a Template]] をご覧ください。-->
 
テーマ内に存在するその他のファイルを参照する場合、URIやファイルパスをハードコードする(直書きする)のは避け、<tt>[[テンプレートタグ/bloginfo|bloginfo()]]</tt> を使って参照します。<!--注:原文に次のようにあるが、Referencing Files From a Templateはこのテンプレートからファイルを参照の項。間違い? 詳しくは [[Theme_Development#Referencing_Files_From_a_Template|Referencing Files From a Template]] をご覧ください。-->
  
259行目: 272行目:
 
</pre>
 
</pre>
  
 +
<div id="Plugin API Hooks">
 
==== プラグイン API フック ====
 
==== プラグイン API フック ====
 
+
</div>
 
テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、''アクションフック''を通して WordPress に機能を追加します。 (詳しくは[[Plugin API|プラグイン API]] を参照してください)
 
テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、''アクションフック''を通して WordPress に機能を追加します。 (詳しくは[[Plugin API|プラグイン API]] を参照してください)
  
283行目: 297行目:
 
実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。
 
実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。
  
 +
<div id="Theme Customization API">
 
==== テーマカスタマイズ API ====
 
==== テーマカスタマイズ API ====
 
+
</div>
 
WordPress 3.4 から、新しいテーマカスタマイズ管理画面機能 (テーマカスタマイザー) がデフォルトで追加され、ほぼ全ての WordPress テーマで利用可能です。管理画面のテーマカスタマイザーページには、[[関数リファレンス/add_theme_support|add_theme_support()]] もしくは Settings API を用いてテーマ内で定義が必要な機能は自動的に集約され、リアルタイムでプレビューできます。
 
WordPress 3.4 から、新しいテーマカスタマイズ管理画面機能 (テーマカスタマイザー) がデフォルトで追加され、ほぼ全ての WordPress テーマで利用可能です。管理画面のテーマカスタマイザーページには、[[関数リファレンス/add_theme_support|add_theme_support()]] もしくは Settings API を用いてテーマ内で定義が必要な機能は自動的に集約され、リアルタイムでプレビューできます。
  
290行目: 305行目:
 
新規オプション設定項目を、テーマカスタマイザーのページに追加したいテーマ開発者やプラグイン開発者は、 [[Theme_Customization_API|テーマカスタマイズ API]] を参照してください。テーマカスタマイズ API に関するチュートリアルは、 [http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/ Ottopress.com のウェブサイト]も参照してください。
 
新規オプション設定項目を、テーマカスタマイザーのページに追加したいテーマ開発者やプラグイン開発者は、 [[Theme_Customization_API|テーマカスタマイズ API]] を参照してください。テーマカスタマイズ API に関するチュートリアルは、 [http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/ Ottopress.com のウェブサイト]も参照してください。
  
 +
<div id="Untrusted Data">
 
==== 信頼できないデータ ====
 
==== 信頼できないデータ ====
 
+
</div>
 
テーマ内で動的に生成されたコンテンツ、特に HTML 属性を含むコンテンツは、エスケープする必要があります。[[WordPress_Coding_Standards|WordPress コーディング基準]] でも書かれている通り、HTML 属性に挿入されるテキストは、シングルクォートやダブルクォートが属性の値を終了し、invalid な XHTML やセキュリティーの問題を起こさないようにする為、 <tt>[[関数リファレンス/esc_attr|esc_attr()]]</tt> を通す必要があります。一般的には <tt>title</tt>、<tt>alt</tt>、<tt>value</tt> 属性をチェックしましょう。
 
テーマ内で動的に生成されたコンテンツ、特に HTML 属性を含むコンテンツは、エスケープする必要があります。[[WordPress_Coding_Standards|WordPress コーディング基準]] でも書かれている通り、HTML 属性に挿入されるテキストは、シングルクォートやダブルクォートが属性の値を終了し、invalid な XHTML やセキュリティーの問題を起こさないようにする為、 <tt>[[関数リファレンス/esc_attr|esc_attr()]]</tt> を通す必要があります。一般的には <tt>title</tt>、<tt>alt</tt>、<tt>value</tt> 属性をチェックしましょう。
  
301行目: 317行目:
 
[[関数リファレンス/esc_html|<tt>esc_html()</tt>]]/[[:en:Function_Reference/esc_html|en]]に。[[関数リファレンス/clean_url|<tt>clean_url()</tt>]]/[[:en:Function_Reference/clean_url|en]] は [[関数リファレンス/esc_url|<tt>esc_url()</tt>]]/[[:en:Function_Reference/esc_url|en]]に。[[関数リファレンス/attribute_escape|<tt>attribute_escape()</tt>]]/[[:en:Function_Reference/attribute_escape|en]] は [[Function_Reference/esc_attr|<tt>esc_attr()</tt>]]/[[:en:Function_Reference/esc_attr|en]]に。さらに詳しくは [[Data_Validation#.E5.B1.9E.E6.80.A7.E5.80.A4|データ検証]] を参照してください。
 
[[関数リファレンス/esc_html|<tt>esc_html()</tt>]]/[[:en:Function_Reference/esc_html|en]]に。[[関数リファレンス/clean_url|<tt>clean_url()</tt>]]/[[:en:Function_Reference/clean_url|en]] は [[関数リファレンス/esc_url|<tt>esc_url()</tt>]]/[[:en:Function_Reference/esc_url|en]]に。[[関数リファレンス/attribute_escape|<tt>attribute_escape()</tt>]]/[[:en:Function_Reference/attribute_escape|en]] は [[Function_Reference/esc_attr|<tt>esc_attr()</tt>]]/[[:en:Function_Reference/esc_attr|en]]に。さらに詳しくは [[Data_Validation#.E5.B1.9E.E6.80.A7.E5.80.A4|データ検証]] を参照してください。
  
 +
<div id="Translation Support / I18n">
 
==== 翻訳対応 / 国際化 (I18n)  ====
 
==== 翻訳対応 / 国際化 (I18n)  ====
 
+
</div>
 
言語ローカライゼーションを
 
言語ローカライゼーションを
 
スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能テキストを WordPress の gettext ベースの [[I18n for WordPress Developers|i18n]] 関数で囲みましょう。
 
スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能テキストを WordPress の gettext ベースの [[I18n for WordPress Developers|i18n]] 関数で囲みましょう。
308行目: 325行目:
 
これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストに「引っ掛ける」ことができ、翻訳しやすくなります。[[WordPress Localization]]/[[:en:WordPress Localization|en]] と [[I18n for WordPress Developers]] を参照してください。
 
これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストに「引っ掛ける」ことができ、翻訳しやすくなります。[[WordPress Localization]]/[[:en:WordPress Localization|en]] と [[I18n for WordPress Developers]] を参照してください。
  
 +
<div id="Theme Classes">
 
==== テーマのクラス要素 ====
 
==== テーマのクラス要素 ====
 
+
</div>
 
body、post、comment に、WordPress によって生成されたクラス属性を付与するには、以下のテンプレートタグを組み入れます。記事用のクラス属性は[[The Loop|ループ]]内の要素のみに対して付与します。
 
body、post、comment に、WordPress によって生成されたクラス属性を付与するには、以下のテンプレートタグを組み入れます。記事用のクラス属性は[[The Loop|ループ]]内の要素のみに対して付与します。
  
316行目: 334行目:
 
* [[Function_Reference/comment_class|comment_class()]] /[[:en:Function_Reference/comment_class|en]]
 
* [[Function_Reference/comment_class|comment_class()]] /[[:en:Function_Reference/comment_class|en]]
  
 +
<div id="Template File Checklist">
 
=== テンプレートファイルのチェックリスト ===
 
=== テンプレートファイルのチェックリスト ===
 
+
</div>
 
テーマを作る時、テンプレートファイルを以下のテンプレートファイル基準に照らし合わせてチェックしてください。
 
テーマを作る時、テンプレートファイルを以下のテンプレートファイル基準に照らし合わせてチェックしてください。
  
 +
<div id="Document Head (header.php)">
 
==== Document Head (header.php) ====
 
==== Document Head (header.php) ====
 
+
</div>
 
* 適切な [http://en.wikipedia.org/wiki/Document_Type_Declaration DOCTYPE] を使う。
 
* 適切な [http://en.wikipedia.org/wiki/Document_Type_Declaration DOCTYPE] を使う。
 
* <tt><html></tt> タグには [[テンプレートタグ/language_attributes|<tt>language_attributes()</tt>]] を含める。
 
* <tt><html></tt> タグには [[テンプレートタグ/language_attributes|<tt>language_attributes()</tt>]] を含める。
348行目: 368行目:
 
</pre>
 
</pre>
  
 +
<div id="Navigation Menus (header.php)">
 
==== ナビゲーションメニュー (''header.php'') ====
 
==== ナビゲーションメニュー (''header.php'') ====
 
+
</div>
 
* テーマのメインナビゲーションは [[関数リファレンス/wp_nav_menu|<tt>wp_nav_menu()</tt>]] を使うカスタムメニューに対応しましょう。
 
* テーマのメインナビゲーションは [[関数リファレンス/wp_nav_menu|<tt>wp_nav_menu()</tt>]] を使うカスタムメニューに対応しましょう。
 
** メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
 
** メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
 
** サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルをサポートしてください。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。
 
** サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルをサポートしてください。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。
  
 +
<div id="Widgets (sidebar.php)">
 
==== ウィジェット (''sidebar.php'') ====
 
==== ウィジェット (''sidebar.php'') ====
 
+
</div>
 
* テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
 
* テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
 
* 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
 
* 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
  
 +
<div id="Footer (footer.php)">
 
==== フッター (''footer.php'') ====
 
==== フッター (''footer.php'') ====
 
+
</div>
 
* [[テンプレートタグ/wp_footer|<tt>wp_footer()</tt>]] を、<tt>body</tt> の閉じタグ直前に挿入する。
 
* [[テンプレートタグ/wp_footer|<tt>wp_footer()</tt>]] を、<tt>body</tt> の閉じタグ直前に挿入する。
  
369行目: 392行目:
 
</pre>
 
</pre>
  
 +
<div id="Index (index.php)">
 
==== インデックス (''index.php'') ====
 
==== インデックス (''index.php'') ====
 
+
</div>
 
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
  
 +
<div id="Archive (archive.php)">
 
==== アーカイブ (''archive.php'') ====
 
==== アーカイブ (''archive.php'') ====
 
+
</div>
 
* アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
 
* アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
 
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
  
 +
<div id="Pages (page.php)">
 
==== 固定ページ (''page.php'') ====
 
==== 固定ページ (''page.php'') ====
 
+
</div>
 
* 固定ページのタイトルと本文を表示する。
 
* 固定ページのタイトルと本文を表示する。
 
* コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
 
* コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
388行目: 414行目:
 
* 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
 
* 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
  
 +
<div id="Single Post (single.php)">
 
==== 個別投稿表示 (''single.php'') ====
 
==== 個別投稿表示 (''single.php'') ====
 
+
</div>
 
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 
* 投稿のタイトルと本文を表示する。
 
* 投稿のタイトルと本文を表示する。
402行目: 429行目:
 
* [[テンプレートタグ/previous_post_link|<tt>previous_post_link()</tt>]] と [[テンプレートタグ/next_post_link|<tt>next_post_link()</tt>]] を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。
 
* [[テンプレートタグ/previous_post_link|<tt>previous_post_link()</tt>]] と [[テンプレートタグ/next_post_link|<tt>next_post_link()</tt>]] を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。
  
 +
<div id="Comments (comments.php)">
 
==== コメント (''comments.php'') ====
 
==== コメント (''comments.php'') ====
 
+
</div>
 
* (投稿の)作成者によるコメントは、他のコメントと識別できるよう (違うハイライトするなど) にする。
 
* (投稿の)作成者によるコメントは、他のコメントと識別できるよう (違うハイライトするなど) にする。
 
* 適切であれば Gravatar (グラバター。ユーザーのアバター) を表示する。 (訳注:Gravatar について詳しくは [[Gravatar_の使い方|Gravatar の使い方]]を参照)
 
* 適切であれば Gravatar (グラバター。ユーザーのアバター) を表示する。 (訳注:Gravatar について詳しくは [[Gravatar_の使い方|Gravatar の使い方]]を参照)
410行目: 438行目:
 
* [http://php.net/manual/en/function.function-exists.php <tt>function_exist()</tt>] を用いた再宣言エラーを回避するチェックを除き、このファイルには関数定義を含めないようにする。理想的には全ての関数は ''functions.php'' にあるべき。
 
* [http://php.net/manual/en/function.function-exists.php <tt>function_exist()</tt>] を用いた再宣言エラーを回避するチェックを除き、このファイルには関数定義を含めないようにする。理想的には全ての関数は ''functions.php'' にあるべき。
  
 +
<div id="Search Results (search.php)">
 
==== 検索結果表示 (''search.php'') ====
 
==== 検索結果表示 (''search.php'') ====
 
+
</div>
 
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 
* 検索結果表示ページには検索された語句を表示する。シンプルだが検索内容を知らせるには有効な手段。特に検索結果が0件の場合に便利。[[テンプレートタグ/the_search_query|<tt>the_search_query()</tt>]] を使って表示するか、もしくは [[Function_Reference/get_search_query|<tt>get_search_query()</tt>]] /[[:en:Function_Reference/get_search_query|en]] を使って戻り値を取得する。例:
 
* 検索結果表示ページには検索された語句を表示する。シンプルだが検索内容を知らせるには有効な手段。特に検索結果が0件の場合に便利。[[テンプレートタグ/the_search_query|<tt>the_search_query()</tt>]] を使って表示するか、もしくは [[Function_Reference/get_search_query|<tt>get_search_query()</tt>]] /[[:en:Function_Reference/get_search_query|en]] を使って戻り値を取得する。例:
417行目: 446行目:
 
* 検索結果ページにも検索フォームを含めるのがよい。インクルードするには [[関数リファレンス/get_search_form|<tt>get_search_form()</tt>]] を使う。
 
* 検索結果ページにも検索フォームを含めるのがよい。インクルードするには [[関数リファレンス/get_search_form|<tt>get_search_form()</tt>]] を使う。
  
 +
<div id="JavaScript">
 
=== JavaScript ===
 
=== JavaScript ===
 
+
</div>
 
* JavaScript コードはできる限り外部ファイルに記述する。
 
* JavaScript コードはできる限り外部ファイルに記述する。
 
* スクリプトをロードするには [[Function_Reference/wp_enqueue_script|<tt>wp_enqueue_script()</tt>]] /[[:en:Function_Reference/wp_enqueue_script|en]] を使う。
 
* スクリプトをロードするには [[Function_Reference/wp_enqueue_script|<tt>wp_enqueue_script()</tt>]] /[[:en:Function_Reference/wp_enqueue_script|en]] を使う。
430行目: 460行目:
 
</pre>
 
</pre>
  
 +
<div id="Screenshot">
 
=== Screenshot ===
 
=== Screenshot ===
 
+
</div>
 
テーマのスクリーンショットを作ります。ファイル名は ''screenshot.png'' と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 600x450。実際には 300x225 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。
 
テーマのスクリーンショットを作ります。ファイル名は ''screenshot.png'' と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 600x450。実際には 300x225 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。
  
 +
<div id="Theme Options">
 
=== テーマ設定 ===
 
=== テーマ設定 ===
 +
</div>
 
テーマは [[Appearance Theme Options Screen|テーマ設定画面]] /[[:en:Appearance Theme Options Screen|en]] を実装することも可能です。コードの例は [http://themeshaper.com/sample-theme-options/ A Sample WordPress Theme Options Page] を参照してください。
 
テーマは [[Appearance Theme Options Screen|テーマ設定画面]] /[[:en:Appearance Theme Options Screen|en]] を実装することも可能です。コードの例は [http://themeshaper.com/sample-theme-options/ A Sample WordPress Theme Options Page] を参照してください。
  
441行目: 474行目:
 
[[Version 3.0|バージョン 3.0]] より、WordPress [[Glossary#Multisite|マルチサイト]] の場合、デフォルトでは管理者権限グループが "edit_themes" 権限を有していない設定に変更されました。テーマ内で"edit_themes" 権限を使って管理者のアクセス権限を設定している場合は注意してください。[http://wordpress.org/support/topic/capability-manage_options-vs-edit_themes#post-1566844 詳しい説明はこちら]。この様なケースにおいて、管理者にテーマ設定メニューを表示するには "edit_theme_options" 権限を使います。WordPress のマルチサイト機能を使う場合は、管理者権限グループの [[Roles and Capabilities#Additional_Admin_Capabilities|additional capabilities]] を参照ください。
 
[[Version 3.0|バージョン 3.0]] より、WordPress [[Glossary#Multisite|マルチサイト]] の場合、デフォルトでは管理者権限グループが "edit_themes" 権限を有していない設定に変更されました。テーマ内で"edit_themes" 権限を使って管理者のアクセス権限を設定している場合は注意してください。[http://wordpress.org/support/topic/capability-manage_options-vs-edit_themes#post-1566844 詳しい説明はこちら]。この様なケースにおいて、管理者にテーマ設定メニューを表示するには "edit_theme_options" 権限を使います。WordPress のマルチサイト機能を使う場合は、管理者権限グループの [[Roles and Capabilities#Additional_Admin_Capabilities|additional capabilities]] を参照ください。
  
 +
<div id="Theme Testing Process">
 
== テーマのテスト過程 ==
 
== テーマのテスト過程 ==
 
+
</div>
 
# PHP と WordPress エラーを修正する。非推奨関数の呼び出しや、WordPress 関連のエラーを確認する為に次のデバッグ設定を <tt>wp-config.php</tt> に追加してください: <tt>define('WP_DEBUG', true);</tt>。詳しくは [[WordPress_Deprecated_Functions_Hook|非推奨関数フック]] /[[:en:WordPress_Deprecated_Functions_Hook|en]] も参照してください
 
# PHP と WordPress エラーを修正する。非推奨関数の呼び出しや、WordPress 関連のエラーを確認する為に次のデバッグ設定を <tt>wp-config.php</tt> に追加してください: <tt>define('WP_DEBUG', true);</tt>。詳しくは [[WordPress_Deprecated_Functions_Hook|非推奨関数フック]] /[[:en:WordPress_Deprecated_Functions_Hook|en]] も参照してください
 
# [[Theme_Development#.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88|テンプレートファイルのチェックリスト]] に照らし合わせてテンプレートファイルをチェックする(上記参照)。
 
# [[Theme_Development#.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88|テンプレートファイルのチェックリスト]] に照らし合わせてテンプレートファイルをチェックする(上記参照)。
452行目: 486行目:
 
# テーマディレクトリにテーマを登録して公開する場合は、[[Theme Review|テーマレビュー]] を確認する。
 
# テーマディレクトリにテーマを登録して公開する場合は、[[Theme Review|テーマレビュー]] を確認する。
  
 +
<div id="Resources and References">
 
== 参考資料 ==
 
== 参考資料 ==
 
+
</div>
 +
<div id="Code Standards">
 
=== コーディング基準 ===  
 
=== コーディング基準 ===  
 +
</div>
 
* [[Know Your Sources]] /[[:en:Know Your Sources|en]]
 
* [[Know Your Sources]] /[[:en:Know Your Sources|en]]
 
* [[WordPress Coding Standards|WordPress コーディング基準]]
 
* [[WordPress Coding Standards|WordPress コーディング基準]]
 
* [[CSS Coding Standards]] /[[:en:CSS Coding Standards|en]]
 
* [[CSS Coding Standards]] /[[:en:CSS Coding Standards|en]]
  
 +
<div id="Theme Design">
 
=== テーマデザイン ===
 
=== テーマデザイン ===
 +
</div>
 
* [[Site Design and Layout|WordPress サイトデザインリファレンス]]
 
* [[Site Design and Layout|WordPress サイトデザインリファレンス]]
  
 +
<div id="CSS">
 
=== CSS ===
 
=== CSS ===
 +
</div>
 
* [[CSS]]
 
* [[CSS]]
 
* [[CSS Shorthand]] /[[:en:CSS Shorthand|en]]
 
* [[CSS Shorthand]] /[[:en:CSS Shorthand|en]]
 
* [[CSS#WordPress_.E3.81.8C.E7.94.9F.E6.88.90.E3.81.99.E3.82.8B.E3.82.AF.E3.83.A9.E3.82.B9|WordPress が生成するクラス]]
 
* [[CSS#WordPress_.E3.81.8C.E7.94.9F.E6.88.90.E3.81.99.E3.82.8B.E3.82.AF.E3.83.A9.E3.82.B9|WordPress が生成するクラス]]
  
 +
<div id="Templates">
 
=== テンプレート ===
 
=== テンプレート ===
 +
</div>
 
* [[Stepping Into Templates|テンプレート入門]]
 
* [[Stepping Into Templates|テンプレート入門]]
 
* [[Templates|テンプレート]]
 
* [[Templates|テンプレート]]
478行目: 521行目:
 
* [[Data Validation|データ検証]]
 
* [[Data Validation|データ検証]]
  
 +
<div id="Functions listing">
 
=== 関数リスト ===
 
=== 関数リスト ===
 +
</div>
 
* [[Function Reference|関数リファレンス]]
 
* [[Function Reference|関数リファレンス]]
  
 +
<div id="Testing and QA">
 
=== テストと QA ===
 
=== テストと QA ===
 +
</div>
 
* [[Theme Unit Test]]
 
* [[Theme Unit Test]]
 
* [[Validating a Website]] /[[:en:Validating a Website|en]]
 
* [[Validating a Website]] /[[:en:Validating a Website|en]]
488行目: 535行目:
 
* [http://modern.ie/ modern.IE: for testing IE on different platforms with open-source tools]
 
* [http://modern.ie/ modern.IE: for testing IE on different platforms with open-source tools]
  
 +
<div id="Release & Promotion">
 
=== リリース & プロモーション ===
 
=== リリース & プロモーション ===
 +
</div>
 
* [[Theme Review|テーマレビューのプロセス]]
 
* [[Theme Review|テーマレビューのプロセス]]
  
495行目: 544行目:
 
[[Category:UI Link]]
 
[[Category:UI Link]]
  
 +
<div id="External Resources & Tutorials">
 
=== 外部参考資料 & チュートリアル ===
 
=== 外部参考資料 & チュートリアル ===
 +
</div>
 
* [http://www.chipbennett.net/2011/02/17/incorporating-the-settings-api-in-wordpress-themes/ Incorporating the Settings API in WordPress Themes]
 
* [http://www.chipbennett.net/2011/02/17/incorporating-the-settings-api-in-wordpress-themes/ Incorporating the Settings API in WordPress Themes]
 
* [http://theme.fm/2011/08/providing-typography-options-in-your-wordpress-themes-1576/ Providing Typography Options in Your WordPress Themes]
 
* [http://theme.fm/2011/08/providing-typography-options-in-your-wordpress-themes-1576/ Providing Typography Options in Your WordPress Themes]

2013年9月29日 (日) 10:52時点における版

このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、テーマの使い方をおさらいしましょう。テーマの使い方ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。

目次

なぜ、WordPress テーマを作るの?

WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。

自分で使う為や、クライアントに納める為、WordPress テーマの公式レポジトリに登録する為などには独自テーマを作ることもできます。他にはどの様な理由があるでしょうか?

WordPress テーマにはたくさんの利点もあります。

  • スタイルとテンプレートファイルをシステムファイル (WordPress コア) から分離し、サイトの外観に大きな影響を及ぼすことなくアップグレードできるようになる。
  • カスタマイズすることにより、サイトに独自の機能性を持たせることができる。
  • サイトの外観(見た目とレイアウト)を素早く変更できる。
  • ユーザーが CSS、HTML、PHPを知らなくてもかっこいいサイトを持てる。

なぜ独自テーマを作るべきなのか、考えてみましょう。

  • CSS、HTML、PHP についてもっと良く知る良い機会だから。
  • CSS、HTML、PHP についての知識を実際に使ってみる良い機会だから。
  • クリエイティブな作業だから。
  • (たいていの場合は) 楽しいから。
  • 公開テーマを作成すれば、WordPress コミュニティと何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。

テーマの開発基準

</dvi> WordPress テーマは以下の基準に則ってコーディングする必要があります。

テーマの構造

WordPress テーマは、WordPress の themes ディレクトリ (デフォルトでは wp-content/themes/) の中のサブディレクトリに存在します。themes ディレクトリの場所は wp-config.phpを使って移動することはできません/en)。サブディレクトリ (テーマフォルダ) には、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、JavaScript ファイル画像といったものが含まれています。例えば、「test」というテーマは、wp-content/themes/test/ ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面の利用可能なテーマ一覧に表示されないので避けましょう。

新しくインストールされた WordPress にはデフォルトテーマが同梱されています。デフォルトテーマのファイルを詳しく見ることで、独自テーマファイルを作成する方法をよりよく理解することができます。

図解付きの説明は WordPress Theme Anatomy のインフォグラフィックをご覧ください。

WordPress テーマは、画像ファイルと JavaScript ファイルを除くと、大きく分けて次の3種類のファイルから構成されています。

  1. スタイルシート (style.css) は、ウェブページの外観(見た目とレイアウト)を制御します。
  2. WordPress テンプレートファイルは、ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御します。
  3. オプションの関数が含まれている、テーマ関数ファイル (functions.php)。

では、個別に見ていきましょう。

子テーマ

最も単純なテーマは style.css ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。

さらに詳しくは子テーマのページをご覧ください。

<div="Theme Stylesheet">

テーマスタイルシート

</dvi> style.css は、テーマの「CSS スタイル」情報に加えて、コメントの形式で必ず「テーマ詳細」を記述する必要があります。管理パネルのテーマ設定ダイアログで問題が生じるので、同じ詳細内容が別のテーマのコメントヘッダ/en にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。

次の例は、テーマ「Twenty Ten」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

テーマ作者名 (Author) には、wordpress.org のユーザー名を使うことを推奨しますが、作者の本名でもかまいません。作者名は作者が自由に選ぶことができます。

テーマの特徴をタグ (Tags) として指定することにより、管理画面の「テーマのインストール」にて、特徴フィルターを使った検索に反映されます。使用可能なタグのリストはこちらをご覧ください。

style.css のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「管理パネル > 外観 > テーマ」画面に表示させるために必要なものです。

スタイルシートガイドライン

  • CSS を記述する際には CSS コーディング基準に従う。
  • 可能であれば valid なCSSを使う。ただし、ベンダープレフィックスを使って CSS3 を活用する場合は除く。
  • CSS ハックは最小限にとどめる。明らかな例外としては特定のブラウザへのサポート(大抵の場合は特定のバージョンの IE)。可能であれば CSS ハックは別セクション、もしくは別ファイルに分ける。
  • 投稿/固定ページ本文とコメント本文において、使われる可能性のある全てのHTML要素のスタイルを、テーマ内で指定する。
    • テーブル、キャプション、画像、リスト、引用、など。
  • 印刷に適したスタイルの追加を高く推奨する。
    • 印刷用のスタイルシートを media="print" と指定してインクルード、もしくはメインのスタイルシート内に記述する。

テーマ関数ファイル

テーマでは、オプションとして、テーマのサブディレクトリ内に functions.php というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理パネルとサイト表示の両方で)。このファイルの使用例:

WordPress のデフォルトテーマには、functions.php ファイルが入っており、これら機能の多くを定義しているので見本にするといいでしょう。functions.php は基本的にプラグインのように動作するので、このファイルでできることの情報は、プラグインの作成リストを見るのが一番です。

関数を functions.php に定義するのか、プラグインに定義するのか、に関して: 同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数はfunctions.phpではなく、プラグイン内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。

テーマテンプレートファイル

テンプレートは、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして WordPress テンプレートタグで構成されています。


それでは、テーマの部品として定義できる様々なテンプレートを見てみましょう。


WordPress では、サイトの各種の表示を個別のテンプレートとして定義できるようになっていますが、サイト全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、テンプレート階層に基づいて選ばれ、生成されます。

テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する全てのページ用のテンプレートとして、index.php というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。

テンプレートファイル一覧

WordPress が認識するテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが WordPress にとって特別な意味を持つことは覚えておいてください。追加情報はテンプレート階層をご覧ください。

style.css
メインのスタイルシート。テーマにはこのファイルが必須で、テーマのヘッダ情報を含まなければなりません。
rtl.css
RTL スタイルシート。ウェブサイトのテキスト方向が右から左の場合、このファイルが自動的に適用されます。RTL スタイルシートは the RTLer プラグインを使って生成することもできます。
index.php
メインテンプレート。(親テーマのテンプレートを利用するのではなく) このテーマ自身のテンプレートを設けるなら index.php は必須。
comments.php
コメントテンプレート。
front-page.php
フロントページテンプレート。固定ページを静的フロントページとして使用する場合にのみ使われる。
home.php
ホームページテンプレート。フロントページの表示(にデフォルトとして設定されている最新の投稿)に使われる。固定ページをフロントページとして設定した場合、投稿ページを表示するテンプレートとして用いられる。
single.php
個別投稿テンプレート。ひとつの投稿が要求 (クエリ) されたときに使用。このクエリテンプレートが存在しないときは index.php が使われる。この他のクエリテンプレートも同様。
single-<post-type>.php
カスタム投稿タイプの個別投稿が要求 (クエリ) されたときに使われるテンプレート。例えば books というカスタム投稿タイプを個別表示するためには single-books.php が使われる。
page.php
固定ページテンプレート。特定の固定ページが要求されたときに使用。
category.php
カテゴリテンプレート。あるカテゴリが要求されたときに使用。
tag.php
タグテンプレート/en。タグが要求されたときに使用。
taxonomy.php
タクソノミーテンプレート/enカスタム分類内の個別項目が要求されたときに使用。
author.php
作成者テンプレート/en。作成者が要求されたときに使用。
date.php
日付別テンプレート。ある日付または時刻が要求されたときに使用。年、月、日、時、分、秒。
archive.php
アーカイブテンプレート。あるカテゴリ、作成者、日付が要求されたときに使用。各クエリの種類に対応する category.phpauthor.phpdate.php がそれぞれ存在する場合は、そのクエリに対してアーカイブテンプレートは無効となる。
search.php
検索結果テンプレート。ある検索が実行されたときに使用。
attachment.php
添付ファイルテンプレート。特定の添付ファイルを個別表示するときに使用。
image.php
添付画像ファイルテンプレート。特定の添付画像ファイルを個別表示するときに使用。存在しない場合は attachment.php が使用される。
404.php
404 Not Found テンプレート。WordPress が要求に合う投稿やページを見つけられなかったときに使用。

これらのファイルは、テンプレート階層に従って適用できるファイルがあるときや、対応する条件タグが true を返すとき、index.php に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に is_single() 関数は 'true' を返し、有効になっているテーマ内に single.php ファイルがあれば、ページの生成にはこのテンプレートが使われます。

基本的なテンプレート

WordPress テーマは、最小で2ファイルから構成される。

  • style.css
  • index.php

両ファイルはそのテーマのディレクトリ内に置きます。index.php テンプレートファイルはとても融通が利きます。これは、参照するヘッダー・サイドバー・フッター・コンテンツ・カテゴリー・アーカイブ・検索結果・エラーほか、サイト上で生成されるウェブページの全てに用いることができます。

もしくは、モジュール式のテンプレートファイルとして分割することもできます。別のテンプレートファイルを用意しなかった場合、WordPress は内蔵のデフォルトファイルか、デフォルト関数を用いることもあります。例えば、searchform.php テンプレートファイルがないとき、WordPress はデフォルト関数を使って検索フォームを表示します。

代表的なテンプレートファイルは次のとおりです。

  • comments.php
  • comments-popup.php
  • footer.php
  • header.php
  • sidebar.php

index.php ファイル内にテンプレートタグを使うことにより、最終的に生成するウェブページ内にこれら(モジュール)テンプレートファイルを含めることができます。

include の使用例:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

テンプレート関数の中には、その関数のデフォルトファイルが非推奨、もしくは存在しない場合があります。その場合はこれら(テンプレート)ファイルをテーマに同梱しなければいけません。バージョン 3.0 の時点では非推奨となったデフォルトファイルは wp-includes/theme-compat にあります。例えば、 get_header() が安全に動作する為には header.php を、 comments_template() の為には comments.php を同梱しましょう。

各種テンプレートの動作や異なる情報を表示する方法については、テンプレートファイルの項をご覧ください。

カスタム固定ページテンプレート

固定ページのテンプレートファイルはテーマディレクトリの中にあります。固定ページの為の新規のカスタム固定ページテンプレートを作成するには、新しくファイルを作る必要があります。例えば、snarfer.php という固定ページの為の固定ページテンプレートを作るとします。snarfer.php ファイルの冒頭に以下のコードを記述します。

<?php
/*
Template Name: Snarfer
*/
?>

上記コードによって snarfer.php が "Snarfer" テンプレートとして定義されます。"Snarfer" を変更することで、固定ページテンプレート名 (Template Name) を変更することができます。このテンプレート名は、管理画面のテーマの編集ページのテンプレート一覧に表示されます。

カスタム固定ページテンプレートのファイル名は、.php の拡張子がついていれば何でもかまいません。(但し、WordPress 内部で予約されている特別なファイル名は除く。使用できないファイル名のリストはreserved Theme filenamesを参照)

冒頭に記述する上記の5行のコードの後に何を記述するかはあなた次第です。記述したコードの内容により、Snarfer 固定ページテンプレートを使う固定ページがどのように表示されるかコントロールされます。この目的に使用できる WordPress テンプレート関数の詳細はテンプレートタグをご覧ください。場合によっては、他のテンプレートファイル(page.phpindex.php など)をコピーし、snarfer.php とリネームし、上記5行のコードをファイルの冒頭に記述する方が作りやすいでしょう。全てをスクラッチから(イチから)作るよりも、HTML と PHP コードを変更するだけですみます。例は下記をご覧ください。ページテンプレートを作成し、テーマディレクトリに保存すると、固定ページを新規作成もしくは編集の際に、選択肢の1つとして現れます。(注意:上記方法によって、少なくとも1つ以上のページテンプレートが存在しない限り、固定ページの作成・編集時にページテンプレート選択のオプションは表示されません。)

クエリベースのテンプレート

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になります)。この詳細は、ーテンプレートをご覧ください。

テンプレート階層よりもさらにテンプレートファイルの制御が必要な場合、条件タグが使えます。条件タグは通常、ある特定の条件に当てはまるかを WordPress ループ内でチェックし、その条件に基づいて特定のテンプレートを読み込んだり画面にテキストを配置したりします。

例えば、ある特定のカテゴリに属する投稿にのみ独自のスタイルを生成するには、次のようなコードになります (訳注: 一つ目の例は、原文で is_category(9) となっているが、個別投稿表示時であれば in_category() を使う)。

<?php
if ( is_category( '9' ) ) {
    get_template_part( 'single2' ); // カテゴリー ID 9 に当てはまるとき
} else {
    get_template_part( 'single1' ); // 当てはまらないカテゴリの投稿のとき
}
?>

あるいは、クエリを用いた場合、次のようにもなります。

<?php
$post = $wp_query->post;
if ( in_category( '9' ) ) {
    get_template_part( 'single2' );
} else {
    get_template_part( 'single1' );
}
?>

どちらのコードの例も、表示しようとしている投稿のカテゴリーに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。使える全ての種類の条件については、条件タグのページをご覧ください。

カスタムテンプレートの定義

WordPress プラグインを使って、カスタム基準に応じるカスタムテンプレートを追加定義することもできます。この上級者向け機能を使うには、template_redirect というアクションフックを利用します。プラグインの作成についてより詳しくはプラグイン API のページを参照してください。

テンプレートファイルのインクルード

(ヘッダー、サイドバー、フッターなど、get_header()といった定義済み関数が存在しない)その他のテンプレートファイルをテンプレートにロードするには、get_template_part() が使用できます。これにより、テーマ内のコードをセクション単位で簡単に再利用することができます。

テンプレートからファイルを参照

テーマ内に存在するその他のファイルを参照する場合、URIやファイルパスをハードコードする(直書きする)のは避け、bloginfo() を使って参照します。

スタイルシートの中で使われるURIは、スタイルシートからの相対パスです。スタイルシートを参照しているページからのパスではないことに注意してください。例えば、テーマ内に images/ ディレクトリがある場合、CSS ではこのように相対パスで指定します。

h1 {
    background-image: url(images/my-background.jpg);
}

プラグイン API フック

テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、アクションフックを通して WordPress に機能を追加します。 (詳しくはプラグイン API を参照してください)

アクションフックの多くは WordPress のコア PHP コードの中に書かれており、動作させるために特別なタグをテーマに記述する必要はありません。しかし、プラグインがヘッダー、フッター、サイドバー、もしくはページの本文に、情報を直接表示できるようにするためのアクションフックが幾つかあり、これらはテーマに記述されている必要があります。以下が含めるべきアクションフックテンプレートタグの一覧です。

wp_head()
テーマの header.php にある <head> 要素内に記述する。
プラグインによるこのフックの使用例:JavaScript コードを挿入する。
wp_footer()
テーマの footer.phpの、</body> タグ直前に記述する。
プラグインによるこのフックの使用例:ページが読み込まれる最後に実行する PHP のコードをフッター下に挿入する。Google Analytics などのアクセス解析コードの挿入によく使われる。
wp_meta()
一般的には、テーマのメニューまたはサイドバー (sidebar.php テンプレート) の <li>Meta</li> セクションに記述する。
プラグインによるこのフックの使用例:広告スイッチャーやタグクラウドを表示させる。
comment_form()
comments.php の終了タグ (</div>) の直前に含める。
プラグインによるこのフックの使用例:コメントプレビューを表示させる。

実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。

テーマカスタマイズ API

WordPress 3.4 から、新しいテーマカスタマイズ管理画面機能 (テーマカスタマイザー) がデフォルトで追加され、ほぼ全ての WordPress テーマで利用可能です。管理画面のテーマカスタマイザーページには、add_theme_support() もしくは Settings API を用いてテーマ内で定義が必要な機能は自動的に集約され、リアルタイムでプレビューできます。

オプション設定好項目 新規オプション設定項目を、テーマカスタマイザーのページに追加したいテーマ開発者やプラグイン開発者は、 テーマカスタマイズ API を参照してください。テーマカスタマイズ API に関するチュートリアルは、 Ottopress.com のウェブサイトも参照してください。

信頼できないデータ

テーマ内で動的に生成されたコンテンツ、特に HTML 属性を含むコンテンツは、エスケープする必要があります。WordPress コーディング基準 でも書かれている通り、HTML 属性に挿入されるテキストは、シングルクォートやダブルクォートが属性の値を終了し、invalid な XHTML やセキュリティーの問題を起こさないようにする為、 esc_attr() を通す必要があります。一般的には titlealtvalue 属性をチェックしましょう。

一般的な場合における、安全なアウトプットが必要なの時の為に、幾つかの特別なテンプレートタグがあります。セキュリティーの脆弱性を避けるために、the_title() ではなく the_title_attribute() を使って title 属性に記事のタイトルを出力するのもその様なケースの1つです。翻訳可能なテキストを用いた、記事タイトルリンクの title 属性を正しくエスケーピング処理する例は次の通りです。

<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a>

非推奨となったエスケープ用関数は新しく正しい関数に変更してください。 wp_specialchars()/enhtmlspecialchars()esc_html()/enに。clean_url()/enesc_url()/enに。attribute_escape()/enesc_attr()/enに。さらに詳しくは データ検証 を参照してください。

翻訳対応 / 国際化 (I18n)

言語ローカライゼーションを スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能テキストを WordPress の gettext ベースの i18n 関数で囲みましょう。

これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストに「引っ掛ける」ことができ、翻訳しやすくなります。WordPress Localization/enI18n for WordPress Developers を参照してください。

テーマのクラス要素

body、post、comment に、WordPress によって生成されたクラス属性を付与するには、以下のテンプレートタグを組み入れます。記事用のクラス属性はループ内の要素のみに対して付与します。

テンプレートファイルのチェックリスト

テーマを作る時、テンプレートファイルを以下のテンプレートファイル基準に照らし合わせてチェックしてください。

Document Head (header.php)

  • 適切な DOCTYPE を使う。
  • <html> タグには language_attributes() を含める。
  • <meta> 要素の charset 属性は、<title> を含む全ての要素より前に挿入する。
  • <meta> 要素の charset と description 属性の指定には bloginfo() を使う。
  • <title> 要素の指定には wp_title() を使う。理由はこの項 (訳注: 未訳。en) を参照。
  • そのテーマのスタイルシートURLを取得するには get_stylesheet_uri() /en を使う。
  • フィードリンクを追加するには Automatic Feed Links /en を使う。
  • </head> 終了タグよりも前に wp_head() を挿入する。プラグインはこのアクションフックを使ってスクリプトやスタイルシート、その他の機能を追加する。

下記は、HTML5 に準拠した正しいフォーマットの head 部分の例です。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo( 'description' ); ?>">
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>
  • テーマのメインナビゲーションは wp_nav_menu() を使うカスタムメニューに対応しましょう。
    • メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
    • サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルをサポートしてください。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。

ウィジェット (sidebar.php)

  • テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
  • 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
  • wp_footer() を、body の閉じタグ直前に挿入する。
<?php wp_footer(); ?>
</body>
</html>

インデックス (index.php)

  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。

アーカイブ (archive.php)

  • アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。

固定ページ (page.php)

  • 固定ページのタイトルと本文を表示する。
  • コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
  • タグ、カテゴリー、日付、作成者などのメタデータは表示しない。
  • 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。

個別投稿表示 (single.php)

  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
  • 投稿のタイトルと本文を表示する。
    • タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
  • 投稿日を表示する。
  • (適切であれば) 作成者名を表示する。
  • 投稿カテゴリーと投稿タグを表示する。
  • 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
  • コメントリストとコメントフォームを表示する。
  • previous_post_link()next_post_link() を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。

コメント (comments.php)

  • (投稿の)作成者によるコメントは、他のコメントと識別できるよう (違うハイライトするなど) にする。
  • 適切であれば Gravatar (グラバター。ユーザーのアバター) を表示する。 (訳注:Gravatar について詳しくは Gravatar の使い方を参照)
  • スレッド形式のコメントをサポートする。
  • トラックバック/ピンバックを表示する。
  • function_exist() を用いた再宣言エラーを回避するチェックを除き、このファイルには関数定義を含めないようにする。理想的には全ての関数は functions.php にあるべき。

検索結果表示 (search.php)

  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 検索結果表示ページには検索された語句を表示する。シンプルだが検索内容を知らせるには有効な手段。特に検索結果が0件の場合に便利。the_search_query() を使って表示するか、もしくは get_search_query() /en を使って戻り値を取得する。例:
<h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>
  • 検索結果ページにも検索フォームを含めるのがよい。インクルードするには get_search_form() を使う。

JavaScript

  • JavaScript コードはできる限り外部ファイルに記述する。
  • スクリプトをロードするには wp_enqueue_script() /en を使う。
  • HTML ドキュメント (テンプレートファイル) に直接ロードする JavaScript は、古いブラウザ上でのエラーを回避する為に、CDATAセクションに記述する。
<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

Screenshot

テーマのスクリーンショットを作ります。ファイル名は screenshot.png と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 600x450。実際には 300x225 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。

テーマ設定

テーマは テーマ設定画面 /en を実装することも可能です。コードの例は A Sample WordPress Theme Options Page を参照してください。

ユーザー権限グループにテーマ設定画面へのアクセスを有効化する場合は、"switch_themes" ではなく "edit_theme_options" 権限を使います。但し、実際にユーザー権限でもテーマの変更を可能とする場合は除く。より詳しくは権限管理メニューの追加を参照してください。

バージョン 3.0 より、WordPress マルチサイト の場合、デフォルトでは管理者権限グループが "edit_themes" 権限を有していない設定に変更されました。テーマ内で"edit_themes" 権限を使って管理者のアクセス権限を設定している場合は注意してください。詳しい説明はこちら。この様なケースにおいて、管理者にテーマ設定メニューを表示するには "edit_theme_options" 権限を使います。WordPress のマルチサイト機能を使う場合は、管理者権限グループの additional capabilities を参照ください。

テーマのテスト過程

  1. PHP と WordPress エラーを修正する。非推奨関数の呼び出しや、WordPress 関連のエラーを確認する為に次のデバッグ設定を wp-config.php に追加してください: define('WP_DEBUG', true);。詳しくは 非推奨関数フック /en も参照してください
  2. テンプレートファイルのチェックリスト に照らし合わせてテンプレートファイルをチェックする(上記参照)。
  3. テーマユニットテストを通す。
  4. HTMLとCSSをバリデートする。Validating a Website /en参照。
  5. JavaScript エラーをチェックする。
  6. 全てのターゲットブラウザでテストする。例えば、IE7、IE8、IE9、Safari、Chrome、Opera、そして Firefox。
  7. 無関係なコメントやデバッグ設定、TODO アイテムなどを取り除く。
  8. テーマディレクトリにテーマを登録して公開する場合は、テーマレビュー を確認する。

参考資料

コーディング基準

テーマデザイン

CSS

テンプレート

関数リスト

テストと QA

リリース & プロモーション

外部参考資料 & チュートリアル


最新英語版: WordPress Codex » Theme Development最新版との差分