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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(en:Theme Development 14:01, 6 May 2007 JHodgdon の版)
 
(テーマ関数ファイル: en link)
 
(11人の利用者による、間の106版が非表示)
1行目: 1行目:
__TOC__
+
{{テーマ・テンプレートガイド|テンプレート}}
The following article is about developing or designing your own WordPress Theme.  If you wish to learn more about how to install and use Themes, review the documentation regarding [[Using Themes]]. This topic differs from [[Using Themes]] because it discusses the technical aspects of writing code to build your own Themes rather than how to activate Themes or where to obtain new Themes.
+
このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、[[テーマの使い方]]をおさらいしましょう。[[テーマの使い方]]ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。
 +
<div id="Why WordPress Themes">
 +
==なぜ、WordPress テーマを作るの?==
 +
</div>
 +
WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。
  
You may wish to develop WordPress Themes for your own use or [[Designing Themes for Public Release|for distribution]]
+
自分で使う為や、クライアントに納める為、[[テーマレビュー|WordPress テーマの公式レポジトリに登録]]する為などには独自テーマを作ることもできます。他にはどの様な理由があるでしょうか?
==Why WordPress Themes==
+
  
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 サイトを作るため
 +
* [[テンプレート入門|テンプレート]]、[[テンプレートタグ|テンプレートタグ]]、[[The_Loop|ループ]]<!-- [[:en:The Loop in Action|en]]-->を活用し、異なったコンテンツやデザインのサイトを作るため。
 +
* 特定のサイト機能のための代替テンプレートを提供するため。例えば[[Category Templates|カテゴリーページ]]や検索結果ページなど。
 +
* 複数のサイトレイアウトを入れ替えるため、または[[プラグイン|テーマ (スタイル) スイッチャー]]を活用して、サイト管理者がサイトの外観を変えられるようにするため。
  
