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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(ソートキー・言語間リンク)
(一部和訳)
1行目: 1行目:
原文・最新版: [[:en:Theme Development|WordPress Codex » Theme Development]]
+
このページでは、あなた用の WordPress テーマの開発やデザインについて説明します。テーマのインストールと使い方について知りたいときは、[[:ja:Using Themes]] をおさらいしましょう。以下は、テーマの切り替え方や新しいテーマの入手方法ではなく、テーマを構築するためのコードの記述についての技術的な内容であり、[[:ja:Using Themes|テーマの使い方]]とは異なります。
  
__TOC__
+
You may wish to develop WordPress Themes for your own use or [[:en:Designing Themes for Public Release|for distribution]].
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.
+
  
You may wish to develop WordPress Themes for your own use or [[Designing Themes for Public Release|for distribution]]. 
+
<div id="Why_WordPress_Themes">
 
==Why WordPress Themes==
 
==Why WordPress Themes==
 +
</div>
  
 
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 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 create your own unique WordPress site look
* 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 take advantage of [[テンプレート入門|templates]], [[テンプレートタグ|template tags]], and [[:en:The_Loop_in_Action|the WordPress Loop]] to generate different web page results and looks.
* To provide alternative templates for specific site features, such as [[Category_Templates|category pages]] and search result pages.
+
* To provide alternative templates for specific site features, such as [[:en:Category_Templates|category pages]] and search result pages.
* To quickly switch between two site layouts, or to take advantage of a [[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 [[:ja: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.
 
* To design WordPress Theme(s) so that others may enjoy your designs through public release.
  
 
A WordPress Theme has many benefits, too.  
 
A WordPress Theme has many benefits, too.  
  
* 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 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 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 allows for quick changes of the look and feel of a WordPress site.
28行目: 28行目:
 
* It's creative.
 
* It's creative.
 
* It's fun (most of the time).
 
* It's fun (most of the time).
* 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!)
+
* 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!)
  
==Anatomy of a Theme==
+
<div id="Anatomy_of_a_Theme">
 +
== テーマの構造 ==
 +
</div>
  
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>.
+
WordPress テーマは、<code>wp-content/themes/</code> の中のサブディレクトリに存在します。例えば、「test」というテーマは、おそらく <code>wp-content/themes/test/</code> ディレクトリにあります。テーマのサブディレクトリには、スタイルシートファイル、[[テンプレート入門|テンプレートファイル]]、オプションの関数ファイル(<code>functions.php</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 には、「Classic」と「Default」という二つのテーマが同梱されています。この二つのテーマでは、ウェブページの表示内容や外観を生成するために、異なる機能やタグを使っています。あなた用のテーマファイルの構築方法をよりよく理解するために、これらのテーマを詳しく見ていきましょう。
  
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.
+
WordPress テーマは、画像を除くと、大きく分けて次の 3種類のファイルから構成されています。
  
===Theme Style Sheet===
+
# [[#テーマスタイルシート|<code>style.css</code>]] -- テーマの情報 および ウェブページの外観を制御するスタイルシート
 +
# [[#関数ファイル|<code>functions.php</code>]] -- オプションの関数ファイル
 +
# [[テンプレートファイル入門|テンプレートファイル]] -- ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御
  
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.
+
では、個別に見ていきましょう。
  
The following is an example of the first few lines of the stylesheet, called the style sheet header, for the Theme "Rose":
+
<div id="Theme_Style_Sheet">
 +
=== テーマスタイルシート ===
 +
</div>
 +
 
 +
<code>style.css</code> は、テーマの「スタイルシート」情報に加えて、コメントの形式で'''必ず'''「テーマについての明細」を記述していなければなりません。管理パネルの[[管理パネル#Presentation - Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ明細が別のテーマのコメントヘッダにあってはなりません。既存のテーマを複製してあなた用のテーマを作るときは、最初にこの情報を変更してください。
 +
次の例は、テーマ「Rose」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。
  
 
<pre>/*   
 
<pre>/*   
 
Theme Name: Rose
 
Theme Name: Rose
Theme URI: the-theme's-homepage
+
Theme URI: テーマのホームサイトの URI
 
Description: a-brief-description
 
Description: a-brief-description
Author: your-name
+
Author: 作者の名前
Author URI: your-URI
+
Author URI: 作者の URI
Template: use-this-to-define-a-parent-theme--optional
+
Template: 親テーマの定義(オプション)
Version: a-number--optional
+
Version: バージョン番号(オプション)
 
.
 
.
General comments/License Statement if any.
+
コメント/利用許諾の記述(あれば)
 
.
 
.
 
*/</pre>
 
*/</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.)''
+
最も単純なテーマには、<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」の親テーマとなります。'''''': 「親テーマの指定」は、そのテーマから''全ての''テンプレートファイルを継承することに注意。子テーマディレクトリ内にテンプレートファイルがあっても無視されます。
  
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.
+
<code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに [[管理パネル]] > [[管理パネル#Presentation_-_Change_the_Look_of_your_Blog|表示]]画面に表示させるために必要なものです。
  
'''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.''
+
'''''': 親テーマを定義するとき、コメントヘッダの <code>Template:</code> セクションには、スタイルの'''ディレクトリ名'''を書かなければなりません。例えば、親テーマとして WordPress Default テーマを使う場合は、<code>Template: WordPress Default</code> ではなく、このテーマのディレクトリ名で <code>Template: default</code> と書きます。
  
===Functions File===
+
<div id="Functions_File">
 +
=== 関数ファイル ===
 +
</div>
  
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:
+
テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます(管理パネルとサイト表示の両方で)。このファイルの使用例:
* Define functions used in several template files of your theme
+
* テーマ内の複数のテンプレートファイルで使う関数の定義
* Set up an admin screen, giving users options for colors, styles, and other aspects of your theme
+
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置
  
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.
+
「Default」WordPress テーマには、関数と管理画面を定義する <code>functions.php</code> ファイルが入っているので、見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[:en:Plugins Resources|Plugins Resources]] リストを見るのが一番です。
  
===Theme Template Files===
+
<div id="Theme_Template_Files">
 +
=== テーマテンプレートファイル ===
 +
</div>
  
[[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.  
+
[[テンプレートファイル入門|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.  
  
 
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.
 
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.
  
===='''Basic Templates'''====
+
<div id="Basic_Templates">
 +
==== 基本的なテンプレート ====
 +
</div>
  
 
At the very minimum, a WordPress Theme consists of two files:
 
At the very minimum, a WordPress Theme consists of two files:
  
* <tt>style.css</tt>
+
* <code>style.css</code>
* <tt>index.php</tt>
+
* <code>index.php</code>
  
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.
+
Both of these files go into the Theme's directory. The <tt>index.php</tt> [[テンプレート入門|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.
 
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:
 
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:
  
* <tt>header.php</tt>
+
* <code>header.php</code>
* <tt>sidebar.php</tt>
+
* <code>sidebar.php</code>
* <tt>footer.php</tt>
+
* <code>footer.php</code>
* <tt>comments.php</tt>
+
* <code>comments.php</code>
* <tt>comments-popup.php</tt>
+
* <code>comments-popup.php</code>
  
 
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.
 
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.
  
* To include the header, use the <tt>[[Include Tags#The Header Template|get_header()]]</tt> template tag.
+
* To include the header, use the <tt>[[:ja:Include Tags#The Header Template|get_header()]]</tt> template tag.
* To include the sidebar, use the <tt>[[Include Tags#The Sidebar Template|get_sidebar()]]</tt> template tag.
+
* To include the sidebar, use the <tt>[[:ja: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.
+
* To include the footer, use the <tt>[[:ja:Include Tags#The Footer Template|get_footer()]]</tt> template tag.
  
 
Here is an example of the ''include'' usage:
 
Here is an example of the ''include'' usage:
105行目: 120行目:
 
&lt;?php get_footer(); ?&gt;</pre>
 
&lt;?php get_footer(); ?&gt;</pre>
  
For more on how these various Templates work and how to generate different information within them, read the [[Templates]] documentation.
+
For more on how these various Templates work and how to generate different information within them, read the [[テンプレート|Templates]] documentation.
  
===='''Query-based Templates'''====
+
<div id="Query-based_Templates">
 +
==== クエリベースのテンプレート ====
 +
</div>
  
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.
+
WordPress can load different [[テンプレート入門|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 [[:ja:Conditional Tags|Conditional Tags]] within [[:ja:The Loop|The Loop]] of a template file.
  
 
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.
 
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.
  
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]].
+
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 [[管理パネル#Manage_-_Change_your_content|Manage]] > [[管理パネル#Categories|Categories]] if you are logged in as the site administrator).  For a more detailed look at how this process works, see [[:en:Category Templates|Category 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.
+
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 [[:ja:Conditional Tags|Conditional Tags]]. The Conditional Tag basically checks to see if some particular condition is true, within the [[:en: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.
  
 
For example, to generate a distinctive style sheet in a post only found within a specific category, the code might look like this:
 
For example, to generate a distinctive style sheet in a post only found within a specific category, the code might look like this:
140行目: 157行目:
 
?></pre>
 
?></pre>
  
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.   
+
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 [[:ja:Conditional Tags|Conditional Tags]] article to look at all the options.   
  
===Theme Template Files List===
+
<div id="Media_Icons">
 +
=== メディアアイコン ===
 +
</div>
  
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.''
+
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.
  
;<tt>style.css</tt>: The main stylesheet. This '''must''' be included with your Theme, and it must contain the information header for your Theme.
+
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>.)
;<tt>index.php</tt>: The main template. If your Theme provides its own templates, <tt>index.php</tt> must be present.
+
;<tt>comments.php</tt>: The comments template. If not present, <tt>comments.php</tt> from the "default" Theme is used.
+
;<tt>comments-popup.php</tt>: The popup comments template. If not present, <tt>comments-popup.php</tt> from the "default" Theme is used.
+
;<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.
+
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>):
  
===Referencing Files From a Template===
+
# <var>my_theme</var>/images/audio.jpg
 +
# <var>my_theme</var>/images/audio.gif
 +
# <var>my_theme</var>/images/audio.png
 +
# <var>my_theme</var>/images/mpeg.jpg
 +
# <var>my_theme</var>/images/mpeg.gif
 +
# <var>my_theme</var>/images/mpeg.png
 +
# <var>my_theme</var>/images/audio_mpeg.jpg
 +
# <var>my_theme</var>/images/audio_mpeg.gif
 +
# <var>my_theme</var>/images/audio_mpeg.png
 +
 
 +
<div id="Theme_Template_Files_List">
 +
=== テーマテンプレートファイル一覧 ===
 +
</div>
 +
 
 +
WordPress が認識するテーマテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。さらなる情報は [[Template Hierarchy]] をご覧ください。
 +
 
 +
;<code>style.css</code>: メインのスタイルシート。テーマにはこのファイルが'''必須'''で、テーマのヘッダ情報を含まなければなりません。
 +
;<code>index.php</code>: メインテンプレート。([[#テーマスタイルシート|親テーマのテンプレートを利用]]するのではなく)このテーマ自身のテンプレートを設けるなら <code>index.php</code> は必須。
 +
;<code>comments.php</code>: コメントテンプレート。存在しなければデフォルトテーマの <code>comments.php</code> が使われる。
 +
;<code>comments-popup.php</code>: ポップアップコメントテンプレート。存在しなければデフォルトテーマの <code>comments-popup.php</code> が使われる。
 +
;<code>home.php</code>: ホームページテンプレート。
 +
;<code>single.php</code>: 単体記事テンプレート。個別記事が要求(クエリ)されたときに使用。このクエリテンプレートが存在しないときは <code>index.php</code> が使われる。この他のクエリテンプレートも同様。
 +
;<code>page.php</code>: ページテンプレート。特定の[[:ja:Pages|ページ]]が要求されたときに使用。
 +
;<code>category.php</code>: [[:en:Category Templates|カテゴリテンプレート]]。あるカテゴリが要求されたときに使用。
 +
;<code>author.php</code>: [[:en:Author Templates|著者テンプレート]]。ある著者が要求されたときに使用。
 +
;<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>404.php</code>: '''[[:en:Creating_an_Error_404_Page|404 Not Found]]''' テンプレート。WordPress が要求に合う記事やページを見つけられなかったときに使用。
 +
 
 +
これらのファイルは、[[Template Hierarchy]] に従って適用できるファイルがあるときや、対応する[[:ja:Conditional Tags|条件タグ]](別名 <code>is_*()</code> 関数)が true を返すとき、<tt>index.php</tt> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、単体記事が表示される際に <code>[[:ja:Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。
 +
 
 +
<div id="Referencing_Files_From_a_Template">
 +
=== テンプレートからのファイルの参照 ===
 +
</div>
  
 
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.
 
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.
178行目: 219行目:
 
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.
 
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="Defining_Custom_Templates">
 
===Defining Custom Templates===
 
===Defining Custom Templates===
 +
</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> [[Plugin API#Current Hooks For Actions|action hook]].  More information about creating plugins can be found in the [[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 <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.
  
===Plugin API Hooks===
+
<div id="Plugin_API_Hooks">
 +
=== プラグイン API フック ===
 +
</div>
  
When developing Themes, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins you (or another Theme user) might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see [[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:
+
When developing Themes, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins you (or another Theme user) might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see [[プラグイン API|Plugin API]] for more information). Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include:
  
 
; wp_head  
 
; wp_head  
: 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.  
+
: 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.  
  
 
: Usage: <tt><nowiki><?php do_action('wp_head'); ?></nowiki></tt>  
 
: Usage: <tt><nowiki><?php do_action('wp_head'); ?></nowiki></tt>  
211行目: 256行目:
 
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.
  
==Theme Development General Guidelines==
+
<div id="Theme_Development_General_Guidelines">
 +
==テーマ開発の総合ガイドライン ==
 +
</div>
  
 
Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):
 
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.
 
# 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 [[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 [[: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.  
 
# 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 [[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.
+
# Try and test your Theme [[:en:CSS Fixing Browser Bugs|across browsers]] to catch at least a few of the [[:en:CSS Troubleshooting|problems]] the users of the Theme may find later.
 
# Provide contact information (web page or email), if possible, for support information and questions.
 
# 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.
+
Take time to read through [[:en:Designing Themes for Public Release|Designing Themes for Public Release]], an article with good tips on preparing your Theme for the public.
 +
 
 +
<div id="References_and_Resources">
 +
== 参考資料 ==
 +
</div>
  
==References and Resources==
+
[[WordPress サイトデザイン リファレンス]]には、WordPress テーマおよびテンプレートファイルに関する資料の一覧があります。
  
There is a comprehensive list of WordPress Theme and Template File resources in the [[Templates]] article.
+
{{原文|Theme Development}}
  
 
{{DEFAULTSORT:てえまのさくせい}}
 
{{DEFAULTSORT:てえまのさくせい}}

2008年3月5日 (水) 00:02時点における版

このページでは、あなた用の WordPress テーマの開発やデザインについて説明します。テーマのインストールと使い方について知りたいときは、ja:Using Themes をおさらいしましょう。以下は、テーマの切り替え方や新しいテーマの入手方法ではなく、テーマを構築するためのコードの記述についての技術的な内容であり、テーマの使い方とは異なります。

You may wish to develop WordPress Themes for your own use or for distribution.

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 to generate different web page results and looks.
  • To provide alternative templates for specific site features, such as category pages 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, 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 に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに 管理パネル > 表示画面に表示させるために必要なものです。

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

関数ファイル

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

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

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

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

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.

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 index.php 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.

基本的なテンプレート

At the very minimum, a WordPress Theme consists of two files:

  • style.css
  • index.php

Both of these files go into the Theme's directory. The index.php 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. 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 comments.php or comments-popup.php template file, then WordPress will automatically use the wp-comments.php and wp-comments-popup.php 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:

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

Using these modular template files, you can put template tags within the index.php master file to include or get these units where you want them to appear in the final generated web page.

Here is an example of the include usage:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

For more on how these various Templates work and how to generate different information within them, read the Templates documentation.

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

WordPress can load different 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.

To use the Template Hierarchy, you basically need to provide special-purpose Template files, which will automatically be used to override index.php. For instance, if your Theme provides a template called category.php and a category is being queried, category.php will be loaded instead of index.php. If category.php is not present, index.php is used as usual.

You can get even more specific in the Template Hierarchy by providing a file called, for instance, category-6.php -- this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in Manage > Categories if you are logged in as the site administrator). For a more detailed look at how this process works, see Category 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 WordPress Loop, and then you can load a particular template, or put some particular text on the screen, based on that condition.

For example, to generate a distinctive style sheet in a post only found within a specific category, the code might look like this:

<?php
if (is_category(9)) {
   // looking for category 9 posts
   include(TEMPLATEPATH . '/single2.php');
} else {
   // put this on every other category post
   include(TEMPLATEPATH . '/single1.php');
}
?>

Or, using a query, it might look like this:

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

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.

メディアアイコン

Wordpress uses media icons to represent attachment files 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):

  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 にとって特別な意味を持つことは覚えておいてください。さらなる情報は Template Hierarchy をご覧ください。

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
カテゴリテンプレート。あるカテゴリが要求されたときに使用。
author.php
著者テンプレート。ある著者が要求されたときに使用。
date.php
日時テンプレート。ある日付または時刻が要求されたときに使用。年・月・日・時・分・秒
archive.php
アーカイブテンプレート。あるカテゴリ・著者・日付が要求されたときに使用。このテンプレートは、各クエリ種類に対応する category.phpauthor.phpdate.php によって無効となる。
search.php
検索結果テンプレート。ある検索が実行されたときに使用。
404.php
404 Not Found テンプレート。WordPress が要求に合う記事やページを見つけられなかったときに使用。

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

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

The WordPress Default Theme (based on Michael Heilemann's Kubrick layout for WordPress 1.2) provides a good example of how queries are mapped onto templates.

The code <?php bloginfo('template_directory'); ?> 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.

The code <?php bloginfo('stylesheet_directory'); ?> 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.

The constant TEMPLATEPATH is a reference to the absolute path to the template directory for the current Theme (without the / at the end).

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 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 to catch at least a few of the problems 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, an article with good tips on preparing your Theme for the public.

参考資料

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

最新英語版: WordPress Codex » Theme Development