当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(誤字等の修正/テーマ・テンプレートガイド挿入)
(テーマ関数ファイル: en link)
 
(11人の利用者による、間の102版が非表示)
1行目: 1行目:
 
{{テーマ・テンプレートガイド|テンプレート}}
 
{{テーマ・テンプレートガイド|テンプレート}}
このページでは、あなた用の WordPress テーマの開発やデザインについて説明します。テーマのインストールと使い方について知りたいときは、[[:ja:Using Themes|テーマの使い方]] をおさらいしましょう。以下は、テーマの切り替え方や新しいテーマの入手方法ではなく、テーマを構築するためのコードの記述についての技術的な内容であり、[[:ja:Using Themes|テーマの使い方]]とは異なります。
+
このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、[[テーマの使い方]]をおさらいしましょう。[[テーマの使い方]]ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。
 +
<div id="Why WordPress Themes">
 +
==なぜ、WordPress テーマを作るの?==
 +
</div>
 +
WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。
  
You may wish to develop WordPress Themes for your own use or [[:en:Designing Themes for Public Release|for distribution]].
+
自分で使う為や、クライアントに納める為、[[テーマレビュー|WordPress テーマの公式レポジトリに登録]]する為などには独自テーマを作ることもできます。他にはどの様な理由があるでしょうか?
  
<div id="Why_WordPress_Themes">
+
* 自分だけのデザインの WordPress サイトを作るため
==Why WordPress Themes==
+
* [[テンプレート入門|テンプレート]]、[[テンプレートタグ|テンプレートタグ]]、[[The_Loop|ループ]]<!-- [[:en:The Loop in Action|en]]-->を活用し、異なったコンテンツやデザインのサイトを作るため。
</div>
+
* 特定のサイト機能のための代替テンプレートを提供するため。例えば[[Category Templates|カテゴリーページ]]や検索結果ページなど。
 +
* 複数のサイトレイアウトを入れ替えるため、または[[プラグイン|テーマ (スタイル) スイッチャー]]を活用して、サイト管理者がサイトの外観を変えられるようにするため。
  
WordPress Themes are files and styles that work together to create a presentation or look for a WordPress site. Each Theme may be different, offering many choices for users to take advantage of in order to instantly change their website look.  Why should you build your own WordPress Theme?
+
WordPress テーマにはたくさんの利点もあります。
  
* To create your own unique WordPress site look
+
* スタイルと[[テンプレート入門|テンプレートファイル]]をシステムファイル (WordPress コア) から分離し、サイトの外観に大きな影響を及ぼすことなくアップグレードできるようになる。
* To take advantage of [[テンプレート入門|templates]], [[テンプレートタグ|template tags]], and [[:en:The_Loop_in_Action|the WordPress Loop]] to generate different web page results and looks.
+
* カスタマイズすることにより、サイトに独自の機能性を持たせることができる。
* To provide alternative templates for specific site features, such as [[:en:Category_Templates|category pages]] and search result pages.
+
* サイトの外観(見た目とレイアウト)を素早く変更できる。
* To quickly switch between two site layouts, or to take advantage of a [[:ja:Plugins/Styles|Theme or style switcher]] to allow users to change the look of your site.
+
* サイト管理者が CSS、HTML、PHPを知らなくてもかっこいいサイトを持てる。
* To design WordPress Theme(s) so that others may enjoy your designs through public release.
+
  
A WordPress Theme has many benefits, too.
+
なぜ独自テーマを作るべきなのか、考えてみましょう。
  
* It separates the presentation styles and [[テンプレート入門|template files]] from the system files so the site will upgrade without drastic changes to the visual presentation of the site.
+
* CSS、HTML、PHP についてもっと良く知る良い機会だから。
* It allows for customization of the presentation and web page results unique to that Theme.
+
* CSS、HTML、PHP についての知識を実際に使ってみる良い機会だから。
* It allows for quick changes of the look and feel of a WordPress site.
+
* クリエイティブな作業だから。
* It takes away the need for a WordPress user to have to learn CSS, HTML, and PHP in order to have a good looking website.
+
* (たいていの場合は) 楽しいから。
 +
* [[Theme_Review|公開テーマ]]を作成すれば、[[WordPress への協力|WordPress コミュニティ]]と何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。
  
Why should you build your own WordPress Theme?  That's the real question.
+
<div id="Theme Development Standards">
 +
<div id="Theme_Development_Standards">
 +
== テーマの開発基準 ==
 +
</div>
 +
WordPress テーマは以下の基準に則ってコーディングする必要があります。
  
* It's an opportunity to learn more about CSS, HTML/XHTML, and PHP.
+
* よく構成され、エラーのない PHP と、valid な HTML。詳しくは[[WordPress Coding Standards|WordPress コーディング基準]]をご覧ください。
* It's an opportunity to put your expertise with CSS, HTML/XHTML, and PHP to work.
+
* クリーンかつ valid な CSS 。詳しくは [[CSS Coding Standards]]/[[:en:CSS Coding Standards|en]] をご覧ください。
* It's creative.
+
* [[Site Design and Layout|WordPress デザインリファレンス]]内のデザインガイドラインに従う。
* It's fun (most of the time).
+
* If you [[:en:Designing Themes for Public_Release|release it to the public]], you can feel good that you shared and gave something back to the [[WordPress への協力|WordPress Community]] (okay, bragging rights!)
+
  
<div id="Anatomy_of_a_Theme">
+
<div id="Anatomy of a Theme">
== テーマの構造 ==
+
=== テーマの構造 ===
 
</div>
 
</div>
 +
WordPress テーマは、WordPress のテーマディレクトリ (デフォルトでは <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 テーマは、<code>wp-content/themes/</code> の中のサブディレクトリに存在します。例えば、「test」というテーマは、おそらく <code>wp-content/themes/test/</code> ディレクトリにあります。テーマのサブディレクトリには、スタイルシートファイル、[[テンプレート入門|テンプレートファイル]]、オプションの関数ファイル(<code>functions.php</code>)、画像といった、テーマの全てが入っています。
+
新しくインストールされた WordPress にはデフォルトテーマが同梱されています。デフォルトテーマのファイルを詳しく見ることで、独自テーマファイルを作成する方法をよりよく理解することができます。
  
ダウンロードした WordPress には、「Classic」と「Default」という二つのテーマが同梱されています。この二つのテーマでは、ウェブページの表示内容や外観を生成するために、異なる機能やタグを使っています。あなた用のテーマファイルの構築方法をよりよく理解するために、これらのテーマを詳しく見ていきましょう。
+
図解付きの説明は [http://yoast.com/wordpress-theme-anatomy/ WordPress Theme Anatomy] のインフォグラフィックをご覧ください。
  
WordPress テーマは、画像を除くと、大きく分けて次の 3種類のファイルから構成されています。
+
WordPress テーマは、画像ファイルと JavaScript ファイルを除くと、大きく分けて次の3種類のファイルから構成されています。
  
# [[#テーマスタイルシート|<code>style.css</code>]] -- テーマの情報 および ウェブページの外観を制御するスタイルシート
+
# ウェブページの外観(見た目とレイアウト)を制御しているスタイルシート (<code>style.css</code>)。
# [[#関数ファイル|<code>functions.php</code>]] -- オプションの関数ファイル
+
# ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御する [[テンプレート入門|WordPress テンプレートファイル]]。
# [[テンプレート入門|テンプレートファイル]] -- ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御
+
# オプションの関数が含まれている、テーマ関数ファイル (<code>functions.php</code>)。
  
 
では、個別に見ていきましょう。
 
では、個別に見ていきましょう。
  
<div id="Theme_Style_Sheet">
+
<div id="Child Themes">
 +
==== 子テーマ ====
 +
</div>
 +
最も単純なテーマは <code>style.css</code> ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。
 +
 
 +
さらに詳しくは[[子テーマ]]のページをご覧ください。
 +
 
 +
<div="Theme Stylesheet">
 
=== テーマスタイルシート ===
 
=== テーマスタイルシート ===
 
</div>
 
</div>
 +
<code>style.css</code> は、テーマの「CSS スタイル」情報に加えて、コメントの形式で'''必ず'''「テーマ詳細」を記述する必要があります。管理画面の[[管理画面#Design_-_Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ詳細内容が別のテーマのコメント[[File Header|ヘッダ]]/[[:en:File Header|en]] にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。
  
<code>style.css</code> は、テーマの「スタイルシート」情報に加えて、コメントの形式で'''必ず'''「テーマについての明細」を記述していなければなりません。管理パネルの[[管理パネル#Presentation - Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ明細が別のテーマのコメントヘッダにあってはなりません。既存のテーマを複製してあなた用のテーマを作るときは、最初にこの情報を変更してください。
+
次の例は、テーマ「Twenty Thirteen」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
次の例は、テーマ「Rose」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
+
  
<pre>/*  
+
<pre>
Theme Name: Rose
+
/*
Theme URI: テーマのホームサイトの URI
+
Theme Name: Twenty Thirteen
Description: a-brief-description
+
Theme URI: http://wordpress.org/themes/twentythirteen
Author: 作者の名前
+
Author: the WordPress team
Author URI: 作者の URI
+
Author URI: http://wordpress.org/
Template: 親テーマの定義(オプション)
+
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: バージョン番号(オプション)
+
Version: 1.0
.
+
License: GNU General Public License v2 or later
コメント/利用許諾の記述(あれば)
+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
.
+
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
*/</pre>
+
Text Domain: twentythirteen
  
最も単純なテーマには、<code>style.css</code> ファイルと、あれば画像だけが含まれます。このようなテーマを作成するには、<code>style.css</code> のヘッダコメント内の <code>Template:</code> 行を編集し、このテーマ用に''継承''させたいテンプレートのセットを指定する必要があります。例えば、テーマ「Rose」に、別の「test」というテーマからテンプレートを継承させたい場合、Rose の <code>style.css</code> の冒頭のコメントに <code>Template: test</code> と書きます。すると、「test」は、<code>wp-content/themes/Rose</code> ディレクトリにある <code>style.css</code> ファイルと付属画像のみからなる「Rose」の親テーマとなります。'''注''': 「親テーマの指定」は、そのテーマから''全ての''テンプレートファイルを継承することに注意。子テーマディレクトリ内にテンプレートファイルがあっても無視されます。
+
This theme, like WordPress, is licensed under the GPL.
 +
Use it to make something cool, have fun, and share what you've learned with others.
 +
*/
 +
</pre>
  
<code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに [[管理パネル]] > [[管理パネル#Presentation_-_Change_the_Look_of_your_Blog|表示]]画面に表示させるために必要なものです。
+
テーマ作者名 (Author) には、wordpress.org のユーザー名を使うことを推奨しますが、作者の本名でもかまいません。作者名は作者が自由に選ぶことができます。
  
'''注''': 親テーマを定義するとき、コメントヘッダの <code>Template:</code> セクションには、スタイルの'''ディレクトリ名'''を書かなければなりません。例えば、親テーマとして WordPress Default テーマを使う場合は、<code>Template: WordPress Default</code> ではなく、このテーマのディレクトリ名で <code>Template: default</code> と書きます。
+
テーマの特徴をタグ (Tags) として指定することにより、管理画面の「テーマのインストール」にて、特徴フィルターを使った検索に反映されます。使用可能なタグのリストは[https://ja.wordpress.org/themes/ テーマディレクトリ] /[https://wordpress.org/themes/ en] をご覧ください。
 +
 
 +
<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 コーディング基準]] / [https://make.wordpress.org/core/handbook/coding-standards/css CSS coding standards en]に従う。
 +
* 可能であれば valid な CSS を使う。ただし、ベンダープレフィックスを使って CSS3 を活用する場合は除く。
 +
* CSS ハックは最小限にとどめる。明らかな例外としては特定のブラウザへのサポート(大抵の場合は特定のバージョンの IE)。可能であれば CSS ハックは別セクション、もしくは別ファイルに分ける。
 +
* 投稿/固定ページ本文とコメント本文において、使われる可能性のある全てのHTML要素のスタイルを、テーマ内(子テーマがある場合を除く)で指定する。
 +
** テーブル、キャプション、画像、リスト、引用、など。
 +
* 印刷に適したスタイルの追加を強く推奨する。
 +
** 印刷用のスタイルシートを <tt>media="print"</tt> と指定してインクルード、もしくはメインのスタイルシート内に記述する。
  
 
<div id="Functions_File">
 
<div id="Functions_File">
=== 関数ファイル ===
+
 
 +
=== テーマ関数ファイル ===
 
</div>
 
</div>
 +
テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理画面とサイト表示の両方で)。このファイルの使用例:
  
テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます(管理パネルとサイト表示の両方で)。このファイルの使用例:
+
* テーマスタイルシートとスクリプトのエンキュー。 [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]] / [[:en:Plugin_API/Action_Reference/wp_enqueue_scripts|en]]を参照。
 +
 
 +
* [[Widgets_API|サイドバー]]、[[Navigation Menus|ナビゲーションメニュー]]、[[Post Thumbnails|投稿サムネイル]]、[[Post Formats|投稿フォーマット]]、[[Custom Headers|カスタムヘッダー]]、[[Custom Backgrounds|カスタム背景]]などの[[Theme Features|テーマ機能]]に対応するための定義
 
* テーマ内の複数のテンプレートファイルで使う関数の定義
 
* テーマ内の複数のテンプレートファイルで使う関数の定義
 
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置
 
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置
 +
<!-- 英語版では[[Sidebars]]へのリンクとなっているが、実質ウィジェットのことであり、日本語版のSidebarsもないことから、[[Widgets_API]]へのリンクとした。 -->
  
「Default」WordPress テーマには、関数と管理画面を定義する <code>functions.php</code> ファイルが入っているので、見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[:en:Plugins Resources|Plugins Resources]] リストを見るのが一番です。
+
WordPress のデフォルトテーマには、<code>functions.php</code> ファイルが入っており、これら機能の多くを定義しているので見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[Writing a Plugin#Programming Your Plugin|プラグインの作成]]リストを見るのが一番です。
 +
<!-- 英語版では [[Plugins Resources]] list だった箇所が [[Function Reference]] list へのリンクに変更されたのですが、[[Writing a Plugin]] または [[プラグイン API]] のほうがよいように思います。 -->
 +
 
 +
'''関数を ''functions.php'' に定義するのか、プラグインに定義するのか、に関して:'''
 +
同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数は<code>functions.php</code>ではなく、[[Plugins|プラグイン]]内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。
 +
 
 +
<div id="Template Files">
  
<div id="Theme_Template_Files">
 
 
=== テーマテンプレートファイル ===
 
=== テーマテンプレートファイル ===
 
</div>
 
</div>
 +
[[テンプレート入門|テンプレート]]は、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして [[Template Tags|WordPress テンプレートタグ]]で構成されています。
 +
 +
それでは、テーマの部品として定義できる様々なテンプレートを見てみましょう。
 +
 +
WordPress では、サイトの各種の表示を個別のテンプレートとして定義できるようになっていますが、サイト全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、[[Template Hierarchy|テンプレート階層]]に基づいて選ばれ、生成されます。
 +
 +
テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する''全ての''ページ用のテンプレートとして、<code>index.php</code> というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。
 +
 +
<div id="Template Files List">
 +
==== テンプレートファイル一覧 ====
 +
</div>
 +
WordPress が認識するテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。追加情報は[[Template Hierarchy|テンプレート階層]]をご覧ください。
 +
 +
;<code>style.css</code>: メインのスタイルシート。テーマにはこのファイルが'''必須'''で、テーマのヘッダ情報を含まなければなりません。
 +
;''rtl.css'': RTL スタイルシート。ウェブサイトのテキスト方向が右から左の場合、このファイルが'''自動的に'''適用されます。RTL スタイルシートは [http://wordpress.org/extend/plugins/rtler/ the RTLer] プラグインを使って生成することもできます。
 +
;<code>index.php</code>: メインテンプレート。([[#テーマスタイルシート|親テーマのテンプレートを利用]]するのではなく) このテーマ自身のテンプレートを設けるなら <code>index.php</code> は必須。
 +
;<code>comments.php</code>: コメントテンプレート。
 +
;''front-page.php'': フロントページテンプレート。home.phpとfront.phpが両方存在した場合は、front-page.phpがフロントページ表示用のテンプレートとして使われます。
 +
;<code>home.php</code>: ホームページテンプレート。フロントページの表示(にデフォルトとして設定されている最新の投稿)に使われる。[[Creating a Static Front Page|固定ページをフロントページとして設定]]した場合、指定した固定ページがフロントページの表示に使われます。
 +
;<code>single.php</code>: 個別投稿テンプレート。ひとつの投稿が要求 (クエリ) されたときに使用。このクエリテンプレートが存在しないときは <code>index.php</code> が使われる。この他のクエリテンプレートも同様。
 +
;<code>single-<post-type>.php</code>: [[カスタム投稿タイプ]]の個別投稿が要求 (クエリ) されたときに使われるテンプレート。例えば <tt>books</tt> というカスタム投稿タイプを個別表示するためには <tt>single-books.php</tt> が使われる。
 +
;<code>page.php</code>: 固定ページテンプレート。特定の[[Pages|固定ページ]]が要求されたときに使用。
 +
;<code>category.php</code>: [[Category Templates|カテゴリテンプレート]]。あるカテゴリが要求されたときに使用。
 +
;<tt>tag.php</tt>: [[Tag Templates|タグテンプレート]]/[[:en:Tag Templates|en]]。タグが要求されたときに使用。
 +
;<tt>taxonomy.php</tt>: [[Taxonomy Templates|タクソノミーテンプレート]]/[[:en:Taxonomy Templates|en]]。[[カスタム分類]]内の個別項目が要求されたときに使用。
 +
;<code>author.php</code>: [[Author Templates|作成者テンプレート]]/[[:en:Author Templates|en]]。作成者が要求されたときに使用。
 +
;<code>date.php</code>: 日付別テンプレート。ある日付または時刻が要求されたときに使用。年、月、日、時、分、秒。
 +
;<code>archive.php</code>: アーカイブテンプレート。あるカテゴリ、作成者、日付が要求されたときに使用。各クエリの種類に対応する <code>category.php</code>、<code>author.php</code>、<code>date.php</code> がそれぞれ存在する場合は、そのクエリに対してアーカイブテンプレートは無効となる。
 +
;<code>search.php</code>: 検索結果テンプレート。ある検索が実行されたときに使用。
 +
;''attachment.php'': 添付ファイルテンプレート。特定の添付ファイルを個別表示するときに使用。
 +
;''image.php'': 添付画像ファイルテンプレート。特定の添付画像ファイルを個別表示するときに使用。存在しない場合は ''attachment.php'' が使用される。
 +
;<code>404.php</code>: '''[[Creating an Error 404 Page|404 Not Found]]''' テンプレート。WordPress が要求に合う投稿やページを見つけられなかったときに使用。
  
[[テンプレート入門|テンプレート]]は、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テーマの部品として定義できる様々なテンプレートを見てみましょう。
+
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[Conditional Tags|条件タグ]]が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に <code>[[Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
  
WordPress では、ウェブログの各種の表示を個別のテンプレートとして定義できるようになっていますが、ウェブログ全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、[[テンプレート階層]]に基づいて選ばれ、生成されます。テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、ウェブログとして生成・表示する''全ての''ページ用のテンプレートとして、<code>index.php</code> というテンプレートファイル一つだけを使うこともできます。通常は、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。
+
<div id="Basic Templates">
  
<div id="Basic_Templates">
 
 
==== 基本的なテンプレート ====
 
==== 基本的なテンプレート ====
 
</div>
 
</div>
 +
WordPress テーマは、最小で2ファイルから構成される。
  
最少 2ファイル構成の WordPress テーマ:
+
* ''style.css''
 +
* ''index.php''
  
* <code>style.css</code>
+
両ファイルはそのテーマのディレクトリ内に置きます。<code>index.php</code> [[テンプレート入門|テンプレートファイル]]はとても融通が利きます。これは、参照するヘッダー・サイドバー・フッター・コンテンツ・カテゴリー・アーカイブ・検索結果・エラーほか、WordPress 上で生成されるウェブページすべてに用いることができます。
* <code>index.php</code>
+
  
両ファイルはそのテーマのディレクトリ内に置きます。<code>index.php</code> [[テンプレート入門|テンプレートファイル]]はとても融通が利きます。これは、参照するヘッダ・サイドバー・フッタ・コンテンツ・カテゴリ・アーカイブ・検索結果・エラーほか、サイト上で生成されるウェブページの全てに用いることができます。よく使われる部分の担当毎に、モジュール式のテンプレートファイルとして''分割''することもできます。
+
もしくは、モジュール式のテンプレートファイルとして''分割''することもできます。別のテンプレートファイルを用意しなかった場合、WordPress は内蔵のデフォルトファイルか、デフォルト関数を用いることもあります。例えば、''searchform.php'' テンプレートファイルがないとき、WordPress はデフォルト関数を使って検索フォームを表示します。
あなたが他にテンプレートファイルを用意しなければ、WordPress は内蔵のデフォルトファイルを使います。例えば、<code>comments.php</code> や <code>comments-popup.php</code> テンプレートファイルがないときは、WordPress は [[テンプレート階層]]に従って自動的に <code>wp-comments.php</code> や <code>wp-comments-popup.php</code> を使います。これらのデフォルトテンプレートがあなたのテーマに合わなければ、自分で用意したいと思うことでしょう。通常、分割に用いる基本的なファイルは次のとおりです(テーマのディレクトリに加えます)。
+
  
* <code>header.php</code>
+
代表的なテンプレートファイルは次のとおりです。
* <code>sidebar.php</code>
+
* <code>footer.php</code>
+
* <code>comments.php</code>
+
* <code>comments-popup.php</code>
+
  
これらのモジュールテンプレートファイル使うには、最終的に生成するウェブページ内に表示したいユニットを読み込む/''取得(get)''するためのマスターファイル <code>index.php</code> 内に、テンプレートタグを書きます。
+
* ''comments.php''
 +
* ''comments-popup.php''
 +
* ''footer.php''
 +
* ''header.php''
 +
* ''sidebar.php''
  
* ヘッダ部の読み込みには <code>[[:ja:Include Tags#The Header Template|get_header()]]</code> テンプレートタグを使用。
+
テンプレートファイルを使うことにより、''index.php'' マスターファイルのテンプレートタグをを記入してこれら他のファイル
* サイドバーの読み込みには <code>[[:ja:Include Tags#The Sidebar Template|get_sidebar()]]</code> テンプレートタグを使用。
+
* フッタ部の読み込みには <code>[[:ja:Include Tags#The Footer Template|get_footer()]]</code> テンプレートタグを使用。
+
  
''include'' の使用例:
+
* ヘッダーを読み込むには <tt>[[関数リファレンス/get_header|get_header()]]</tt> を使用。
 +
* サイドバーを読み込むには <tt>[[関数リファレンス/get sidebar|get_sidebar()]]</tt> を使用。
 +
* フッターを読み込むには <tt>[[関数リファレンス/get footer|get_footer()]]</tt> を使用。
 +
* 検索フォームを読み込むには <tt>[[関数リファレンス/get_search_form|get_search_form()]]</tt> を使用。
 +
 
 +
''include'' の使用例:
  
 
<pre><?php get_sidebar(); ?>
 
<pre><?php get_sidebar(); ?>
121行目: 196行目:
 
<?php get_footer(); ?></pre>
 
<?php get_footer(); ?></pre>
  
各種テンプレートの動作や異なる情報を表示する方法については、[[WordPress サイトデザイン リファレンス#テンプレートファイル|テンプレート]]をご覧ください。
+
テンプレート関数の中には、その関数のデフォルトファイルが非推奨、もしくは存在しない場合があります。その場合はこれら(テンプレート)ファイルをテーマに同梱しなければいけません。バージョン 3.0 の時点では非推奨となったデフォルトファイルは {{Trac|wp-includes/theme-compat}} にあります。例えば、 <tt>[[関数リファレンス/get_header|get_header()]]</tt> が安全に動作する為には ''header.php'' を、 <tt>[[関数リファレンス/comments_template|comments_template()]]</tt> の為には ''comments.php'' を同梱しましょう。
  
<div id="Query-based_Templates">
+
各種テンプレートの動作や異なる情報を表示する方法については、[[WordPress サイトデザイン リファレンス#テンプレートファイル|テンプレートファイルの項]]をご覧ください。
==== クエリベースのテンプレート ====
+
 
 +
<div id="Custom Page Templates">
 +
====カスタム固定ページテンプレート====
 
</div>
 
</div>
 +
固定ページのテンプレートファイルは[[Using Themes|テーマ]]ディレクトリの中にあります。固定ページの為の新規のカスタム固定ページテンプレートを作成するには、新しくファイルを作る必要があります。例えば、''snarfer.php'' という固定ページの為の固定ページテンプレートを作るとします。''snarfer.php'' ファイルの冒頭に以下のコードを記述します。
  
WordPress では、各''クエリ''(要求)タイプによって異なる[[テンプレート入門|テンプレート]]をロードできます。これには二つの方法があります。内蔵の [[テンプレート階層]]の一環とするものと、テンプレートファイルの[[:ja:The Loop|ループ]]内で[[:ja:Conditional Tags|条件タグ]]を用いる方法です。
+
<?php
 +
/*
 +
Template Name: Snarfer
 +
*/
 +
?>
  
[[テンプレート階層]]を使うには、通常、<code>index.php</code> を自動的に無効にする専用のテンプレートファイルが必要です。例えば、テーマに <code>category.php</code> というテンプレートがあり、カテゴリページが要求されると、<code>index.php</code> の替わりに <code>category.php</code> がロードされます。<code>category.php</code> が存在しなければ、従来どおり <code>index.php</code> が使われます。
+
上記コードによって ''snarfer.php'' が "Snarfer" テンプレートとして定義されます。"Snarfer" を変更することで、固定ページテンプレート名 (Template Name) を変更することができます。このテンプレート名は、管理画面のテーマの編集ページのテンプレート一覧に表示されます。
  
テンプレート階層では、さらに特定の用途の、例えば <code>category-6.php</code> のようなファイルを取得できます。-- このファイルは、カテゴリID 6 のページを生成する際に <code>category.php</code> に替わって使われます(カテゴリID は、サイト管理者としてログイン中に [[管理パネル#Manage_-_Change_your_content|管理]](Manage) > [[管理パネル#Categories|カテゴリー]](Categories)で確認できます)。この処理の動作の詳細は、[[:en:Category Templates|カテゴリテンプレート]] をご覧ください。
+
カスタム固定ページテンプレートのファイル名は、''.php'' の拡張子がついていれば''ほぼ''何でもかまいません(ただし、WordPress 内部で予約されている特別なファイル名は除く。''使用できない''ファイル名のリストは[[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.E4.B8.80.E8.A6.A7|reserved Theme filenames]]を参照)。
  
[[テンプレート階層]]よりもさらにテンプレートファイルの制御が必要な場合、[[:ja:Conditional Tags|条件タグ]]が使えます。条件タグは通常、ある特定の条件に当てはまるかを[[:en:The_Loop_in_Action|WordPress ループ]]内でチェックしてから、その条件に基づいて、特定のテンプレートをロードしたり画面に特定のテキストを配置したりします。
+
冒頭に記述する上記の5行のコードの後に何を記述するかはあなた次第です。記述したコードの内容により、Snarfer 固定ページテンプレートを使う固定ページがどのように表示されるかコントロールされます。この目的に使用できる WordPress テンプレート関数の詳細は[[Template Tags|テンプレートタグ]]をご覧ください。場合によっては、他のテンプレートファイル(''page.php'' や ''index.php'' など)をコピーし、''snarfer.php'' とリネームし、上記5行のコードをファイルの冒頭に記述する方が作りやすいでしょう。全てをスクラッチから(イチから)作るよりも、HTML と PHP コードを''変更''するだけですみます。例は[[#Examples|下記]]をご覧ください。ページテンプレートを作成し、テーマディレクトリに保存すると、固定ページを新規作成もしくは編集の際に、選択肢の1つとして現れます('''注意''':上記方法によって、少なくとも1つ以上のページテンプレートが存在しない限り、固定ページの作成・編集時にページテンプレート選択のオプションは表示されません)。
  
例えば、ある特定のカテゴリに属する記事にのみ独自のスタイルを生成するには<!-- to generate a distinctive style sheet とあるが、CSS を指しているわけではないようなので、スタイルとしておく -->、次のようなコードになります。(訳注: 一つ目の例は、原文で <code>is_category(9)</code> となっているが、単体記事表示時であれば <code>in_category()</code> を使う。)
+
<div id="Query-based Template Files">
 +
==== クエリベースのテンプレート ====
 +
</div>
 +
WordPress では、各''クエリ'' (要求) タイプによって異なる[[テンプレート入門|テンプレート]]をロードできます。これには二つの方法があります。内蔵の [[テンプレート階層]]の一環とするものと、テンプレートファイルの[[The Loop|ループ]]内で[[Conditional Tags|条件タグ]]を用いる方法です。
 +
 
 +
[[テンプレート階層]]を使うには、通常、<code>index.php</code> を自動的にオーバーライドする専用のテンプレートファイルが必要です。例えば、テーマに <code>category.php</code> というテンプレートがあり、カテゴリーページが要求されると、<code>index.php</code> の替わりに <code>category.php</code> がロードされます。<code>category.php</code> が存在しなければ、従来どおり <code>index.php</code> が使われます。
 +
 
 +
テンプレート階層では、さらに特定の用途の、例えば <code>category-6.php</code> のようなファイルを取得できます。このファイルは、カテゴリーID 6 のページを生成する際に <code>category.php</code> に替わって使われます (バージョン 2.3 以下では、カテゴリーID はログイン中に「[[管理画面#Manage_-_Change_your_content|管理]] > [[管理画面#Categories|カテゴリー]]」で確認できます。バージョン 2.5 では ID カラムが管理画面から削除されました。 'カテゴリーの編集' をクリックして URL の '...categories.php?action=edit&cat_ID=3' という部分を確認してください。cat_ID=3 なので カテゴリー ID は 3になります)。この詳細は、[[Category Templates|ーテンプレート]]をご覧ください。
 +
 
 +
[[テンプレート階層]]よりもさらにテンプレートファイルの制御が必要な場合、[[Conditional Tags|条件タグ]]が使えます。条件タグは通常、ある特定の条件に当てはまるかを [[The Loop in Action|WordPress ループ]]内でチェックし、その条件に基づいて特定のテンプレートを読み込んだり画面にテキストを配置したりします。
 +
 
 +
例えば、ある特定のカテゴリに属する投稿にのみ独自のスタイルを生成するには<!-- to generate a distinctive style sheet とあるが、CSS を指しているわけではないようなので、スタイルとしておく -->、次のようなコードになります (訳注: 一つ目の例は、原文で <code>is_category(9)</code> となっているが、個別投稿表示時であれば <code>in_category()</code> を使う)。
  
<pre><?php
+
<pre>
if (is_category(9)) {
+
<?php
  // カテゴリ 9 に当てはまるとき
+
if ( is_category( '9' ) ) {
  include(TEMPLATEPATH . '/single2.php');
+
    get_template_part( 'single2' ); // カテゴリー ID 9 に当てはまるとき
 
} else {
 
} else {
  // 他のカテゴリの記事のとき
+
    get_template_part( 'single1' ); // 当てはまらないカテゴリの投稿のとき
  include(TEMPLATEPATH . '/single1.php');
+
 
}
 
}
?></pre>
+
?>
 +
</pre>
  
あるいは、クエリを用いて次のようにします。([[テンプレートタグ/in category|参考]])
+
あるいは、クエリを用いた場合、次のようにもなります。
  
<pre><?php
+
<pre>
 +
<?php
 
$post = $wp_query->post;
 
$post = $wp_query->post;
if ( in_category('9') ) {
+
if ( in_category( '9' ) ) {
  include(TEMPLATEPATH . '/single2.php');
+
    get_template_part( 'single2' );
 
} else {
 
} else {
  include(TEMPLATEPATH . '/single1.php');
+
    get_template_part( 'single1' );
 
}
 
}
?></pre>
+
?>
 +
</pre>
  
どちらのコードの例も、表示しようとしている記事のカテゴリに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。 -- 全てのオプションについては  [[:ja:Conditional Tags|条件タグ]]のページをご覧ください。
+
どちらのコードの例も、表示しようとしている投稿のカテゴリーに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。使える全ての種類の条件については、[[Conditional Tags|条件タグ]]のページをご覧ください。
  
<div id="Media_Icons">
+
<div id="Defining Custom Templates">
=== メディアアイコン ===
+
====カスタムテンプレートの定義====
 
</div>
 
</div>
 +
WordPress プラグインを使って、カスタム基準に応じるカスタムテンプレートを追加定義することもできます。この上級者向け機能を使うには、<code>template_redirect</code> という[[プラグイン API#Current Hooks For Actions|アクションフック]]を利用します。プラグインの作成についてより詳しくは[[プラグイン API|プラグイン API]] のページを参照してください。
  
Wordpress uses media icons to represent [[:en:Using_Image_and_File_Attachments|attachment files]] on your blog and in the Admin interface, if those icons are available.
+
<div id="Including Template Files">
 +
==== テンプレートファイルのインクルード ====
 +
</div>
 +
(ヘッダー、サイドバー、フッターなど、<tt>[[関数リファレンス/get_header|get_header()]]</tt>といった定義済み関数が存在しない)その他のテンプレートファイルをテンプレートに読み込むには、<tt>[[関数リファレンス/get_template_part|get_template_part()]]</tt> が使用できます。これにより、テーマ内のコードをセクション単位で簡単に再利用することができます。
  
It looks for image files named by media type in the <tt>images</tt> directory of the current theme. (As of Wordpress 2.2, the default theme comes with only one media icon, <tt>audio.jpg</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]] をご覧ください。-->
  
For example, for an attachment of [http://en.wikipedia.org/wiki/Internet_media_type MIME type] <tt>audio/mpeg</tt>, Wordpress would look for an icon file at these locations, stopping after the first match (see <tt>[[:en:Function_Reference/wp_mime_type_icon|wp_mime_type_icon]]</tt>):
+
スタイルシートの中で使われるURIは、スタイルシートからの相対パスです。スタイルシートを参照しているページからのパスではないことに注意してください。例えば、テーマ内に ''images/'' ディレクトリがある場合、CSS ではこのように相対パスで指定します。
  
# <var>my_theme</var>/images/audio.jpg
+
<pre>
# <var>my_theme</var>/images/audio.gif
+
h1 {
# <var>my_theme</var>/images/audio.png
+
    background-image: url(images/my-background.jpg);
# <var>my_theme</var>/images/mpeg.jpg
+
}
# <var>my_theme</var>/images/mpeg.gif
+
</pre>
# <var>my_theme</var>/images/mpeg.png
+
# <var>my_theme</var>/images/audio_mpeg.jpg
+
# <var>my_theme</var>/images/audio_mpeg.gif
+
# <var>my_theme</var>/images/audio_mpeg.png
+
  
<div id="Theme_Template_Files_List">
+
<div id="Plugin API Hooks">
=== テーマテンプレートファイル一覧 ===
+
==== プラグイン API フック ====
 
</div>
 
</div>
 +
テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、''アクションフック''を通して WordPress に機能を追加します。 (詳しくは[[Plugin API|プラグイン API]] を参照してください)
  
WordPress が認識するテーマテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。さらなる情報は[[テンプレート階層]]をご覧ください。
+
アクションフックの多くは WordPress のコア PHP コードの中に書かれており、動作させるために特別なタグをテーマに記述する必要はありません。しかし、プラグインがヘッダー、フッター、サイドバー、もしくはページの本文に、情報を直接表示できるようにするためのアクションフックが幾つかあり、これらはテーマに記述されている必要があります。以下が含めるべきアクションフックテンプレートタグの一覧です。
  
;<code>style.css</code>: メインのスタイルシート。テーマにはこのファイルが'''必須'''で、テーマのヘッダ情報を含まなければなりません。
+
; [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]]
;<code>index.php</code>: メインテンプレート。([[#テーマスタイルシート|親テーマのテンプレートを利用]]するのではなく)このテーマ自身のテンプレートを設けるなら <code>index.php</code> は必須。
+
: テーマ機能ファイルで使用されます。外部スクリプトとスタイルシートをロードするために使用します。
;<code>comments.php</code>: コメントテンプレート。存在しなければデフォルトテーマの <code>comments.php</code> が使われる。
+
 
;<code>comments-popup.php</code>: ポップアップコメントテンプレート。存在しなければデフォルトテーマの <code>comments-popup.php</code> が使われる。
+
; [[関数リファレンス/wp head|wp_head()]]
;<code>home.php</code>: ホームページテンプレート。
+
: テーマの <code>header.php</code> にある <code><nowiki><head></nowiki></code> 要素内に記述する。
;<code>single.php</code>: 単体記事テンプレート。個別記事が要求(クエリ)されたときに使用。このクエリテンプレートが存在しないときは <code>index.php</code> が使われる。この他のクエリテンプレートも同様。
+
: プラグインによるこのフックの使用例:JavaScript コードを挿入する。
;<code>page.php</code>: ページテンプレート。特定の[[:ja:Pages|ページ]]が要求されたときに使用。
+
 
;<code>category.php</code>: [[:en:Category Templates|カテゴリテンプレート]]。あるカテゴリが要求されたときに使用。
+
; [[関数リファレンス/wp_footer|wp_footer()]]
;<code>author.php</code>: [[:en:Author Templates|著者テンプレート]]。ある著者が要求されたときに使用。
+
: テーマの <code>footer.php</code>の、<code><nowiki></body></nowiki></code> タグ直前に記述する。
;<code>date.php</code>: 日時テンプレート。ある日付または時刻が要求されたときに使用。年・月・日・時・分・秒
+
: プラグインによるこのフックの使用例:ページが読み込まれる最後に実行する PHP のコードをフッター下に挿入する。Google Analytics などのアクセス解析コードの挿入によく使われる。
;<code>archive.php</code>: アーカイブテンプレート。あるカテゴリ・著者・日付が要求されたときに使用。このテンプレートは、各クエリ種類に対応する <code>category.php</code><code>author.php</code><code>date.php</code> によって無効となる。
+
 
;<code>search.php</code>: 検索結果テンプレート。ある検索が実行されたときに使用。
+
; [[関数リファレンス/wp_meta|wp_meta()]]/[[:en:http://codex.wordpress.org/Function_Reference/wp_meta|en]]
;<code>404.php</code>: '''[[:en:Creating_an_Error_404_Page|404 Not Found]]''' テンプレート。WordPress が要求に合う記事やページを見つけられなかったときに使用。
+
: 一般的には、テーマのメニューまたはサイドバー (<code>sidebar.php</code> テンプレート) の <code><nowiki><li>Meta</li></nowiki></code> セクションに記述する。
 +
: プラグインによるこのフックの使用例:広告スイッチャーやタグクラウドを表示させる。
 +
 
 +
; [[テンプレートタグ/comment_form|comment_form()]]
 +
: <code>comments.php</code> の終了タグ (<code><nowiki></div></nowiki></code>) の直前に含める。
 +
: プラグインによるこのフックの使用例:コメントプレビューを表示させる。
  
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[:ja:Conditional Tags|条件タグ]](別名 <code>is_*()</code> 関数)が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、単体記事が表示される際に <code>[[:ja:Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
+
実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。
  
<div id="Referencing_Files_From_a_Template">
+
<div id="Theme Customization API">
=== テンプレートからのファイルの参照 ===
+
==== テーマカスタマイズ API ====
 
</div>
 
</div>
 +
WordPress 3.4 から、新しいテーマカスタマイズ管理画面機能 (テーマカスタマイザー) がデフォルトで追加され、ほぼ全ての WordPress テーマで利用可能です。管理画面のテーマカスタマイザーページには、[[関数リファレンス/add_theme_support|add_theme_support()]] もしくは Settings API を用いてテーマ内で定義が必要な機能は自動的に集約され、リアルタイムでプレビューできます。
  
WordPress のデフォルトテーマ(WordPress 1.2 用の Michael Heilemann の [http://binarybonsai.com/kubrick/ Kubrick] レイアウトが元)は、テンプレート上へのクエリの配置方法のよい見本です。
+
オプション設定項目を新たにテーマカスタマイザーのページに追加したいテーマ開発者やプラグイン開発者は、 [[Theme_Customization_API|テーマカスタマイズ API]] を参照してください。テーマカスタマイズ API に関するチュートリアルは、 [http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/ Ottopress.com のウェブサイト]も参照してください。
  
コード <code><?php bloginfo('template_directory'); ?></code> は、テンプレートの出力にテンプレートディレクトリの URL を挿入します。テーマ内のファイルを参照するために、この出力にさらに URI 情報を付け足すこともできます(例: <code><?php bloginfo('template_directory'); ?>/style.css</code> とすると、<code>http://www.example.com/wordpress/wp-content/themes/default/style.css</code> と出力)。
+
<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> 属性をチェックしましょう。
  
コード <code><?php bloginfo('stylesheet_directory'); ?></code> は、現在のテーマのスタイルシートが入っているディレクトリの URL を、テンプレートの出力に挿入します。テーマ内のファイル、具体的には、スタイルシートに使うファイルを参照するために、この出力にさらに URI 情報を付け足すことができます。
+
一般的な場合における、安全なアウトプットが必要なの時の為に、幾つかの特別なテンプレートタグがあります。セキュリティーの脆弱性を避けるために、[[テンプレートタグ/the_title|<tt>the_title()</tt>]] ではなく [[テンプレートタグ/the_title_attribute|<tt>the_title_attribute()</tt>]] を使って <tt>title</tt> 属性に記事のタイトルを出力するのもその様なケースの1つです。翻訳可能なテキストを用いた、記事タイトルリンクの <tt>title</tt> 属性を正しくエスケーピング処理する例は次の通りです。
(訳注: <code>'stylesheet_directory'</code> パラメータは WordPress 2.3.1 から非推奨です。)
+
  
定数 <code>TEMPLATEPATH</code> は、現在のテーマのテンプレートディレクトリへの[[用語集#絶対パス|絶対パス]](末尾の / を除く)への参照です。
+
<pre><a href="<?php the_permalink(); ?>" title="<?php sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a></pre>
  
Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. This obviates the need to include PHP code in the CSS file to specify directories. For example, if you include an <tt>images/</tt> directory in your Theme, you need only specify this relative directory in the CSS, like so:
+
非推奨となったエスケープ用関数は新しく正しい関数に変更してください。 [[Function_Reference/wp_specialchars|<tt>wp_specialchars()</tt>]]/[[:en:Function_Reference/wp_specialchars|en]] と [http://php.net/manual/en/function.htmlspecialchars.php <tt>htmlspecialchars()</tt>] は
 +
[[関数リファレンス/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|データ検証]] を参照してください。
  
<pre style="font-size: 0.9em">h1 { background-image: URL(images/my_background.jpg); }</pre>
+
<div id="Translation Support / I18n">
 +
==== 翻訳対応 / 国際化 (I18n) ====
 +
</div>
  
It is a good practice to use URIs in the manner described above to reference files from within a template, since, then your template will not depend on absolute paths.
+
スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能なテキストを WordPress の gettext ベースの [[I18n for WordPress Developers|i18n]] 関数で囲みましょう。これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストにフックすることができ、翻訳しやすくなります。[[WordPress Localization]]/[[:en:WordPress Localization|en]] と [[I18n for WordPress Developers]] を参照してください。
  
<div id="Defining_Custom_Templates">
+
<div id="Theme Classes">
===Defining Custom Templates===
+
==== テーマのクラス要素 ====
 
</div>
 
</div>
 +
body、post、comment に、WordPress によって生成されたクラス属性を付与するには、以下のテンプレートタグを組み入れます。記事用のクラス属性は[[The Loop|ループ]]内の要素のみに対して付与します。
  
It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria.  This advanced feature can be accomplished using the <tt>template_redirect</tt> [[プラグイン API#Current Hooks For Actions|action hook]].  More information about creating plugins can be found in the [[プラグイン API|Plugin API]] reference.
+
* [[テンプレートタグ/body_class|body_class()]]
 +
* [[テンプレートタグ/post_class|post_class()]]
 +
* [[Function_Reference/comment_class|comment_class()]] /[[:en:Function_Reference/comment_class|en]]
  
<div id="Plugin_API_Hooks">
+
<div id="Template File Checklist">
=== プラグイン API フック ===
+
=== テンプレートファイルのチェックリスト ===
 
</div>
 
</div>
 +
テーマを作る時、テンプレートファイルを以下のテンプレートファイル基準に照らし合わせてチェックしてください。
  
When developing Themes, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins you (or another Theme user) might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see [[プラグイン API|Plugin API]] for more information). Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include:
+
<div id="Document Head (header.php)">
 +
==== Document Head (header.php) ====
 +
</div>
 +
* 適切な [http://en.wikipedia.org/wiki/Document_Type_Declaration DOCTYPE] を使う。
 +
* <tt><html></tt> タグには [[テンプレートタグ/language_attributes|<tt>language_attributes()</tt>]] を含める。
 +
* <tt><meta></tt> 要素の charset 属性は、<tt><title></tt> を含む全ての要素より前に挿入する。
 +
* <tt><meta></tt> 要素の charset と description 属性の指定には [[テンプレートタグ/bloginfo|<tt>bloginfo()</tt>]] を使う。
 +
*<tt><title></tt> 要素の指定には [[テンプレートタグ/wp_title|<tt>wp_title()</tt>]] を使う。理由は[[テンプレートタグ/wp_title#Note|この項]] (訳注: 未訳。[[:en:Function_Reference/wp_title#Note|en]]) を参照。
  
; wp_head
+
* フィードリンクを追加するには [[Automatic Feed Links]] /[[:en:Automatic Feed Links|en]] を使う。
: Goes in the [[用語集#HTML|HTML]] <tt>&lt;head&gt;</tt> element of a theme; <tt>header.php</tt> template. Example plugin use: add javascript code.
+
* <tt></head></tt> 終了タグよりも前に [[関数リファレンス/wp_head|<tt>wp_head()</tt>]] を挿入する。プラグインはこのアクションフックを使ってスクリプトやスタイルシート、その他の機能を追加する。
 +
* ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。 代わりにテーマ関数のアクションフック [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]] を使う。
  
: Usage: <tt><nowiki><?php do_action('wp_head'); ?></nowiki></tt>
+
下記は、HTML5 に準拠した正しいフォーマットの head 部分の例です。
:''-or-''&nbsp; <tt><nowiki><?php wp_head(); ?></nowiki></tt>
+
  
; wp_footer
+
<pre>
: Goes in the "footer" of a theme; <tt>footer.php</tt> template. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer.
+
<!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>
 +
</pre>
  
: Usage: <tt><nowiki><?php do_action('wp_footer'); ?></nowiki></tt>
+
<div id="Navigation Menus (header.php)">
:''-or-''&nbsp; <tt><nowiki><?php wp_footer(); ?></nowiki></tt>
+
==== ナビゲーションメニュー (''header.php'') ====
 +
</div>
 +
* テーマのメインナビゲーションは [[関数リファレンス/wp_nav_menu|<tt>wp_nav_menu()</tt>]] を使うカスタムメニューに対応させる。
 +
** メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
 +
** サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルに対応すること。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。
  
; wp_meta
+
<div id="Widgets (sidebar.php)">
: Typically goes in the <tt><nowiki><li>Meta</li></nowiki></tt> section of a theme's menu or sidebar; <tt>sidebar.php</tt> template. Example plugin use: include a rotating advertisement or a tag cloud.
+
==== ウィジェット (''sidebar.php'') ====
 +
</div>
 +
* テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
 +
* 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
  
: Usage: <tt><nowiki><?php do_action('wp_meta'); ?></nowiki></tt>
+
<div id="Footer (footer.php)">
:''-or-''&nbsp; <tt><nowiki><?php wp_meta(); ?></nowiki></tt>
+
==== フッター (''footer.php'') ====
 +
</div>
 +
* [[テンプレートタグ/wp_footer|<tt>wp_footer()</tt>]] を、<tt>body</tt> の閉じタグ直前に挿入する。
  
; comment_form
+
<pre>
: Goes in <tt>comments.php</tt> and <tt>comments-popup.php</tt>, directly before the comment form's closing tag (<code><nowiki></form></nowiki></code>). Example plugin use: display a comment preview.
+
<?php wp_footer(); ?>
 +
</body>
 +
</html>
 +
</pre>
  
: Usage: <tt><nowiki><?php do_action('comment_form', $post->ID); ?></nowiki></tt>  
+
<div id="Index (index.php)">
 +
==== インデックス (''index.php'') ====
 +
</div>
 +
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
  
For a real world usage example, you'll find these plugin hooks included in the default theme's templates.
+
<div id="Archive (archive.php)">
 +
==== アーカイブ (''archive.php'') ====
 +
</div>
 +
* アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
 +
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
  
<div id="Theme_Development_General_Guidelines">
+
<div id="Pages (page.php)">
==テーマ開発の総合ガイドライン ==
+
==== 固定ページ (''page.php'') ====
 
</div>
 
</div>
 +
* 固定ページのタイトルと本文を表示する。
 +
* コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 +
* タグ、カテゴリー、日付、作成者などのメタデータは表示しない。
 +
* 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
  
Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):
+
<div id="Single Post (single.php)">
# Indicate precisely what your Theme and template files will achieve.
+
==== 個別投稿表示 (''single.php'') ====
# Indicate deficiencies in your Themes, if any.
+
</div>
# Clearly reference any special modifications in [[:en:Commenting Code|comments]] within the template and style sheet files. Add comments to modifications, template sections, and CSS styles, especially those which cross template files.
+
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
# If you have any special requirements, which may include custom RewriteRules, or the use of some additional, special templates, images or files, please explicitly state the steps of action a user should take to get your Theme working.
+
* 投稿のタイトルと本文を表示する。
# Try and test your Theme [[:en:CSS Fixing Browser Bugs|across browsers]] to catch at least a few of the [[:en:CSS Troubleshooting|problems]] the users of the Theme may find later.
+
** タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
# Provide contact information (web page or email), if possible, for support information and questions.
+
* 投稿日を表示する。
 +
** デザイン適理由で重要でない限り、[[管理画面/一般設定|日付のフォーマットと時刻のフォーマットの設定]]を尊重すること。 (日付のフォーマットと時刻のフォーマットに関するユーザー設定は [[Administration Panels|管理画面]] > [[Administration Panels#Settings|設定]] > [[Administration Panels#General|一般]] の中にある)
 +
** ユーザー設定に応じた出力には <tt>the_time( get_option( 'date_format' ) )</tt> を使う。
 +
* (適切であれば) 作成者名を表示する。
 +
* 投稿カテゴリーと投稿タグを表示する。
 +
* 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
 +
* コメントリストとコメントフォームを表示する。
 +
* [[テンプレートタグ/previous_post_link|<tt>previous_post_link()</tt>]] と [[テンプレートタグ/next_post_link|<tt>next_post_link()</tt>]] を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。
  
Take time to read through [[:en:Designing Themes for Public Release|Designing Themes for Public Release]], an article with good tips on preparing your Theme for the public.
+
<div id="Comments (comments.php)">
 +
==== コメント (''comments.php'') ====
 +
</div>
 +
* (投稿の)作成者によるコメントは、他のコメントと識別できるよう (違うハイライトするなど) にする。
 +
* 適切であれば Gravatar (グラバター。ユーザーのアバター) を表示する。 (訳注:Gravatar について詳しくは [[Gravatar_の使い方|Gravatar の使い方]]を参照)
 +
* スレッド形式のコメントをサポートする。
 +
* トラックバック/ピンバックを表示する。
 +
* [http://php.net/manual/en/function.function-exists.php <tt>function_exist()</tt>] を用いた再宣言エラーを回避するチェックを除き、このファイルには関数定義を含めないようにする。理想的には全ての関数は ''functions.php'' にあるべき。
  
<div id="References_and_Resources">
+
<div id="Search Results (search.php)">
 +
==== 検索結果表示 (''search.php'') ====
 +
</div>
 +
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか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]] を使って戻り値を取得する。例:
 +
<pre><h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2></pre>
 +
* 検索結果ページにも検索フォームを含めるのがよい。インクルードするには [[関数リファレンス/get_search_form|<tt>get_search_form()</tt>]] を使う。
 +
 
 +
<div id="JavaScript">
 +
=== JavaScript ===
 +
</div>
 +
* JavaScript コードはできる限り外部ファイルに記述する。
 +
* スクリプトをロードするには [[Function_Reference/wp_enqueue_script|<tt>wp_enqueue_script()</tt>]] /[[:en:Function_Reference/wp_enqueue_script|en]] を使う。
 +
* HTML ドキュメント (テンプレートファイル) に直接ロードする JavaScript は、古いブラウザ上でのエラーを回避する為に、CDATAセクションに記述する。
 +
<pre>
 +
<script type="text/javascript">
 +
/* <![CDATA[ */
 +
// content of your Javascript goes here
 +
/* ]]> */
 +
</script>
 +
</pre>
 +
 
 +
<div id="Screenshot">
 +
=== スクリーンショット ===
 +
</div>
 +
テーマのスクリーンショットを作ります。ファイル名は ''screenshot.png'' と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 880x660。実際には 387x290 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。
 +
 
 +
注:場合により、 .jpg、.jpeg、.gif は 有効な拡張子 でスクリーンショットのファイル形式です。 (推奨ではありません).
 +
 
 +
<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] を参照してください。
 +
 
 +
ユーザー[[Roles and Capabilities#Roles|権限グループ]]にテーマ設定画面へのアクセスを有効化する場合は、"switch_themes" ではなく "edit_theme_options" 権限を使います。但し、実際にユーザー権限でもテーマの変更を可能とする場合は除く。より詳しくは[[Roles and Capabilities#Capabilities|権限]]と[[Adding Administration Menus|管理メニューの追加]]を参照してください。
 +
 
 +
[[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]] も参照してください
 +
# [[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 Unit Test|テーマユニットテスト]]を通す。
 +
# HTMLとCSSをバリデートする。[[Validating a Website]] /[[:en:Validating a Website|en]]参照。
 +
# JavaScript エラーをチェックする。
 +
# 全てのターゲットブラウザでテストする。例えば、IE7、IE8、IE9、Safari、Chrome、Opera、Firefox、MIcrosoft Edge。
 +
# 無関係なコメントやデバッグ設定、TODO アイテムなどを取り除く。
 +
# テーマディレクトリにテーマを登録して公開する場合は、[[Theme Review|テーマレビュー]] を確認する。
 +
 
 +
<div id="Resources and References">
 
== 参考資料 ==
 
== 参考資料 ==
 
</div>
 
</div>
 +
<div id="Code Standards">
 +
=== コーディング基準 ===
 +
</div>
 +
* [[Know Your Sources]] /[[:en:Know Your Sources|en]]
 +
* [[WordPress Coding Standards|WordPress コーディング基準]]
 +
* [[CSS Coding Standards]] /[[:en:CSS Coding Standards|en]]
  
[[WordPress サイトデザイン リファレンス]]には、WordPress テーマおよびテンプレートファイルに関する資料の一覧があります。
+
<div id="Theme Design">
 +
=== テーマデザイン ===
 +
</div>
 +
* [[Site Design and Layout|WordPress サイトデザインリファレンス]]
 +
 
 +
<div id="CSS">
 +
=== CSS ===
 +
</div>
 +
* [[CSS]]
 +
* [[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 が生成するクラス]]
 +
 
 +
<div id="Templates">
 +
=== テンプレート ===
 +
</div>
 +
* [[Stepping Into Templates|テンプレート入門]]
 +
* [[Templates|テンプレート]]
 +
* [[Template Hierarchy|テンプレート階層]]
 +
* [[Template Tags|テンプレートタグ]]
 +
* [[The Loop]]
 +
* [[Conditional Tags|条件分岐タグ]]
 +
* [[Function Reference|関数リファレンス]]
 +
* [[I18n for WordPress Developers]]
 +
* [[Data Validation|データ検証]]
 +
 
 +
<div id="Functions listing">
 +
=== 関数リスト ===
 +
</div>
 +
* [[Function Reference|関数リファレンス]]
 +
 
 +
<div id="Testing and QA">
 +
=== テストと QA ===
 +
</div>
 +
* [[テーマユニットテスト]]
 +
* [[Validating a Website]] /[[:en:Validating a Website|en]]
 +
* [[CSS Fixing Browser Bugs]] /[[:en:CSS Fixing Browser Bugs|en]]
 +
* [[CSS Troubleshooting]] /[[:en:CSS Troubleshooting|en]]
 +
* [http://modern.ie/ modern.IE: for testing IE on different platforms with open-source tools]
 +
 
 +
<div id="Release & Promotion">
 +
 
 +
=== リリース & プロモーション ===
 +
</div>
 +
* [[Theme Review|テーマレビューのプロセス]]
 +
 
 +
<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://htmldog.com/ HTML Dog]
 +
* [http://generatewp.com/theme-support/ WordPress Theme Support Generator]
  
{{原文|Theme Development}}
+
{{原文|Theme Development|152914}} <!--  14:56, 29 July 2015‎ Jdgrimes 版 -->
  
 
{{DEFAULTSORT:てえまのさくせい}}
 
{{DEFAULTSORT:てえまのさくせい}}
 
[[Category:デザインとレイアウト]]
 
[[Category:デザインとレイアウト]]
 
[[Category:WordPress の開発]]
 
[[Category:WordPress の開発]]
 +
[[Category:UI Link]]
  
 +
[[bn:থিম ডেভলপমেন্ট]]
 
[[en:Theme Development]]
 
[[en:Theme Development]]
 +
[[es:Desarrollo de Temas]]
 +
[[ja:テーマの作成]]
 +
[[ko:Theme Development]]
 +
[[pt-br:Desenvolvimento de Temas]]
 +
[[ru:Создание тем]]
 +
[[zh-cn:主题开发]]
 +
[[zh-tw:主題開發]]

2015年7月30日 (木) 16:39時点における最新版


このページは最新情報に追随して更新されていません。英語版のテーマハンドブックコードリファレンスをご確認ください。翻訳にご協力くださる方はぜひご相談ください


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

目次

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

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

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

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

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

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

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

テーマの開発基準

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

テーマの構造

WordPress テーマは、WordPress のテーマディレクトリ (デフォルトでは 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">

テーマスタイルシート

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

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

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

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

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

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

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

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

テーマ関数ファイル

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

  • テーマスタイルシートとスクリプトのエンキュー。 wp_enqueue_scripts / enを参照。

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とfront.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 上で生成されるウェブページすべてに用いることができます。

もしくは、モジュール式のテンプレートファイルとして分割することもできます。別のテンプレートファイルを用意しなかった場合、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_enqueue_scripts
テーマ機能ファイルで使用されます。外部スクリプトとスタイルシートをロードするために使用します。
wp_head()
テーマの header.php にある <head> 要素内に記述する。
プラグインによるこのフックの使用例:JavaScript コードを挿入する。
wp_footer()
テーマの footer.phpの、</body> タグ直前に記述する。
プラグインによるこのフックの使用例:ページが読み込まれる最後に実行する PHP のコードをフッター下に挿入する。Google Analytics などのアクセス解析コードの挿入によく使われる。
wp_meta()/en
一般的には、テーマのメニューまたはサイドバー (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) を参照。
  • フィードリンクを追加するには Automatic Feed Links /en を使う。
  • </head> 終了タグよりも前に wp_head() を挿入する。プラグインはこのアクションフックを使ってスクリプトやスタイルシート、その他の機能を追加する。
  • ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。 代わりにテーマ関数のアクションフック wp_enqueue_scripts を使う。

下記は、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.png と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 880x660。実際には 387x290 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。

注:場合により、 .jpg、.jpeg、.gif は 有効な拡張子 でスクリーンショットのファイル形式です。 (推奨ではありません).

テーマ設定

テーマは テーマ設定画面 /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、MIcrosoft Edge。
  7. 無関係なコメントやデバッグ設定、TODO アイテムなどを取り除く。
  8. テーマディレクトリにテーマを登録して公開する場合は、テーマレビュー を確認する。

参考資料

コーディング基準

テーマデザイン

CSS

テンプレート

関数リスト

テストと QA

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

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

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

bn:থিম ডেভলপমেন্ট