* To create your own unique WordPress site look
+
WordPress テーマにはたくさんの利点もあります。
* To take advantage of [[Stepping Into Templates|templates]], [[Template Tags|template tags]], and [[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 [[Category_Templates|category pages]] and search result pages.
+
* To quickly switch between two site layouts, or to take advantage of a [[Plugins/Styles|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.
+
* スタイルと[[テンプレート入門|テンプレートファイル]]をシステムファイル (WordPress コア) から分離し、サイトの外観に大きな影響を及ぼすことなくアップグレードできるようになる。
 +
* カスタマイズすることにより、サイトに独自の機能性を持たせることができる。
 +
* サイトの外観(見た目とレイアウト)を素早く変更できる。
 +
* サイト管理者が CSS、HTML、PHPを知らなくてもかっこいいサイトを持てる。
  
* It separates the presentation styles and [[Stepping Into Templates|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.
+
* CSS、HTML、PHP についてもっと良く知る良い機会だから。
 +
* CSS、HTML、PHP についての知識を実際に使ってみる良い機会だから。
 +
* クリエイティブな作業だから。
 +
* (たいていの場合は) 楽しいから。
 +
* [[Theme_Review|公開テーマ]]を作成すれば、[[WordPress への協力|WordPress コミュニティ]]と何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。
  
* It's an opportunity to learn more about CSS, HTML/XHTML, and PHP.
+
<div id="Theme Development Standards">
* It's an opportunity to put your expertise with CSS, HTML/XHTML, and PHP to work.
+
<div id="Theme_Development_Standards">
* It's creative.
+
== テーマの開発基準 ==
* It's fun (most of the time).
+
</div>
* If you [[Designing Themes for Public_Release|release it to the public]], you can feel good that you shared and gave something back to the [[Contributing_to_WordPress|WordPress Community]] (okay, bragging rights!)
+
WordPress テーマは以下の基準に則ってコーディングする必要があります。
  
==Anatomy of a Theme==
+
* よく構成され、エラーのない PHP と、valid な HTML。詳しくは[[WordPress Coding Standards|WordPress コーディング基準]]をご覧ください。
 +
* クリーンかつ valid な CSS 。詳しくは [[CSS Coding Standards]]/[[:en:CSS Coding Standards|en]] をご覧ください。
 +
* [[Site Design and Layout|WordPress デザインリファレンス]]内のデザインガイドラインに従う。
  
WordPress Themes live in subdirectories residing in <tt>wp-content/themes/</tt>. The Theme's subdirectory holds all of the Theme's style sheet files, [[Stepping Into Templates|template files]], an optional functions file (<tt>functions.php</tt>), and images.  For example, a Theme named "test" would probably reside in the directory <tt>wp-content/themes/test/</tt>.
+
<div id="Anatomy of a Theme">
 +
=== テーマの構造 ===
 +
</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 includes two Themes in the download, a "Classic" and "Default" Theme.  The two Themes are different and use different functions and tags to generate their web page results and looks.  Examine the files carefully for these Themes to get a better idea of how to build your own Theme files.
+
新しくインストールされた WordPress にはデフォルトテーマが同梱されています。デフォルトテーマのファイルを詳しく見ることで、独自テーマファイルを作成する方法をよりよく理解することができます。
  
WordPress Themes consist of three main types of files, in addition to images.  One is the style sheet called <tt>style.css</tt>, which controls the presentation (look) of the web pages. The second is the optional functions file (<tt>functions.php</tt>). The other files are the [[Stepping Into Templates|template files]] which control the way the web page generates the information from the Database to be displayed as a web page.  Let's look at these individually.
+
図解付きの説明は [http://yoast.com/wordpress-theme-anatomy/ WordPress Theme Anatomy] のインフォグラフィックをご覧ください。
  
===Theme Style Sheet===
+
WordPress テーマは、画像ファイルと JavaScript ファイルを除くと、大きく分けて次の3種類のファイルから構成されています。
  
In addition to CSS style information for your theme, the stylesheet, <tt>style.css</tt> '''''must''''' provide details about the Theme in the form of comments. '''''No two Themes are allowed to have the same details''''' listed in their comment headers, as this will lead to problems in the [[Administration_Panels#Presentation_-_Change_the_Look_of_your_Blog|Theme selection dialog]]. If you make your own Theme by copying an existing one, make sure you change this information first.
+
# ウェブページの外観(見た目とレイアウト)を制御しているスタイルシート (<code>style.css</code>)。
 +
# ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御する [[テンプレート入門|WordPress テンプレートファイル]]
 +
# オプションの関数が含まれている、テーマ関数ファイル (<code>functions.php</code>)。
  
The following is an example of the first few lines of the stylesheet, called the style sheet header, for the Theme "Rose":
+
では、個別に見ていきましょう。
  
<pre>/* 
+
<div id="Child Themes">
Theme Name: Rose
+
==== 子テーマ ====
Theme URI: the-theme's-homepage
+
</div>
Description: a-brief-description
+
最も単純なテーマは <code>style.css</code> ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。
Author: your-name
+
Author URI: your-URI
+
Template: use-this-to-define-a-parent-theme--optional
+
Version: a-number--optional
+
.
+
General comments/License Statement if any.
+
.
+
*/</pre>
+
  
The simplest Theme includes only a <tt>style.css</tt> file, plus images, if any. To create such a Theme, you must specify a set of templates to ''inherit'' for use with the Theme by editing the <tt>Template:</tt> line in the <tt>style.css</tt> header comments.  For example, if you wanted the Theme "Rose" to inherit the templates from another Theme called "test", you would include <tt>Template: test</tt> in the comments at the beginning of Rose's <tt>style.css</tt>. Now "test" is the parent Theme for "Rose", which still consists only of a <tt>style.css</tt> file and the concomitant images, all located in the directory <tt>wp-content/themes/Rose</tt>. ''(Note that specifying a parent Theme will inherit ''all'' of the template files from that Theme &mdash; meaning that any template files in the child Theme's directory will be ignored.)''
+
さらに詳しくは[[子テーマ]]のページをご覧ください。
  
The comment header lines in <tt>style.css</tt> are required for WordPress to be able to identify a Theme and display it in the [[Administration_Panels|Admin panel]] [[Administration_Panels#Presentation_-_Change_the_Look_of_your_Blog|Presentation]] as an available Theme option along with any other installed Themes.
+
<div="Theme Stylesheet">
 +
=== テーマスタイルシート ===
 +
</div>
 +
<code>style.css</code> は、テーマの「CSS スタイル」情報に加えて、コメントの形式で'''必ず'''「テーマ詳細」を記述する必要があります。管理画面の[[管理画面#Design_-_Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ詳細内容が別のテーマのコメント[[File Header|ヘッダ]]/[[:en:File Header|en]] にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。
  
'''Note''' : ''When defining the parent Theme, in the <tt>Template:</tt> section of the comment header, you must use the name of the directory of the style. For example, to use as parent template the Default Wordpress Theme, don't write <tt>Template: WordPress Default</tt>, but <tt>Template: default</tt>, because default is the directory of this Theme.''
+
次の例は、テーマ「Twenty Thirteen」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
  
===Functions File===
+
<pre>
 +
/*
 +
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
  
A theme can optionally use a functions file, which resides in the theme subdirectory and is named <tt>functions.php</tt>. This file basically acts like a [[Plugins|plugin]], and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). Suggested uses for this file:
+
This theme, like WordPress, is licensed under the GPL.
* Define functions used in several template files of your theme
+
Use it to make something cool, have fun, and share what you've learned with others.
* Set up an admin screen, giving users options for colors, styles, and other aspects of your theme
+
*/
 +
</pre>
  
The "Default" WordPress theme contains a <tt>functions.php</tt> file that defines functions and an admin screen, so you might want to use it as a model. Since <tt>functions.php</tt> basically functions as a plugin, the [[Plugins Resources]] list is the best place to go for more information on what you can do with this file.  
+
テーマ作者名 (Author) には、wordpress.org のユーザー名を使うことを推奨しますが、作者の本名でもかまいません。作者名は作者が自由に選ぶことができます。
  
===Theme Template Files===
+
テーマの特徴をタグ (Tags) として指定することにより、管理画面の「テーマのインストール」にて、特徴フィルターを使った検索に反映されます。使用可能なタグのリストは[https://ja.wordpress.org/themes/ テーマディレクトリ] /[https://wordpress.org/themes/ en] をご覧ください。
  
[[Stepping Into Templates|Templates]] are PHP source files used to generate the pages requested by visitors. Let's look at the various templates that can be defined as part of a Theme.  
+
<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|外観]] > [[テーマの使い方|テーマ]]」画面に表示させるために必要なものです。
  
WordPress allows you to define separate templates for the various aspects of your weblog; however, it is not essential to have all these different template files for your blog to function fully. Templates are chosen and generated based upon the [[Template Hierarchy]], depending upon what templates are available in a particular Theme. As a Theme developer, you can choose the amount of customization you want to implement using templates. For example, as an extreme case, you can use only one template file, called <tt>index.php</tt> as the template for ''all'' pages generated and displayed by the weblog. A more common use is to have different template files generate different results, to allow maximum customization.
+
<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> と指定してインクルード、もしくはメインのスタイルシート内に記述する。
  
===='''Basic Templates'''====
+
<div id="Functions_File">
  
At the very minimum, a WordPress Theme consists of two files:
+
=== テーマ関数ファイル ===
 +
</div>
 +
テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理画面とサイト表示の両方で)。このファイルの使用例:
  
* <tt>style.css</tt>
+
* テーマスタイルシートとスクリプトのエンキュー。 [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]] / [[:en:Plugin_API/Action_Reference/wp_enqueue_scripts|en]]を参照。
* <tt>index.php</tt>
+
  
Both of these files go into the Theme's directory. The <tt>index.php</tt> [[Stepping Into Templates|template file]] is very flexible.  It can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and other web pages generated by the user on your site.  Or it can be ''subdivided'' into modular template files, each one taking on part of the workload.
+
* [[Widgets_API|サイドバー]]、[[Navigation Menus|ナビゲーションメニュー]]、[[Post Thumbnails|投稿サムネイル]]、[[Post Formats|投稿フォーマット]]、[[Custom Headers|カスタムヘッダー]]、[[Custom Backgrounds|カスタム背景]]などの[[Theme Features|テーマ機能]]に対応するための定義
If you do not provide any other template files, WordPress will use the built-in default files.  For example, if you do not have either a <tt>comments.php</tt> or <tt>comments-popup.php</tt> template file, then WordPress will automatically use the <tt>wp-comments.php</tt> and <tt>wp-comments-popup.php</tt> template files using [[Template Hierarchy]]. These default templates may not match your Theme very well, so you probably will want to provide your own. The basic files normally used to subdivide (which go into the Theme's directory) are:
+
* テーマ内の複数のテンプレートファイルで使う関数の定義
 +
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置
 +
<!-- 英語版では[[Sidebars]]へのリンクとなっているが、実質ウィジェットのことであり、日本語版のSidebarsもないことから、[[Widgets_API]]へのリンクとした。 -->
  
* <tt>header.php</tt>
+
WordPress のデフォルトテーマには、<code>functions.php</code> ファイルが入っており、これら機能の多くを定義しているので見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[Writing a Plugin#Programming Your Plugin|プラグインの作成]]リストを見るのが一番です。
* <tt>sidebar.php</tt>
+
<!-- 英語版では [[Plugins Resources]] list だった箇所が [[Function Reference]] list へのリンクに変更されたのですが、[[Writing a Plugin]] または [[プラグイン API]] のほうがよいように思います。 -->
* <tt>footer.php</tt>
+
* <tt>comments.php</tt>
+
* <tt>comments-popup.php</tt>
+
  
Using these modular template files, you can put template tags within the <tt>index.php</tt> master file to include or ''get'' these units where you want them to appear in the final generated web page.
+
'''関数を ''functions.php'' に定義するのか、プラグインに定義するのか、に関して:'''
 +
同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数は<code>functions.php</code>ではなく、[[Plugins|プラグイン]]内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。
  
* To include the header, use the <tt>[[Include Tags#The Header Template|get_header()]]</tt> template tag.
+
<div id="Template Files">
* To include the sidebar, use the <tt>[[Include Tags#The Sidebar Template|get_sidebar()]]</tt> template tag.
+
* To include the footer, use the <tt>[[Include Tags#The Footer Template|get_footer()]]</tt> template tag.
+
  
Here is an example of the ''include'' usage:
+
=== テーマテンプレートファイル ===
 +
</div>
 +
[[テンプレート入門|テンプレート]]は、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして [[Template Tags|WordPress テンプレートタグ]]で構成されています。
  
<pre>&lt;?php get_sidebar(); ?&gt;
+
それでは、テーマの部品として定義できる様々なテンプレートを見てみましょう。
  
&lt;?php get_footer(); ?&gt;</pre>
+
WordPress では、サイトの各種の表示を個別のテンプレートとして定義できるようになっていますが、サイト全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、[[Template Hierarchy|テンプレート階層]]に基づいて選ばれ、生成されます。
  
For more on how these various Templates work and how to generate different information within them, read the [[Templates]] documentation.
+
テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する''全ての''ページ用のテンプレートとして、<code>index.php</code> というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。
  
===='''Query-based Templates'''====
+
<div id="Template Files List">
 +
==== テンプレートファイル一覧 ====
 +
</div>
 +
WordPress が認識するテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。追加情報は[[Template Hierarchy|テンプレート階層]]をご覧ください。
  
WordPress can load different [[Stepping Into Templates|Templates]] for different ''query'' types. There are two ways to do this: as part of the built-in [[Template Hierarchy]], and through the use of [[Conditional Tags]] within [[The Loop]] of a template file.
+
;<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 が要求に合う投稿やページを見つけられなかったときに使用。
  
To use the [[Template Hierarchy]], you basically need to provide special-purpose Template files, which will automatically be used to override <tt>index.php</tt>.  For instance, if your Theme provides a template called <tt>category.php</tt> and a category is being queried, <tt>category.php</tt> will be loaded instead of <tt>index.php</tt>. If <tt>category.php</tt> is not present, <tt>index.php</tt> is used as usual.
+
これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[Conditional Tags|条件タグ]]が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に <code>[[Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
  
You can get even more specific in the Template Hierarchy by providing a file called, for instance, <tt>category-6.php</tt> -- this file will be used rather than <tt>category.php</tt> when generating the page for the category whose ID number is 6. (You can find category ID numbers in [[Administration_Panels#Manage_-_Change_your_content|Manage]] > [[Administration_Panels#Categories|Categories]] if you are logged in as the site administrator).  For a more detailed look at how this process works, see [[Category Templates]].
+
<div id="Basic Templates">
  
If your Theme needs to have even more control over which Template files are used than what is provided in the [[Template Hierarchy]], you can use [[Conditional Tags]]. The Conditional Tag basically checks to see if some particular condition is true, within the [[The_Loop_in_Action|WordPress Loop]], and then you can load a particular template, or put some particular text on the screen, based on that condition.
+
==== 基本的なテンプレート ====
 +
</div>
 +
WordPress テーマは、最小で2ファイルから構成される。
  
For example, to generate a distinctive style sheet in a post only found within a specific category, the code might look like this:
+
* ''style.css''
 +
* ''index.php''
  
<pre><?php
+
両ファイルはそのテーマのディレクトリ内に置きます。<code>index.php</code> [[テンプレート入門|テンプレートファイル]]はとても融通が利きます。これは、参照するヘッダー・サイドバー・フッター・コンテンツ・カテゴリー・アーカイブ・検索結果・エラーほか、WordPress 上で生成されるウェブページすべてに用いることができます。
if (is_category(9)) {
+
 
  // looking for category 9 posts
+
もしくは、モジュール式のテンプレートファイルとして''分割''することもできます。別のテンプレートファイルを用意しなかった場合、WordPress は内蔵のデフォルトファイルか、デフォルト関数を用いることもあります。例えば、''searchform.php'' テンプレートファイルがないとき、WordPress はデフォルト関数を使って検索フォームを表示します。
  include(TEMPLATEPATH . '/single2.php');
+
 
 +
代表的なテンプレートファイルは次のとおりです。
 +
 
 +
* ''comments.php''
 +
* ''comments-popup.php''
 +
* ''footer.php''
 +
* ''header.php''
 +
* ''sidebar.php''
 +
 
 +
テンプレートファイルを使うことにより、''index.php'' マスターファイルのテンプレートタグをを記入してこれら他のファイル
 +
 
 +
* ヘッダーを読み込むには <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(); ?>
 +
 
 +
<?php get_footer(); ?></pre>
 +
 
 +
テンプレート関数の中には、その関数のデフォルトファイルが非推奨、もしくは存在しない場合があります。その場合はこれら(テンプレート)ファイルをテーマに同梱しなければいけません。バージョン 3.0 の時点では非推奨となったデフォルトファイルは {{Trac|wp-includes/theme-compat}} にあります。例えば、 <tt>[[関数リファレンス/get_header|get_header()]]</tt> が安全に動作する為には ''header.php'' を、 <tt>[[関数リファレンス/comments_template|comments_template()]]</tt> の為には ''comments.php'' を同梱しましょう。
 +
 
 +
各種テンプレートの動作や異なる情報を表示する方法については、[[WordPress サイトデザイン リファレンス#テンプレートファイル|テンプレートファイルの項]]をご覧ください。
 +
 
 +
<div id="Custom Page Templates">
 +
====カスタム固定ページテンプレート====
 +
</div>
 +
固定ページのテンプレートファイルは[[Using Themes|テーマ]]ディレクトリの中にあります。固定ページの為の新規のカスタム固定ページテンプレートを作成するには、新しくファイルを作る必要があります。例えば、''snarfer.php'' という固定ページの為の固定ページテンプレートを作るとします。''snarfer.php'' ファイルの冒頭に以下のコードを記述します。
 +
 
 +
<?php
 +
/*
 +
Template Name: Snarfer
 +
*/
 +
?>
 +
 
 +
上記コードによって ''snarfer.php'' が "Snarfer" テンプレートとして定義されます。"Snarfer" を変更することで、固定ページテンプレート名 (Template Name) を変更することができます。このテンプレート名は、管理画面のテーマの編集ページのテンプレート一覧に表示されます。
 +
 
 +
カスタム固定ページテンプレートのファイル名は、''.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]]を参照)。
 +
 
 +
冒頭に記述する上記の5行のコードの後に何を記述するかはあなた次第です。記述したコードの内容により、Snarfer 固定ページテンプレートを使う固定ページがどのように表示されるかコントロールされます。この目的に使用できる WordPress テンプレート関数の詳細は[[Template Tags|テンプレートタグ]]をご覧ください。場合によっては、他のテンプレートファイル(''page.php'' や ''index.php'' など)をコピーし、''snarfer.php'' とリネームし、上記5行のコードをファイルの冒頭に記述する方が作りやすいでしょう。全てをスクラッチから(イチから)作るよりも、HTML と PHP コードを''変更''するだけですみます。例は[[#Examples|下記]]をご覧ください。ページテンプレートを作成し、テーマディレクトリに保存すると、固定ページを新規作成もしくは編集の際に、選択肢の1つとして現れます('''注意''':上記方法によって、少なくとも1つ以上のページテンプレートが存在しない限り、固定ページの作成・編集時にページテンプレート選択のオプションは表示されません)。
 +
 
 +
<div id="Query-based Template Files">
 +
==== クエリベースのテンプレート ====
 +
</div>
 +
WordPress では、各''クエリ'' (要求) タイプによって異なる[[テンプレート入門|テンプレート]]をロードできます。これには二つの方法があります。内蔵の [[テンプレート階層]]の一環とするものと、テンプレートファイルの[[The Loop|ループ]]内で[[Conditional Tags|条件タグ]]を用いる方法です。
 +
 
 +
[[テンプレート階層]]を使うには、通常、<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
 +
if ( is_category( '9' ) ) {
 +
    get_template_part( 'single2' ); // カテゴリー ID 9 に当てはまるとき
 
} else {
 
} else {
  // put this on every other category post
+
    get_template_part( 'single1' ); // 当てはまらないカテゴリの投稿のとき
  include(TEMPLATEPATH . '/single1.php');
+
 
}
 
}
?></pre>
+
?>
 +
</pre>
  
Or, using a query, it might look like this:
+
あるいは、クエリを用いた場合、次のようにもなります。
  
<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>
 +
 
 +
どちらのコードの例も、表示しようとしている投稿のカテゴリーに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。使える全ての種類の条件については、[[Conditional Tags|条件タグ]]のページをご覧ください。
 +
 
 +
<div id="Defining Custom Templates">
 +
====カスタムテンプレートの定義====
 +
</div>
 +
WordPress プラグインを使って、カスタム基準に応じるカスタムテンプレートを追加定義することもできます。この上級者向け機能を使うには、<code>template_redirect</code> という[[プラグイン API#Current Hooks For Actions|アクションフック]]を利用します。プラグインの作成についてより詳しくは[[プラグイン API|プラグイン API]] のページを参照してください。
 +
 
 +
<div id="Including Template Files">
 +
==== テンプレートファイルのインクルード ====
 +
</div>
 +
(ヘッダー、サイドバー、フッターなど、<tt>[[関数リファレンス/get_header|get_header()]]</tt>といった定義済み関数が存在しない)その他のテンプレートファイルをテンプレートに読み込むには、<tt>[[関数リファレンス/get_template_part|get_template_part()]]</tt> が使用できます。これにより、テーマ内のコードをセクション単位で簡単に再利用することができます。
 +
 
 +
<div id="Referencing Files From a Template">
 +
==== テンプレートからファイルを参照 ====
 +
</div>
 +
テーマ内に存在するその他のファイルを参照する場合、URIやファイルパスをハードコードする(直書きする)のは避け、<tt>[[テンプレートタグ/bloginfo|bloginfo()]]</tt> を使って参照します。<!--注:原文に次のようにあるが、Referencing Files From a Templateはこのテンプレートからファイルを参照の項。間違い? 詳しくは [[Theme_Development#Referencing_Files_From_a_Template|Referencing Files From a Template]] をご覧ください。-->
 +
 
 +
スタイルシートの中で使われるURIは、スタイルシートからの相対パスです。スタイルシートを参照しているページからのパスではないことに注意してください。例えば、テーマ内に ''images/'' ディレクトリがある場合、CSS ではこのように相対パスで指定します。
 +
 
 +
<pre>
 +
h1 {
 +
    background-image: url(images/my-background.jpg);
 +
}
 +
</pre>
 +
 
 +
<div id="Plugin API Hooks">
 +
==== プラグイン API フック ====
 +
</div>
 +
テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、''アクションフック''を通して WordPress に機能を追加します。 (詳しくは[[Plugin API|プラグイン API]] を参照してください)
 +
 
 +
アクションフックの多くは WordPress のコア PHP コードの中に書かれており、動作させるために特別なタグをテーマに記述する必要はありません。しかし、プラグインがヘッダー、フッター、サイドバー、もしくはページの本文に、情報を直接表示できるようにするためのアクションフックが幾つかあり、これらはテーマに記述されている必要があります。以下が含めるべきアクションフックテンプレートタグの一覧です。
 +
 
 +
; [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]]
 +
: テーマ機能ファイルで使用されます。外部スクリプトとスタイルシートをロードするために使用します。
 +
 
 +
; [[関数リファレンス/wp head|wp_head()]]
 +
: テーマの <code>header.php</code> にある <code><nowiki><head></nowiki></code> 要素内に記述する。
 +
: プラグインによるこのフックの使用例:JavaScript コードを挿入する。
 +
 
 +
; [[関数リファレンス/wp_footer|wp_footer()]]
 +
: テーマの <code>footer.php</code>の、<code><nowiki></body></nowiki></code> タグ直前に記述する。
 +
: プラグインによるこのフックの使用例:ページが読み込まれる最後に実行する PHP のコードをフッター下に挿入する。Google Analytics などのアクセス解析コードの挿入によく使われる。
 +
 
 +
; [[関数リファレンス/wp_meta|wp_meta()]]/[[:en:http://codex.wordpress.org/Function_Reference/wp_meta|en]]
 +
: 一般的には、テーマのメニューまたはサイドバー (<code>sidebar.php</code> テンプレート) の <code><nowiki><li>Meta</li></nowiki></code> セクションに記述する。
 +
: プラグインによるこのフックの使用例:広告スイッチャーやタグクラウドを表示させる。
 +
 
 +
; [[テンプレートタグ/comment_form|comment_form()]]
 +
: <code>comments.php</code> の終了タグ (<code><nowiki></div></nowiki></code>) の直前に含める。
 +
: プラグインによるこのフックの使用例:コメントプレビューを表示させる。
 +
 
 +
実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。
 +
 
 +
<div id="Theme Customization API">
 +
==== テーマカスタマイズ API ====
 +
</div>
 +
WordPress 3.4 から、新しいテーマカスタマイズ管理画面機能 (テーマカスタマイザー) がデフォルトで追加され、ほぼ全ての WordPress テーマで利用可能です。管理画面のテーマカスタマイザーページには、[[関数リファレンス/add_theme_support|add_theme_support()]] もしくは Settings API を用いてテーマ内で定義が必要な機能は自動的に集約され、リアルタイムでプレビューできます。
 +
 
 +
オプション設定項目を新たにテーマカスタマイザーのページに追加したいテーマ開発者やプラグイン開発者は、 [[Theme_Customization_API|テーマカスタマイズ API]] を参照してください。テーマカスタマイズ API に関するチュートリアルは、 [http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/ Ottopress.com のウェブサイト]も参照してください。
 +
 
 +
<div id="Untrusted Data">
 +
==== 信頼できないデータ ====
 +
</div>
 +
テーマ内で動的に生成されたコンテンツ、特に HTML 属性を含むコンテンツは、エスケープする必要があります。[[WordPress_Coding_Standards|WordPress コーディング基準]] でも書かれている通り、HTML 属性に挿入されるテキストは、シングルクォートやダブルクォートが属性の値を終了し、invalid な XHTML やセキュリティーの問題を起こさないようにする為、 <tt>[[関数リファレンス/esc_attr|esc_attr()]]</tt> を通す必要があります。一般的には <tt>title</tt>、<tt>alt</tt>、<tt>value</tt> 属性をチェックしましょう。
 +
 
 +
一般的な場合における、安全なアウトプットが必要なの時の為に、幾つかの特別なテンプレートタグがあります。セキュリティーの脆弱性を避けるために、[[テンプレートタグ/the_title|<tt>the_title()</tt>]] ではなく [[テンプレートタグ/the_title_attribute|<tt>the_title_attribute()</tt>]] を使って <tt>title</tt> 属性に記事のタイトルを出力するのもその様なケースの1つです。翻訳可能なテキストを用いた、記事タイトルリンクの <tt>title</tt> 属性を正しくエスケーピング処理する例は次の通りです。
 +
 
 +
<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>
 +
 
 +
非推奨となったエスケープ用関数は新しく正しい関数に変更してください。 [[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|データ検証]] を参照してください。
 +
 
 +
<div id="Translation Support / I18n">
 +
==== 翻訳対応 / 国際化 (I18n)  ====
 +
</div>
 +
 
 +
スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能なテキストを WordPress の gettext ベースの [[I18n for WordPress Developers|i18n]] 関数で囲みましょう。これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストにフックすることができ、翻訳しやすくなります。[[WordPress Localization]]/[[:en:WordPress Localization|en]] と [[I18n for WordPress Developers]] を参照してください。
 +
 
 +
<div id="Theme Classes">
 +
==== テーマのクラス要素 ====
 +
</div>
 +
body、post、comment に、WordPress によって生成されたクラス属性を付与するには、以下のテンプレートタグを組み入れます。記事用のクラス属性は[[The Loop|ループ]]内の要素のみに対して付与します。
 +
 
 +
* [[テンプレートタグ/body_class|body_class()]]
 +
* [[テンプレートタグ/post_class|post_class()]]
 +
* [[Function_Reference/comment_class|comment_class()]] /[[:en:Function_Reference/comment_class|en]]
 +
 
 +
<div id="Template File Checklist">
 +
=== テンプレートファイルのチェックリスト ===
 +
</div>
 +
テーマを作る時、テンプレートファイルを以下のテンプレートファイル基準に照らし合わせてチェックしてください。
 +
 
 +
<div id="Document Head (header.php)">
 +
==== Document Head (header.php) ====
 +
</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]]) を参照。
 +
 
 +
* フィードリンクを追加するには [[Automatic Feed Links]] /[[:en:Automatic Feed Links|en]] を使う。
 +
* <tt></head></tt> 終了タグよりも前に [[関数リファレンス/wp_head|<tt>wp_head()</tt>]] を挿入する。プラグインはこのアクションフックを使ってスクリプトやスタイルシート、その他の機能を追加する。
 +
* ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。 代わりにテーマ関数のアクションフック [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]] を使う。
 +
 
 +
下記は、HTML5 に準拠した正しいフォーマットの head 部分の例です。
  
In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however -- see the [[Conditional Tags]] article to look at all the options. 
+
<pre>
 +
<!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>
  
===Theme Template Files List===
+
<div id="Navigation Menus (header.php)">
 +
==== ナビゲーションメニュー (''header.php'') ====
 +
</div>
 +
* テーマのメインナビゲーションは [[関数リファレンス/wp_nav_menu|<tt>wp_nav_menu()</tt>]] を使うカスタムメニューに対応させる。
 +
** メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
 +
** サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルに対応すること。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。
  
Here is the list of Theme template files recognized by WordPress. Of course, your Theme can contain any other style sheets, images, or files. ''Just keep in mind that the following have special meaning to WordPress -- see [[Template Hierarchy]] for more information.''
+
<div id="Widgets (sidebar.php)">
 +
==== ウィジェット (''sidebar.php'') ====
 +
</div>
 +
* テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
 +
* 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
  
;<tt>style.css</tt>: The main stylesheet. This '''must''' be included with your Theme, and it must contain the information header for your Theme.
+
<div id="Footer (footer.php)">
;<tt>index.php</tt>: The main template. If your Theme provides its own templates, <tt>index.php</tt> must be present.
+
==== フッター (''footer.php'') ====
;<tt>comments.php</tt>: The comments template. If not present, <tt>comments.php</tt> from the "default" Theme is used.
+
</div>
;<tt>comments-popup.php</tt>: The popup comments template. If not present, <tt>comments-popup.php</tt> from the "default" Theme is used.
+
* [[テンプレートタグ/wp_footer|<tt>wp_footer()</tt>]] を、<tt>body</tt> の閉じタグ直前に挿入する。
;<tt>home.php</tt>: The home page template.
+
;<tt>single.php</tt>: The single post template. Used when a single post is queried. For this and all other query templates, <tt>index.php</tt> is used if the query template is not present.
+
;<tt>page.php</tt>: The page template. Used when an individual [[Pages|Page]] is queried.
+
;<tt>category.php</tt>: The [[Category Templates|category template]]. Used when a category is queried.
+
;<tt>author.php</tt>: The [[Author Templates|author template]]. Used when an author is queried.
+
;<tt>date.php</tt>: The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
+
;<tt>archive.php</tt>: The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by <tt>category.php</tt>, <tt>author.php</tt>, and <tt>date.php</tt> for their respective query types.
+
;<tt>search.php</tt>: The search template. Used when a search is performed.
+
;<tt>404.php</tt>: The '''[[Creating_an_Error_404_Page|404 Not Found]]''' template. Used when WordPress cannot find a post or page that matches the query.
+
  
These files have a special meaning with regard to WordPress because they are used as a replacement for <tt>index.php</tt>, when available, according to the [[Template Hierarchy]], and when the corresponding [[Conditional Tags|Conditional Tag]] (a.k.a <tt>is_*();</tt> function) returns true. For example, if only a single post is being displayed, the <tt>[[Conditional Tags#A Single Post Page|is_single()]]</tt> function returns 'true', and, if there is a <tt>single.php</tt> file in the active Theme, that template is used to generate the page.
+
<pre>
 +
<?php wp_footer(); ?>
 +
</body>
 +
</html>
 +
</pre>
  
===Referencing Files From a Template===
+
<div id="Index (index.php)">
 +
==== インデックス (''index.php'') ====
 +
</div>
 +
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
  
The WordPress Default Theme (based on  Michael Heilemann's [http://binarybonsai.com/kubrick/ Kubrick] layout for WordPress 1.2) provides a good example of how queries are mapped onto templates.
+
<div id="Archive (archive.php)">
 +
==== アーカイブ (''archive.php'') ====
 +
</div>
 +
* アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
 +
* 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
  
The code <tt><?php bloginfo('template_directory'); ?></tt> inserts the URL of the template directory into the template output.  You can append any additional URI information to this output to reference files in your Theme.
+
<div id="Pages (page.php)">
 +
==== 固定ページ (''page.php'') ====
 +
</div>
 +
* 固定ページのタイトルと本文を表示する。
 +
* コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 +
* タグ、カテゴリー、日付、作成者などのメタデータは表示しない。
 +
* 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
  
The code <tt><?php bloginfo('stylesheet_directory'); ?></tt> inserts the URL of the directory that contains the current Theme stylesheet into the template output.  You can append any additional URI information to this output to reference files for your Theme, specifically those that are used by the stylesheet.
+
<div id="Single Post (single.php)">
 +
==== 個別投稿表示 (''single.php'') ====
 +
</div>
 +
* 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。
 +
* 投稿のタイトルと本文を表示する。
 +
** タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
 +
* 投稿日を表示する。
 +
** デザイン適理由で重要でない限り、[[管理画面/一般設定|日付のフォーマットと時刻のフォーマットの設定]]を尊重すること。 (日付のフォーマットと時刻のフォーマットに関するユーザー設定は [[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>]] を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。
  
The constant TEMPLATEPATH is a reference to the absolute path to the template directory for the current Theme (without the / at the end).
+
<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'' にあるべき。
  
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:
+
<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>]] を使う。
  
<pre style="font-size: 0.9em">h1 { background-image: URL(images/my_background.jpg); }</pre>
+
<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>
  
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.
+
<div id="Screenshot">
 +
=== スクリーンショット ===
 +
</div>
 +
テーマのスクリーンショットを作ります。ファイル名は ''screenshot.png'' と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 880x660。実際には 387x290 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。
  
===Defining Custom Templates===
+
注:場合により、 .jpg、.jpeg、.gif は 有効な拡張子 でスクリーンショットのファイル形式です。 (推奨ではありません).
  
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> [[Plugin API#Current Hooks For Actions|action hook]].  More information about creating plugins can be found in the [[Plugin API]] reference.
+
<div id="Theme Options">
  
===Plugin API Hooks===
+
=== テーマ設定 ===
 +
</div>
 +
テーマは [[Appearance Theme Options Screen|テーマ設定画面]] /[[:en:Appearance Theme Options Screen|en]] を実装することも可能です。コードの例は [http://themeshaper.com/sample-theme-options/ A Sample WordPress Theme Options Page] を参照してください。
  
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:
+
ユーザー[[Roles and Capabilities#Roles|権限グループ]]にテーマ設定画面へのアクセスを有効化する場合は、"switch_themes" ではなく "edit_theme_options" 権限を使います。但し、実際にユーザー権限でもテーマの変更を可能とする場合は除く。より詳しくは[[Roles and Capabilities#Capabilities|権限]]と[[Adding Administration Menus|管理メニューの追加]]を参照してください。
  
; wp_head
+
[[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]] を参照ください。
: Goes in the [[Glossary#HTML|HTML]] <tt>&lt;head&gt;</tt> element of a theme; <tt>header.php</tt> template. Example plugin use: add javascript code.  
+
  
: Usage: <tt><nowiki><?php do_action('wp_head'); ?></nowiki></tt>
+
<div id="Theme Testing Process">
:''-or-''&nbsp; <tt><nowiki><?php wp_head(); ?></nowiki></tt>
+
  
; 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.
+
</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|テーマレビュー]] を確認する。
  
: Usage: <tt><nowiki><?php do_action('wp_footer'); ?></nowiki></tt>
+
<div id="Resources and References">
:''-or-''&nbsp; <tt><nowiki><?php wp_footer(); ?></nowiki></tt>
+
== 参考資料 ==
 +
</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]]
  
; wp_meta
+
<div id="Theme Design">
: 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.
+
=== テーマデザイン ===
 +
</div>
 +
* [[Site Design and Layout|WordPress サイトデザインリファレンス]]
  
: Usage: <tt><nowiki><?php do_action('wp_meta'); ?></nowiki></tt>
+
<div id="CSS">
:''-or-''&nbsp; <tt><nowiki><?php wp_meta(); ?></nowiki></tt>
+
=== 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 が生成するクラス]]
  
; comment_form
+
<div id="Templates">
: 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.
+
=== テンプレート ===
 +
</div>
 +
* [[Stepping Into Templates|テンプレート入門]]
 +
* [[Templates|テンプレート]]
 +
* [[Template Hierarchy|テンプレート階層]]
 +
* [[Template Tags|テンプレートタグ]]
 +
* [[The Loop]]
 +
* [[Conditional Tags|条件分岐タグ]]
 +
* [[Function Reference|関数リファレンス]]
 +
* [[I18n for WordPress Developers]]
 +
* [[Data Validation|データ検証]]
  
: Usage: <tt><nowiki><?php do_action('comment_form', $post->ID); ?></nowiki></tt>  
+
<div id="Functions listing">
 +
=== 関数リスト ===
 +
</div>
 +
* [[Function Reference|関数リファレンス]]
  
For a real world usage example, you'll find these plugin hooks included in the default theme's templates.
+
<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]
  
==Theme Development General Guidelines==
+
<div id="Release & Promotion">
  
Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):
+
=== リリース & プロモーション ===
# Indicate precisely what your Theme and template files will achieve.
+
</div>
# Indicate deficiencies in your Themes, if any.
+
* [[Theme Review|テーマレビューのプロセス]]
# Clearly reference any special modifications in [[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.
+
# 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 [[CSS_Fixing_Browser_Bugs|across browsers]] to catch at least a few of the [[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.
+
  
Take time to read through [[Designing Themes for Public Release]], an article with good tips on preparing your Theme for the public.
+
<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]
  
==References and Resources==
+
{{原文|Theme Development|152914}} <!--  14:56, 29 July 2015‎ Jdgrimes 版 -->
  
There is a comprehensive list of WordPress Theme and Template File resources in the [[Templates]] article.
+
{{DEFAULTSORT:てえまのさくせい}}
 +
[[Category:デザインとレイアウト]]
 +
[[Category:WordPress の開発]]
 +
[[Category:UI Link]]
  
[[Category:Design and Layout]]
+
[[bn:থিম ডেভলপমেন্ট]]
[[Category:WordPress 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:থিম ডেভলপমেন্ট