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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(5 版)
(序文がくどいのを修正、赤リンクを日英併記に変更、2008年4月22日 (火) 16:43 Lloydbudd 版反映/未翻訳節あり)
1行目: 1行目:
 
{{テーマ・テンプレートガイド|テンプレート}}
 
{{テーマ・テンプレートガイド|テンプレート}}
このページでは、あなた用の WordPress テーマの開発やデザインについて説明します。テーマのインストールと使い方について知りたいときは、[[:ja:Using Themes|テーマの使い方]] をおさらいしましょう。以下は、テーマの切り替え方や新しいテーマの入手方法ではなく、テーマを構築するためのコードの記述についての技術的な内容であり、[[:ja:Using Themes|テーマの使い方]]とは異なります。
+
このページでは、自分用の WordPress テーマの作成とデザインについて説明します。テーマを構築するためのコードの記述についての技術的な内容ですが、テーマの大まかな構造を知っておくと、テーマを少しカスタマイズしたいときにも役立ちます。
 +
テーマの使い方、新しいテーマの入手方法・切り替え方について知りたいときは、[[テーマの使い方]]をおさらいしましょう。
  
You may wish to develop WordPress Themes for your own use or [[:en:Designing Themes for Public Release|for distribution]].
+
これを読めば、きっと自分のオリジナルテーマや[[Designing Themes for Public Release|配布用テーマ]]/[[:en:Designing Themes for Public Release|en]]を作成したくなることでしょう。
  
 
<div id="Why_WordPress_Themes">
 
<div id="Why_WordPress_Themes">
11行目: 12行目:
  
 
* To create your own unique WordPress site look
 
* To create your own unique WordPress site look
* 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 take advantage of [[テンプレート入門|templates]], [[テンプレートタグ|template tags]], and [[The Loop in Action|the WordPress Loop]]/[[:en:The Loop in Action|en]] 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 provide alternative templates for specific site features, such as [[Category Templates|category pages]]/[[:en:Category Templates|en]] 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.
+
* To quickly switch between two site layouts, or to take advantage of a [[プラグイン|Theme or style switcher]] to allow users to change the look of your site.
 
* To design WordPress Theme(s) so that others may enjoy your designs through public release.
 
* To design WordPress Theme(s) so that others may enjoy your designs through public release.
  
29行目: 30行目:
 
* It's creative.
 
* It's creative.
 
* It's fun (most of the time).
 
* 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!)
+
* If you [[Designing Themes for Public_Release|release it to the public]]/[[:en:Designing Themes for Public_Release|en]], 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">
51行目: 52行目:
 
</div>
 
</div>
  
<code>style.css</code> は、テーマの「スタイルシート」情報に加えて、コメントの形式で'''必ず'''「テーマについての明細」を記述していなければなりません。管理パネルの[[管理パネル#Presentation - Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ明細が別のテーマのコメントヘッダにあってはなりません。既存のテーマを複製してあなた用のテーマを作るときは、最初にこの情報を変更してください。
+
<code>style.css</code> は、テーマの「スタイルシート」情報に加えて、コメントの形式で'''必ず'''「テーマについての明細」を記述していなければなりません。管理パネルの[[管理パネル#Design_-_Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ明細が別のテーマのコメントヘッダにあってはなりません。既存のテーマを複製してあなた用のテーマを作るときは、最初にこの情報を変更してください。
 
次の例は、テーマ「Rose」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
 
次の例は、テーマ「Rose」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
  
69行目: 70行目:
 
最も単純なテーマには、<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」の親テーマとなります。'''注''': 「親テーマの指定」は、そのテーマから''全ての''テンプレートファイルを継承することに注意。子テーマディレクトリ内にテンプレートファイルがあっても無視されます。
 
最も単純なテーマには、<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」の親テーマとなります。'''注''': 「親テーマの指定」は、そのテーマから''全ての''テンプレートファイルを継承することに注意。子テーマディレクトリ内にテンプレートファイルがあっても無視されます。
  
<code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに [[管理パネル]] > [[管理パネル#Presentation_-_Change_the_Look_of_your_Blog|表示]]画面に表示させるために必要なものです。
+
<code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに [[管理パネル]] > [[管理パネル#Design - Change the Look of your Blog|デザイン]] > [[Design Themes SubPanel|テーマ]]/[[:en:Design Themes SubPanel|en]] 画面に表示させるために必要なものです。
  
 
'''注''': 親テーマを定義するとき、コメントヘッダの <code>Template:</code> セクションには、スタイルの'''ディレクトリ名'''を書かなければなりません。例えば、親テーマとして WordPress Default テーマを使う場合は、<code>Template: WordPress Default</code> ではなく、このテーマのディレクトリ名で <code>Template: default</code> と書きます。
 
'''注''': 親テーマを定義するとき、コメントヘッダの <code>Template:</code> セクションには、スタイルの'''ディレクトリ名'''を書かなければなりません。例えば、親テーマとして WordPress Default テーマを使う場合は、<code>Template: WordPress Default</code> ではなく、このテーマのディレクトリ名で <code>Template: default</code> と書きます。
81行目: 82行目:
 
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置
 
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置
  
「Default」WordPress テーマには、関数と管理画面を定義する <code>functions.php</code> ファイルが入っているので、見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[:en:Plugins Resources|Plugins Resources]] リストを見るのが一番です。
+
「Default」WordPress テーマには、関数と管理画面を定義する <code>functions.php</code> ファイルが入っているので、見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[Writing a Plugin#Programming Your Plugin|プラグインの作成]]/[[:en:Writing a Plugin#Programming Your Plugin|en]] リストを見るのが一番です。
 +
<!-- 英語版では [[Plugins Resources]] list だった箇所が [[Function Reference]] list へのリンクに変更されたのですが、[[Writing a Plugin]] または [[プラグイン API]] のほうがよいように思います。 -->
  
 
<div id="Theme_Template_Files">
 
<div id="Theme_Template_Files">
111行目: 113行目:
 
これらのモジュールテンプレートファイル使うには、最終的に生成するウェブページ内に表示したいユニットを読み込む/''取得(get)''するためのマスターファイル <code>index.php</code> 内に、テンプレートタグを書きます。
 
これらのモジュールテンプレートファイル使うには、最終的に生成するウェブページ内に表示したいユニットを読み込む/''取得(get)''するためのマスターファイル <code>index.php</code> 内に、テンプレートタグを書きます。
  
* ヘッダ部の読み込みには <code>[[:ja:Include Tags#The Header Template|get_header()]]</code> テンプレートタグを使用。
+
* ヘッダ部の読み込みには <code>[[インクルードタグ#The Header Template|get_header()]]</code> テンプレートタグを使用。
* サイドバーの読み込みには <code>[[:ja:Include Tags#The Sidebar Template|get_sidebar()]]</code> テンプレートタグを使用。
+
* サイドバーの読み込みには <code>[[インクルードタグ#The Sidebar Template|get_sidebar()]]</code> テンプレートタグを使用。
* フッタ部の読み込みには <code>[[:ja:Include Tags#The Footer Template|get_footer()]]</code> テンプレートタグを使用。
+
* フッタ部の読み込みには <code>[[インクルードタグ#The Footer Template|get_footer()]]</code> テンプレートタグを使用。
  
 
''include'' の使用例:
 
''include'' の使用例:
127行目: 129行目:
 
</div>
 
</div>
  
WordPress では、各''クエリ''(要求)タイプによって異なる[[テンプレート入門|テンプレート]]をロードできます。これには二つの方法があります。内蔵の [[テンプレート階層]]の一環とするものと、テンプレートファイルの[[:ja:The Loop|ループ]]内で[[:ja:Conditional Tags|条件タグ]]を用いる方法です。
+
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>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> に替わって使われます(カテゴリID は、サイト管理者としてログイン中に [[管理パネル#Manage_-_Change_your_content|管理]](Manage) > [[管理パネル#Categories|カテゴリー]](Categories)で確認できます)。この処理の動作の詳細は、[[:en:Category Templates|カテゴリテンプレート]] をご覧ください。
+
テンプレート階層では、さらに特定の用途の、例えば <code>category-6.php</code> のようなファイルを取得できます。-- このファイルは、カテゴリID 6 のページを生成する際に <code>category.php</code> に替わって使われます(カテゴリID は、サイト管理者としてログイン中に [[管理パネル#Manage_-_Change_your_content|管理]](Manage) > [[管理パネル#Categories|カテゴリー]](Categories)で確認できます)。この処理の動作の詳細は、[[Category Templates|カテゴリテンプレート]]/[[:en:Category Templates|en]] をご覧ください。
  
[[テンプレート階層]]よりもさらにテンプレートファイルの制御が必要な場合、[[:ja:Conditional Tags|条件タグ]]が使えます。条件タグは通常、ある特定の条件に当てはまるかを[[:en:The_Loop_in_Action|WordPress ループ]]内でチェックしてから、その条件に基づいて、特定のテンプレートをロードしたり画面に特定のテキストを配置したりします。
+
[[テンプレート階層]]よりもさらにテンプレートファイルの制御が必要な場合、[[Conditional Tags|条件タグ]]が使えます。条件タグは通常、ある特定の条件に当てはまるかを[[The Loop in Action|WordPress ループ]]/[[:en:The Loop in Action|en]] 内でチェックしてから、その条件に基づいて、特定のテンプレートをロードしたり画面に特定のテキストを配置したりします。
  
 
例えば、ある特定のカテゴリに属する記事にのみ独自のスタイルを生成するには<!-- to generate a distinctive style sheet とあるが、CSS を指しているわけではないようなので、スタイルとしておく -->、次のようなコードになります。(訳注: 一つ目の例は、原文で <code>is_category(9)</code> となっているが、単体記事表示時であれば <code>in_category()</code> を使う。)
 
例えば、ある特定のカテゴリに属する記事にのみ独自のスタイルを生成するには<!-- to generate a distinctive style sheet とあるが、CSS を指しているわけではないようなので、スタイルとしておく -->、次のようなコードになります。(訳注: 一つ目の例は、原文で <code>is_category(9)</code> となっているが、単体記事表示時であれば <code>in_category()</code> を使う。)
147行目: 149行目:
 
?></pre>
 
?></pre>
  
あるいは、クエリを用いて次のようにします。([[テンプレートタグ/in category|参考]])
+
あるいは、クエリを用いて次のようにします。([[テンプレートタグ/in_category|参考]])
  
 
<pre><?php
 
<pre><?php
158行目: 160行目:
 
?></pre>
 
?></pre>
  
どちらのコードの例も、表示しようとしている記事のカテゴリに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。 -- 全てのオプションについては  [[:ja:Conditional Tags|条件タグ]]のページをご覧ください。
+
どちらのコードの例も、表示しようとしている記事のカテゴリに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。 -- 全てのオプションについては  [[Conditional Tags|条件タグ]]のページをご覧ください。
  
 
<div id="Media_Icons">
 
<div id="Media_Icons">
164行目: 166行目:
 
</div>
 
</div>
  
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.
+
'''This feature is [http://trac.wordpress.org/ticket/6751 currently broken in WordPress 2.5].'''
  
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>.)
+
Wordpress uses media icons to represent [[Using Image and File Attachments|attachment files]]/[[:en:Using Image and File Attachments|en]] on your blog and in the Admin interface, if those icons are available.
  
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>):
+
It looks for image files named by media type in the <code>images</code> directory of the current theme. (As of Wordpress 2.2, the default theme comes with only one media icon, <code>audio.jpg</code>.)
 +
 
 +
For example, for an attachment of [[Wikipwdia:ja:MIME|MIME type]]<!-- [http://en.wikipedia.org/wiki/Internet_media_type MIME type] --> <code>audio/mpeg</code>, Wordpress would look for an icon file at these locations, stopping after the first match (see <code>[[関数リファレンス/wp_mime_type_icon|wp_mime_type_icon]]</code>/[[:en:Function Reference/wp_mime_type_icon|en]]):
  
 
# <var>my_theme</var>/images/audio.jpg
 
# <var>my_theme</var>/images/audio.jpg
192行目: 196行目:
 
;<code>home.php</code>: ホームページテンプレート。
 
;<code>home.php</code>: ホームページテンプレート。
 
;<code>single.php</code>: 単体記事テンプレート。個別記事が要求(クエリ)されたときに使用。このクエリテンプレートが存在しないときは <code>index.php</code> が使われる。この他のクエリテンプレートも同様。
 
;<code>single.php</code>: 単体記事テンプレート。個別記事が要求(クエリ)されたときに使用。このクエリテンプレートが存在しないときは <code>index.php</code> が使われる。この他のクエリテンプレートも同様。
;<code>page.php</code>: ページテンプレート。特定の[[:ja:Pages|ページ]]が要求されたときに使用。
+
;<code>page.php</code>: ページテンプレート。特定の[[Pages|ページ]]が要求されたときに使用。
;<code>category.php</code>: [[:en:Category Templates|カテゴリテンプレート]]。あるカテゴリが要求されたときに使用。
+
;<code>category.php</code>: [[Category Templates|カテゴリテンプレート]]/[[:en:Category Templates|en]]。あるカテゴリが要求されたときに使用。
;<code>author.php</code>: [[:en:Author Templates|著者テンプレート]]。ある著者が要求されたときに使用。
+
;<code>author.php</code>: [[Author Templates|著者テンプレート]]/[[:en:Author Templates|en]]。ある著者が要求されたときに使用。
 
;<code>date.php</code>: 日時テンプレート。ある日付または時刻が要求されたときに使用。年・月・日・時・分・秒
 
;<code>date.php</code>: 日時テンプレート。ある日付または時刻が要求されたときに使用。年・月・日・時・分・秒
 
;<code>archive.php</code>: アーカイブテンプレート。あるカテゴリ・著者・日付が要求されたときに使用。このテンプレートは、各クエリ種類に対応する <code>category.php</code>、<code>author.php</code>、<code>date.php</code> によって無効となる。
 
;<code>archive.php</code>: アーカイブテンプレート。あるカテゴリ・著者・日付が要求されたときに使用。このテンプレートは、各クエリ種類に対応する <code>category.php</code>、<code>author.php</code>、<code>date.php</code> によって無効となる。
 
;<code>search.php</code>: 検索結果テンプレート。ある検索が実行されたときに使用。
 
;<code>search.php</code>: 検索結果テンプレート。ある検索が実行されたときに使用。
;<code>404.php</code>: '''[[:en:Creating_an_Error_404_Page|404 Not Found]]''' テンプレート。WordPress が要求に合う記事やページを見つけられなかったときに使用。
+
;<code>404.php</code>: '''[[Creating an Error 404 Page|404 Not Found]]'''/[[:en:Creating an Error 404 Page|en]] テンプレート。WordPress が要求に合う記事やページを見つけられなかったときに使用。
  
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[: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> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
+
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[Conditional Tags|条件タグ]](別名 <code>is_*()</code> 関数)が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、単体記事が表示される際に <code>[[Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
  
 
<div id="Referencing_Files_From_a_Template">
 
<div id="Referencing_Files_From_a_Template">
215行目: 219行目:
 
定数 <code>TEMPLATEPATH</code> は、現在のテーマのテンプレートディレクトリへの[[用語集#絶対パス|絶対パス]](末尾の / を除く)への参照です。
 
定数 <code>TEMPLATEPATH</code> は、現在のテーマのテンプレートディレクトリへの[[用語集#絶対パス|絶対パス]](末尾の / を除く)への参照です。
  
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:   
+
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 <code>images/</code> directory in your Theme, you need only specify this relative directory in the CSS, like so:   
  
 
<pre style="font-size: 0.9em">h1 { background-image: URL(images/my_background.jpg); }</pre>
 
<pre style="font-size: 0.9em">h1 { background-image: URL(images/my_background.jpg); }</pre>
225行目: 229行目:
 
</div>
 
</div>
  
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.
+
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 <code>template_redirect</code> [[プラグイン API#Current Hooks For Actions|action hook]].  More information about creating plugins can be found in the [[プラグイン API|Plugin API]] reference.
  
 
<div id="Plugin_API_Hooks">
 
<div id="Plugin_API_Hooks">
234行目: 238行目:
  
 
; wp_head  
 
; wp_head  
: 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.  
+
: Goes in the [[用語集#HTML|HTML]] <code><nowiki><head></nowiki></code> element of a theme; <code>header.php</code> template. Example plugin use: add javascript code.  
  
: Usage: <tt><nowiki><?php do_action('wp_head'); ?></nowiki></tt>  
+
: Usage: <code><nowiki><?php do_action('wp_head'); ?></nowiki></code>  
:''-or-''&nbsp; <tt><nowiki><?php wp_head(); ?></nowiki></tt>
+
:''-or-''&nbsp; <code><nowiki><?php wp_head(); ?></nowiki></code>
  
 
; wp_footer
 
; wp_footer
: 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.
+
: Goes in the "footer" of a theme; <code>footer.php</code> template. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer.
  
: Usage: <tt><nowiki><?php do_action('wp_footer'); ?></nowiki></tt>  
+
: Usage: <code><nowiki><?php do_action('wp_footer'); ?></nowiki></code>  
:''-or-''&nbsp; <tt><nowiki><?php wp_footer(); ?></nowiki></tt>
+
:''-or-''&nbsp; <code><nowiki><?php wp_footer(); ?></nowiki></code>
  
 
; wp_meta  
 
; wp_meta  
: 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.
+
: Typically goes in the <code><nowiki><li>Meta</li></nowiki></code> section of a theme's menu or sidebar; <code>sidebar.php</code> template. Example plugin use: include a rotating advertisement or a tag cloud.
  
: Usage: <tt><nowiki><?php do_action('wp_meta'); ?></nowiki></tt>  
+
: Usage: <code><nowiki><?php do_action('wp_meta'); ?></nowiki></code>  
:''-or-''&nbsp; <tt><nowiki><?php wp_meta(); ?></nowiki></tt>
+
:''-or-''&nbsp; <code><nowiki><?php wp_meta(); ?></nowiki></code>
  
 
; comment_form  
 
; comment_form  
: 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.
+
: Goes in <code>comments.php</code> and <code>comments-popup.php</code>, directly before the comment form's closing tag (<code><nowiki></form></nowiki></code>). Example plugin use: display a comment preview.
  
: Usage: <tt><nowiki><?php do_action('comment_form', $post->ID); ?></nowiki></tt>  
+
: Usage: <code><nowiki><?php do_action('comment_form', $post->ID); ?></nowiki></code>  
  
 
For a real world usage example, you'll find these plugin hooks included in the default theme's templates.
 
For a real world usage example, you'll find these plugin hooks included in the default theme's templates.
265行目: 269行目:
 
# Indicate precisely what your Theme and template files will achieve.
 
# Indicate precisely what your Theme and template files will achieve.
 
# Indicate deficiencies in your Themes, if any.
 
# Indicate deficiencies in your Themes, if any.
# 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.  
+
# Clearly reference any special modifications in [[Commenting Code|comments]]/[[:en:Commenting Code|en]] within the template and style sheet files. Add comments to modifications, template sections, and CSS styles, especially those which cross template files.  
 
# 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.
 
# 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.
+
# Try and test your Theme [[CSS Fixing Browser Bugs|across browsers]]/[[:en:CSS Fixing Browser Bugs|en]] to catch at least a few of the [[CSS Troubleshooting|problems]]/[[:en:CSS Troubleshooting|en]] the users of the Theme may find later.
 
# Provide contact information (web page or email), if possible, for support information and questions.
 
# Provide contact information (web page or email), if possible, for support information and questions.
  
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.
+
Take time to read through [[Designing Themes for Public Release|Designing Themes for Public Release]]/[[:en:Designing Themes for Public Release|en]], an article with good tips on preparing your Theme for the public.
  
 
<div id="References_and_Resources">
 
<div id="References_and_Resources">
278行目: 282行目:
 
[[WordPress サイトデザイン リファレンス]]には、WordPress テーマおよびテンプレートファイルに関する資料の一覧があります。
 
[[WordPress サイトデザイン リファレンス]]には、WordPress テーマおよびテンプレートファイルに関する資料の一覧があります。
  
{{原文|Theme Development}}
+
{{原文|Theme Development|56595}}<!-- 2008年4月22日 (火) 16:43 Lloydbudd 版 -->
 +
 
 +
{{NeedTrans|一部}}
  
 
{{DEFAULTSORT:てえまのさくせい}}
 
{{DEFAULTSORT:てえまのさくせい}}

2008年5月22日 (木) 22:36時点における版


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


このページでは、自分用の WordPress テーマの作成とデザインについて説明します。テーマを構築するためのコードの記述についての技術的な内容ですが、テーマの大まかな構造を知っておくと、テーマを少しカスタマイズしたいときにも役立ちます。 テーマの使い方、新しいテーマの入手方法・切り替え方について知りたいときは、テーマの使い方をおさらいしましょう。

これを読めば、きっと自分のオリジナルテーマや配布用テーマ/enを作成したくなることでしょう。

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?

  • To create your own unique WordPress site look
  • To take advantage of templates, template tags, and the WordPress Loop/en to generate different web page results and looks.
  • To provide alternative templates for specific site features, such as category pages/en and search result pages.
  • To quickly switch between two site layouts, or to take advantage of a Theme or style switcher to allow users to change the look of your site.
  • 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.
  • It allows for customization of the presentation and web page results unique to that Theme.
  • 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.

Why should you build your own WordPress Theme? That's the real question.

  • It's an opportunity to learn more about CSS, HTML/XHTML, and PHP.
  • It's an opportunity to put your expertise with CSS, HTML/XHTML, and PHP to work.
  • It's creative.
  • It's fun (most of the time).
  • If you release it to the public/en, you can feel good that you shared and gave something back to the WordPress Community (okay, bragging rights!)

テーマの構造

WordPress テーマは、wp-content/themes/ の中のサブディレクトリに存在します。例えば、「test」というテーマは、おそらく wp-content/themes/test/ ディレクトリにあります。テーマのサブディレクトリには、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル(functions.php)、画像といった、テーマの全てが入っています。

ダウンロードした WordPress には、「Classic」と「Default」という二つのテーマが同梱されています。この二つのテーマでは、ウェブページの表示内容や外観を生成するために、異なる機能やタグを使っています。あなた用のテーマファイルの構築方法をよりよく理解するために、これらのテーマを詳しく見ていきましょう。

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

  1. style.css -- テーマの情報 および ウェブページの外観を制御するスタイルシート
  2. functions.php -- オプションの関数ファイル
  3. テンプレートファイル -- ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御

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

テーマスタイルシート

style.css は、テーマの「スタイルシート」情報に加えて、コメントの形式で必ず「テーマについての明細」を記述していなければなりません。管理パネルのテーマ設定ダイアログで問題が生じるので、同じ明細が別のテーマのコメントヘッダにあってはなりません。既存のテーマを複製してあなた用のテーマを作るときは、最初にこの情報を変更してください。 次の例は、テーマ「Rose」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。

/*   
Theme Name: Rose
Theme URI: テーマのホームサイトの URI
Description: a-brief-description
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義(オプション)
Version: バージョン番号(オプション)
.
コメント/利用許諾の記述(あれば)
.
*/

最も単純なテーマには、style.css ファイルと、あれば画像だけが含まれます。このようなテーマを作成するには、style.css のヘッダコメント内の Template: 行を編集し、このテーマ用に継承させたいテンプレートのセットを指定する必要があります。例えば、テーマ「Rose」に、別の「test」というテーマからテンプレートを継承させたい場合、Rose の style.css の冒頭のコメントに Template: test と書きます。すると、「test」は、wp-content/themes/Rose ディレクトリにある style.css ファイルと付属画像のみからなる「Rose」の親テーマとなります。: 「親テーマの指定」は、そのテーマから全てのテンプレートファイルを継承することに注意。子テーマディレクトリ内にテンプレートファイルがあっても無視されます。

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

: 親テーマを定義するとき、コメントヘッダの Template: セクションには、スタイルのディレクトリ名を書かなければなりません。例えば、親テーマとして WordPress Default テーマを使う場合は、Template: WordPress Default ではなく、このテーマのディレクトリ名で Template: default と書きます。

関数ファイル

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

  • テーマ内の複数のテンプレートファイルで使う関数の定義
  • 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置

「Default」WordPress テーマには、関数と管理画面を定義する functions.php ファイルが入っているので、見本にするといいでしょう。functions.php は基本的にプラグインのように動作するので、このファイルでできることの情報は、プラグインの作成/en リストを見るのが一番です。

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

テンプレートは、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テーマの部品として定義できる様々なテンプレートを見てみましょう。

WordPress では、ウェブログの各種の表示を個別のテンプレートとして定義できるようになっていますが、ウェブログ全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、テンプレート階層に基づいて選ばれ、生成されます。テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、ウェブログとして生成・表示する全てのページ用のテンプレートとして、index.php というテンプレートファイル一つだけを使うこともできます。通常は、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。

基本的なテンプレート

最少 2ファイル構成の WordPress テーマ:

  • style.css
  • index.php

両ファイルはそのテーマのディレクトリ内に置きます。index.php テンプレートファイルはとても融通が利きます。これは、参照するヘッダ・サイドバー・フッタ・コンテンツ・カテゴリ・アーカイブ・検索結果・エラーほか、サイト上で生成されるウェブページの全てに用いることができます。よく使われる部分の担当毎に、モジュール式のテンプレートファイルとして分割することもできます。 あなたが他にテンプレートファイルを用意しなければ、WordPress は内蔵のデフォルトファイルを使います。例えば、comments.phpcomments-popup.php テンプレートファイルがないときは、WordPress は テンプレート階層に従って自動的に wp-comments.phpwp-comments-popup.php を使います。これらのデフォルトテンプレートがあなたのテーマに合わなければ、自分で用意したいと思うことでしょう。通常、分割に用いる基本的なファイルは次のとおりです(テーマのディレクトリに加えます)。

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

これらのモジュールテンプレートファイル使うには、最終的に生成するウェブページ内に表示したいユニットを読み込む/取得(get)するためのマスターファイル index.php 内に、テンプレートタグを書きます。

  • ヘッダ部の読み込みには get_header() テンプレートタグを使用。
  • サイドバーの読み込みには get_sidebar() テンプレートタグを使用。
  • フッタ部の読み込みには get_footer() テンプレートタグを使用。

include の使用例:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

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

WordPress では、各クエリ(要求)タイプによって異なるテンプレートをロードできます。これには二つの方法があります。内蔵の テンプレート階層の一環とするものと、テンプレートファイルのループ内で条件タグを用いる方法です。

テンプレート階層を使うには、通常、index.php を自動的に無効にする専用のテンプレートファイルが必要です。例えば、テーマに category.php というテンプレートがあり、カテゴリページが要求されると、index.php の替わりに category.php がロードされます。category.php が存在しなければ、従来どおり index.php が使われます。

テンプレート階層では、さらに特定の用途の、例えば category-6.php のようなファイルを取得できます。-- このファイルは、カテゴリID 6 のページを生成する際に category.php に替わって使われます(カテゴリID は、サイト管理者としてログイン中に 管理(Manage) > カテゴリー(Categories)で確認できます)。この処理の動作の詳細は、カテゴリテンプレート/en をご覧ください。

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

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

<?php
if (is_category(9)) {
   // カテゴリ 9 に当てはまるとき
   include(TEMPLATEPATH . '/single2.php');
} else {
   // 他のカテゴリの記事のとき
   include(TEMPLATEPATH . '/single1.php');
}
?>

あるいは、クエリを用いて次のようにします。(参考

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

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

メディアアイコン

This feature is currently broken in WordPress 2.5.

Wordpress uses media icons to represent attachment files/en on your blog and in the Admin interface, if those icons are available.

It looks for image files named by media type in the images directory of the current theme. (As of Wordpress 2.2, the default theme comes with only one media icon, audio.jpg.)

For example, for an attachment of MIME type audio/mpeg, Wordpress would look for an icon file at these locations, stopping after the first match (see wp_mime_type_icon/en):

  1. my_theme/images/audio.jpg
  2. my_theme/images/audio.gif
  3. my_theme/images/audio.png
  4. my_theme/images/mpeg.jpg
  5. my_theme/images/mpeg.gif
  6. my_theme/images/mpeg.png
  7. my_theme/images/audio_mpeg.jpg
  8. my_theme/images/audio_mpeg.gif
  9. my_theme/images/audio_mpeg.png

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

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

style.css
メインのスタイルシート。テーマにはこのファイルが必須で、テーマのヘッダ情報を含まなければなりません。
index.php
メインテンプレート。(親テーマのテンプレートを利用するのではなく)このテーマ自身のテンプレートを設けるなら index.php は必須。
comments.php
コメントテンプレート。存在しなければデフォルトテーマの comments.php が使われる。
comments-popup.php
ポップアップコメントテンプレート。存在しなければデフォルトテーマの comments-popup.php が使われる。
home.php
ホームページテンプレート。
single.php
単体記事テンプレート。個別記事が要求(クエリ)されたときに使用。このクエリテンプレートが存在しないときは index.php が使われる。この他のクエリテンプレートも同様。
page.php
ページテンプレート。特定のページが要求されたときに使用。
category.php
カテゴリテンプレート/en。あるカテゴリが要求されたときに使用。
author.php
著者テンプレート/en。ある著者が要求されたときに使用。
date.php
日時テンプレート。ある日付または時刻が要求されたときに使用。年・月・日・時・分・秒
archive.php
アーカイブテンプレート。あるカテゴリ・著者・日付が要求されたときに使用。このテンプレートは、各クエリ種類に対応する category.phpauthor.phpdate.php によって無効となる。
search.php
検索結果テンプレート。ある検索が実行されたときに使用。
404.php
404 Not Found/en テンプレート。WordPress が要求に合う記事やページを見つけられなかったときに使用。

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

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

WordPress のデフォルトテーマ(WordPress 1.2 用の Michael Heilemann の Kubrick レイアウトが元)は、テンプレート上へのクエリの配置方法のよい見本です。

コード <?php bloginfo('template_directory'); ?> は、テンプレートの出力にテンプレートディレクトリの URL を挿入します。テーマ内のファイルを参照するために、この出力にさらに URI 情報を付け足すこともできます(例: <?php bloginfo('template_directory'); ?>/style.css とすると、http://www.example.com/wordpress/wp-content/themes/default/style.css と出力)。

コード <?php bloginfo('stylesheet_directory'); ?> は、現在のテーマのスタイルシートが入っているディレクトリの URL を、テンプレートの出力に挿入します。テーマ内のファイル、具体的には、スタイルシートに使うファイルを参照するために、この出力にさらに URI 情報を付け足すことができます。 (訳注: 'stylesheet_directory' パラメータは WordPress 2.3.1 から非推奨です。)

定数 TEMPLATEPATH は、現在のテーマのテンプレートディレクトリへの絶対パス(末尾の / を除く)への参照です。

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 images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:

h1 { background-image: URL(images/my_background.jpg); }

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.

Defining Custom Templates

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 template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.

プラグイン API フック

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 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:

wp_head
Goes in the HTML <head> element of a theme; header.php template. Example plugin use: add javascript code.
Usage: <?php do_action('wp_head'); ?>
-or-  <?php wp_head(); ?>
wp_footer
Goes in the "footer" of a theme; footer.php template. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer.
Usage: <?php do_action('wp_footer'); ?>
-or-  <?php wp_footer(); ?>
wp_meta
Typically goes in the <li>Meta</li> section of a theme's menu or sidebar; sidebar.php template. Example plugin use: include a rotating advertisement or a tag cloud.
Usage: <?php do_action('wp_meta'); ?>
-or-  <?php wp_meta(); ?>
comment_form
Goes in comments.php and comments-popup.php, directly before the comment form's closing tag (</form>). Example plugin use: display a comment preview.
Usage: <?php do_action('comment_form', $post->ID); ?>

For a real world usage example, you'll find these plugin hooks included in the default theme's templates.

テーマ開発の総合ガイドライン

Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):

  1. Indicate precisely what your Theme and template files will achieve.
  2. Indicate deficiencies in your Themes, if any.
  3. Clearly reference any special modifications in comments/en within the template and style sheet files. Add comments to modifications, template sections, and CSS styles, especially those which cross template files.
  4. 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.
  5. Try and test your Theme across browsers/en to catch at least a few of the problems/en the users of the Theme may find later.
  6. Provide contact information (web page or email), if possible, for support information and questions.

Take time to read through Designing Themes for Public Release/en, an article with good tips on preparing your Theme for the public.

参考資料

WordPress サイトデザイン リファレンスには、WordPress テーマおよびテンプレートファイルに関する資料の一覧があります。

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

このページ「テーマの作成」は一部未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています