- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細)
「テーマの作成」の版間の差分
(テーマテンプレートファイル節、テンプレートからのファイルの参照節を和訳(残あり)) |
細 (→テーマ関数ファイル: en link) |
||
(11人の利用者による、間の103版が非表示) | |||
1行目: | 1行目: | ||
− | + | {{テーマ・テンプレートガイド|テンプレート}} | |
+ | このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、[[テーマの使い方]]をおさらいしましょう。[[テーマの使い方]]ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。 | ||
+ | <div id="Why WordPress Themes"> | ||
+ | ==なぜ、WordPress テーマを作るの?== | ||
+ | </div> | ||
+ | WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。 | ||
− | + | 自分で使う為や、クライアントに納める為、[[テーマレビュー|WordPress テーマの公式レポジトリに登録]]する為などには独自テーマを作ることもできます。他にはどの様な理由があるでしょうか? | |
− | < | + | * 自分だけのデザインの WordPress サイトを作るため |
− | + | * [[テンプレート入門|テンプレート]]、[[テンプレートタグ|テンプレートタグ]]、[[The_Loop|ループ]]<!-- [[:en:The Loop in Action|en]]-->を活用し、異なったコンテンツやデザインのサイトを作るため。 | |
− | + | * 特定のサイト機能のための代替テンプレートを提供するため。例えば[[Category Templates|カテゴリーページ]]や検索結果ページなど。 | |
+ | * 複数のサイトレイアウトを入れ替えるため、または[[プラグイン|テーマ (スタイル) スイッチャー]]を活用して、サイト管理者がサイトの外観を変えられるようにするため。 | ||
− | WordPress | + | WordPress テーマにはたくさんの利点もあります。 |
− | * | + | * スタイルと[[テンプレート入門|テンプレートファイル]]をシステムファイル (WordPress コア) から分離し、サイトの外観に大きな影響を及ぼすことなくアップグレードできるようになる。 |
− | + | * カスタマイズすることにより、サイトに独自の機能性を持たせることができる。 | |
− | * | + | * サイトの外観(見た目とレイアウト)を素早く変更できる。 |
− | * | + | * サイト管理者が CSS、HTML、PHPを知らなくてもかっこいいサイトを持てる。 |
− | * | + | |
− | + | なぜ独自テーマを作るべきなのか、考えてみましょう。 | |
− | * | + | * CSS、HTML、PHP についてもっと良く知る良い機会だから。 |
− | * | + | * CSS、HTML、PHP についての知識を実際に使ってみる良い機会だから。 |
− | * | + | * クリエイティブな作業だから。 |
− | * | + | * (たいていの場合は) 楽しいから。 |
+ | * [[Theme_Review|公開テーマ]]を作成すれば、[[WordPress への協力|WordPress コミュニティ]]と何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。 | ||
− | + | <div id="Theme Development Standards"> | |
+ | <div id="Theme_Development_Standards"> | ||
+ | == テーマの開発基準 == | ||
+ | </div> | ||
+ | WordPress テーマは以下の基準に則ってコーディングする必要があります。 | ||
− | * | + | * よく構成され、エラーのない PHP と、valid な HTML。詳しくは[[WordPress Coding Standards|WordPress コーディング基準]]をご覧ください。 |
− | * | + | * クリーンかつ valid な CSS 。詳しくは [[CSS Coding Standards]]/[[:en:CSS Coding Standards|en]] をご覧ください。 |
− | + | * [[Site Design and Layout|WordPress デザインリファレンス]]内のデザインガイドラインに従う。 | |
− | + | ||
− | + | ||
− | <div id=" | + | <div id="Anatomy of a Theme"> |
− | == テーマの構造 == | + | === テーマの構造 === |
</div> | </div> | ||
+ | WordPress テーマは、WordPress のテーマディレクトリ (デフォルトでは <code>wp-content/themes/</code>) の中のサブディレクトリに存在します。themes ディレクトリの場所は <code>wp-config.php</code>を使って[[Editing wp-config.php#Moving_themes_folder|移動することはできません]]/[[:en:Editing wp-config.php#Moving_themes_folder|en]])。サブディレクトリ (テーマフォルダ) には、スタイルシートファイル、[[テンプレート入門|テンプレートファイル]]、オプションの関数ファイル (<code>functions.php</code>)、JavaScript ファイル画像といったものが含まれています。例えば、「test」というテーマは、<code>wp-content/themes/test/</code> ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面の利用可能なテーマ一覧に表示されないので避けましょう。 | ||
− | WordPress | + | 新しくインストールされた WordPress にはデフォルトテーマが同梱されています。デフォルトテーマのファイルを詳しく見ることで、独自テーマファイルを作成する方法をよりよく理解することができます。 |
− | + | 図解付きの説明は [http://yoast.com/wordpress-theme-anatomy/ WordPress Theme Anatomy] のインフォグラフィックをご覧ください。 | |
− | WordPress | + | WordPress テーマは、画像ファイルと JavaScript ファイルを除くと、大きく分けて次の3種類のファイルから構成されています。 |
− | # | + | # ウェブページの外観(見た目とレイアウト)を制御しているスタイルシート (<code>style.css</code>)。 |
− | # [[# | + | # ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御する [[テンプレート入門|WordPress テンプレートファイル]]。 |
− | + | # オプションの関数が含まれている、テーマ関数ファイル (<code>functions.php</code>)。 | |
では、個別に見ていきましょう。 | では、個別に見ていきましょう。 | ||
− | <div id=" | + | <div id="Child Themes"> |
+ | ==== 子テーマ ==== | ||
+ | </div> | ||
+ | 最も単純なテーマは <code>style.css</code> ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。 | ||
+ | |||
+ | さらに詳しくは[[子テーマ]]のページをご覧ください。 | ||
+ | |||
+ | <div="Theme Stylesheet"> | ||
=== テーマスタイルシート === | === テーマスタイルシート === | ||
</div> | </div> | ||
+ | <code>style.css</code> は、テーマの「CSS スタイル」情報に加えて、コメントの形式で'''必ず'''「テーマ詳細」を記述する必要があります。管理画面の[[管理画面#Design_-_Change the Look of your Blog|テーマ設定ダイアログ]]で問題が生じるので、同じ詳細内容が別のテーマのコメント[[File Header|ヘッダ]]/[[:en:File Header|en]] にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。 | ||
− | + | 次の例は、テーマ「Twenty Thirteen」のスタイルシートの冒頭の数行にある、スタイルシートヘッダです。 | |
− | + | ||
− | <pre>/* | + | <pre> |
− | Theme Name: | + | /* |
− | Theme URI: | + | Theme Name: Twenty Thirteen |
− | + | Theme URI: http://wordpress.org/themes/twentythirteen | |
− | Author: | + | Author: the WordPress team |
− | Author URI: | + | 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: | + | 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. | ||
+ | */ | ||
+ | </pre> | ||
− | + | テーマ作者名 (Author) には、wordpress.org のユーザー名を使うことを推奨しますが、作者の本名でもかまいません。作者名は作者が自由に選ぶことができます。 | |
− | + | テーマの特徴をタグ (Tags) として指定することにより、管理画面の「テーマのインストール」にて、特徴フィルターを使った検索に反映されます。使用可能なタグのリストは[https://ja.wordpress.org/themes/ テーマディレクトリ] /[https://wordpress.org/themes/ en] をご覧ください。 | |
+ | |||
+ | <code>style.css</code> のコメントヘッダ行は、WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「[[管理画面]] > [[管理画面#.E5.A4.96.E8.A6.B3_-_.E3.83.96.E3.83.AD.E3.82.B0.E3.81.AE.E8.A6.8B.E3.81.9F.E7.9B.AE.E3.82.92.E5.A4.89.E3.81.88.E3.82.8B|外観]] > [[テーマの使い方|テーマ]]」画面に表示させるために必要なものです。 | ||
+ | |||
+ | <div id="Stylesheet Guidelines"> | ||
+ | ==== スタイルシートガイドライン ==== | ||
+ | </div> | ||
+ | * CSS を記述する際には [[CSS_Coding_Standards|CSS コーディング基準]] / [https://make.wordpress.org/core/handbook/coding-standards/css CSS coding standards en]に従う。 | ||
+ | * 可能であれば valid な CSS を使う。ただし、ベンダープレフィックスを使って CSS3 を活用する場合は除く。 | ||
+ | * CSS ハックは最小限にとどめる。明らかな例外としては特定のブラウザへのサポート(大抵の場合は特定のバージョンの IE)。可能であれば CSS ハックは別セクション、もしくは別ファイルに分ける。 | ||
+ | * 投稿/固定ページ本文とコメント本文において、使われる可能性のある全てのHTML要素のスタイルを、テーマ内(子テーマがある場合を除く)で指定する。 | ||
+ | ** テーブル、キャプション、画像、リスト、引用、など。 | ||
+ | * 印刷に適したスタイルの追加を強く推奨する。 | ||
+ | ** 印刷用のスタイルシートを <tt>media="print"</tt> と指定してインクルード、もしくはメインのスタイルシート内に記述する。 | ||
<div id="Functions_File"> | <div id="Functions_File"> | ||
− | === | + | |
+ | === テーマ関数ファイル === | ||
</div> | </div> | ||
+ | テーマでは、オプションとして、テーマのサブディレクトリ内に <code>functions.php</code> というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます (管理画面とサイト表示の両方で)。このファイルの使用例: | ||
− | + | * テーマスタイルシートとスクリプトのエンキュー。 [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]] / [[:en:Plugin_API/Action_Reference/wp_enqueue_scripts|en]]を参照。 | |
+ | |||
+ | * [[Widgets_API|サイドバー]]、[[Navigation Menus|ナビゲーションメニュー]]、[[Post Thumbnails|投稿サムネイル]]、[[Post Formats|投稿フォーマット]]、[[Custom Headers|カスタムヘッダー]]、[[Custom Backgrounds|カスタム背景]]などの[[Theme Features|テーマ機能]]に対応するための定義 | ||
* テーマ内の複数のテンプレートファイルで使う関数の定義 | * テーマ内の複数のテンプレートファイルで使う関数の定義 | ||
* 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置 | * 色・様式・その他テーマの外観についてのオプションをユーザが設定できるようにする管理画面の設置 | ||
+ | <!-- 英語版では[[Sidebars]]へのリンクとなっているが、実質ウィジェットのことであり、日本語版のSidebarsもないことから、[[Widgets_API]]へのリンクとした。 --> | ||
− | + | WordPress のデフォルトテーマには、<code>functions.php</code> ファイルが入っており、これら機能の多くを定義しているので見本にするといいでしょう。<code>functions.php</code> は基本的にプラグインのように動作するので、このファイルでできることの情報は、[[Writing a Plugin#Programming Your Plugin|プラグインの作成]]リストを見るのが一番です。 | |
+ | <!-- 英語版では [[Plugins Resources]] list だった箇所が [[Function Reference]] list へのリンクに変更されたのですが、[[Writing a Plugin]] または [[プラグイン API]] のほうがよいように思います。 --> | ||
+ | |||
+ | '''関数を ''functions.php'' に定義するのか、プラグインに定義するのか、に関して:''' | ||
+ | 同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数は<code>functions.php</code>ではなく、[[Plugins|プラグイン]]内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。 | ||
+ | |||
+ | <div id="Template Files"> | ||
− | |||
=== テーマテンプレートファイル === | === テーマテンプレートファイル === | ||
</div> | </div> | ||
+ | [[テンプレート入門|テンプレート]]は、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして [[Template Tags|WordPress テンプレートタグ]]で構成されています。 | ||
+ | |||
+ | それでは、テーマの部品として定義できる様々なテンプレートを見てみましょう。 | ||
+ | |||
+ | WordPress では、サイトの各種の表示を個別のテンプレートとして定義できるようになっていますが、サイト全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、[[Template Hierarchy|テンプレート階層]]に基づいて選ばれ、生成されます。 | ||
+ | |||
+ | テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する''全ての''ページ用のテンプレートとして、<code>index.php</code> というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。 | ||
+ | |||
+ | <div id="Template Files List"> | ||
+ | ==== テンプレートファイル一覧 ==== | ||
+ | </div> | ||
+ | WordPress が認識するテンプレートファイルの一覧は次のとおりです。もちろん、他のスタイルシート・画像・ファイルもテーマに含めることができます。ただ、以下のファイルが ''WordPress にとって特別な意味を持つ''ことは覚えておいてください。追加情報は[[Template Hierarchy|テンプレート階層]]をご覧ください。 | ||
+ | |||
+ | ;<code>style.css</code>: メインのスタイルシート。テーマにはこのファイルが'''必須'''で、テーマのヘッダ情報を含まなければなりません。 | ||
+ | ;''rtl.css'': RTL スタイルシート。ウェブサイトのテキスト方向が右から左の場合、このファイルが'''自動的に'''適用されます。RTL スタイルシートは [http://wordpress.org/extend/plugins/rtler/ the RTLer] プラグインを使って生成することもできます。 | ||
+ | ;<code>index.php</code>: メインテンプレート。([[#テーマスタイルシート|親テーマのテンプレートを利用]]するのではなく) このテーマ自身のテンプレートを設けるなら <code>index.php</code> は必須。 | ||
+ | ;<code>comments.php</code>: コメントテンプレート。 | ||
+ | ;''front-page.php'': フロントページテンプレート。home.phpとfront.phpが両方存在した場合は、front-page.phpがフロントページ表示用のテンプレートとして使われます。 | ||
+ | ;<code>home.php</code>: ホームページテンプレート。フロントページの表示(にデフォルトとして設定されている最新の投稿)に使われる。[[Creating a Static Front Page|固定ページをフロントページとして設定]]した場合、指定した固定ページがフロントページの表示に使われます。 | ||
+ | ;<code>single.php</code>: 個別投稿テンプレート。ひとつの投稿が要求 (クエリ) されたときに使用。このクエリテンプレートが存在しないときは <code>index.php</code> が使われる。この他のクエリテンプレートも同様。 | ||
+ | ;<code>single-<post-type>.php</code>: [[カスタム投稿タイプ]]の個別投稿が要求 (クエリ) されたときに使われるテンプレート。例えば <tt>books</tt> というカスタム投稿タイプを個別表示するためには <tt>single-books.php</tt> が使われる。 | ||
+ | ;<code>page.php</code>: 固定ページテンプレート。特定の[[Pages|固定ページ]]が要求されたときに使用。 | ||
+ | ;<code>category.php</code>: [[Category Templates|カテゴリテンプレート]]。あるカテゴリが要求されたときに使用。 | ||
+ | ;<tt>tag.php</tt>: [[Tag Templates|タグテンプレート]]/[[:en:Tag Templates|en]]。タグが要求されたときに使用。 | ||
+ | ;<tt>taxonomy.php</tt>: [[Taxonomy Templates|タクソノミーテンプレート]]/[[:en:Taxonomy Templates|en]]。[[カスタム分類]]内の個別項目が要求されたときに使用。 | ||
+ | ;<code>author.php</code>: [[Author Templates|作成者テンプレート]]/[[:en:Author Templates|en]]。作成者が要求されたときに使用。 | ||
+ | ;<code>date.php</code>: 日付別テンプレート。ある日付または時刻が要求されたときに使用。年、月、日、時、分、秒。 | ||
+ | ;<code>archive.php</code>: アーカイブテンプレート。あるカテゴリ、作成者、日付が要求されたときに使用。各クエリの種類に対応する <code>category.php</code>、<code>author.php</code>、<code>date.php</code> がそれぞれ存在する場合は、そのクエリに対してアーカイブテンプレートは無効となる。 | ||
+ | ;<code>search.php</code>: 検索結果テンプレート。ある検索が実行されたときに使用。 | ||
+ | ;''attachment.php'': 添付ファイルテンプレート。特定の添付ファイルを個別表示するときに使用。 | ||
+ | ;''image.php'': 添付画像ファイルテンプレート。特定の添付画像ファイルを個別表示するときに使用。存在しない場合は ''attachment.php'' が使用される。 | ||
+ | ;<code>404.php</code>: '''[[Creating an Error 404 Page|404 Not Found]]''' テンプレート。WordPress が要求に合う投稿やページを見つけられなかったときに使用。 | ||
− | [[ | + | これらのファイルは、[[テンプレート階層]]に従って適用できるファイルがあるときや、対応する[[Conditional Tags|条件タグ]]が true を返すとき、<code>index.php</code> に代わって使われるため、WordPress にとって特別な意味を持ちます。例えば、個別投稿が表示される際に <code>[[Conditional Tags#A Single Post Page|is_single()]]</code> 関数は 'true' を返し、有効になっているテーマ内に <code>single.php</code> ファイルがあれば、ページの生成にはこのテンプレートが使われます。 |
− | + | <div id="Basic Templates"> | |
− | |||
==== 基本的なテンプレート ==== | ==== 基本的なテンプレート ==== | ||
</div> | </div> | ||
+ | WordPress テーマは、最小で2ファイルから構成される。 | ||
− | + | * ''style.css'' | |
+ | * ''index.php'' | ||
− | + | 両ファイルはそのテーマのディレクトリ内に置きます。<code>index.php</code> [[テンプレート入門|テンプレートファイル]]はとても融通が利きます。これは、参照するヘッダー・サイドバー・フッター・コンテンツ・カテゴリー・アーカイブ・検索結果・エラーほか、WordPress 上で生成されるウェブページすべてに用いることができます。 | |
− | + | ||
− | + | もしくは、モジュール式のテンプレートファイルとして''分割''することもできます。別のテンプレートファイルを用意しなかった場合、WordPress は内蔵のデフォルトファイルか、デフォルト関数を用いることもあります。例えば、''searchform.php'' テンプレートファイルがないとき、WordPress はデフォルト関数を使って検索フォームを表示します。 | |
− | + | ||
− | + | 代表的なテンプレートファイルは次のとおりです。 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | * ''comments.php'' | |
+ | * ''comments-popup.php'' | ||
+ | * ''footer.php'' | ||
+ | * ''header.php'' | ||
+ | * ''sidebar.php'' | ||
− | + | テンプレートファイルを使うことにより、''index.php'' マスターファイルのテンプレートタグをを記入してこれら他のファイル | |
− | + | ||
− | + | ||
− | ''include'' | + | * ヘッダーを読み込むには <tt>[[関数リファレンス/get_header|get_header()]]</tt> を使用。 |
+ | * サイドバーを読み込むには <tt>[[関数リファレンス/get sidebar|get_sidebar()]]</tt> を使用。 | ||
+ | * フッターを読み込むには <tt>[[関数リファレンス/get footer|get_footer()]]</tt> を使用。 | ||
+ | * 検索フォームを読み込むには <tt>[[関数リファレンス/get_search_form|get_search_form()]]</tt> を使用。 | ||
+ | |||
+ | ''include'' の使用例: | ||
<pre><?php get_sidebar(); ?> | <pre><?php get_sidebar(); ?> | ||
120行目: | 196行目: | ||
<?php get_footer(); ?></pre> | <?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'' を同梱しましょう。 | |
− | <div id=" | + | 各種テンプレートの動作や異なる情報を表示する方法については、[[WordPress サイトデザイン リファレンス#テンプレートファイル|テンプレートファイルの項]]をご覧ください。 |
− | ==== | + | |
+ | <div id="Custom Page Templates"> | ||
+ | ====カスタム固定ページテンプレート==== | ||
</div> | </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]]を参照)。 | |
− | [[Template | + | 冒頭に記述する上記の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 | + | <pre> |
− | if (is_category(9)) { | + | <?php |
− | + | if ( is_category( '9' ) ) { | |
− | + | get_template_part( 'single2' ); // カテゴリー ID 9 に当てはまるとき | |
} else { | } else { | ||
− | + | get_template_part( 'single1' ); // 当てはまらないカテゴリの投稿のとき | |
− | + | ||
} | } | ||
− | ?></pre> | + | ?> |
+ | </pre> | ||
− | + | あるいは、クエリを用いた場合、次のようにもなります。 | |
− | <pre><?php | + | <pre> |
+ | <?php | ||
$post = $wp_query->post; | $post = $wp_query->post; | ||
− | if ( in_category('9') ) { | + | if ( in_category( '9' ) ) { |
− | + | get_template_part( 'single2' ); | |
} else { | } else { | ||
− | + | get_template_part( 'single1' ); | |
} | } | ||
− | ?></pre> | + | ?> |
+ | </pre> | ||
− | + | どちらのコードの例も、表示しようとしている投稿のカテゴリーに応じてテンプレートを使い分けています。クエリ条件はカテゴリに限りません。使える全ての種類の条件については、[[Conditional Tags|条件タグ]]のページをご覧ください。 | |
− | <div id=" | + | <div id="Defining Custom Templates"> |
− | === | + | ====カスタムテンプレートの定義==== |
</div> | </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=" | + | <div id="Plugin API Hooks"> |
− | === | + | ==== プラグイン API フック ==== |
</div> | </div> | ||
+ | テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、''アクションフック''を通して WordPress に機能を追加します。 (詳しくは[[Plugin API|プラグイン API]] を参照してください) | ||
− | WordPress | + | アクションフックの多くは WordPress のコア PHP コードの中に書かれており、動作させるために特別なタグをテーマに記述する必要はありません。しかし、プラグインがヘッダー、フッター、サイドバー、もしくはページの本文に、情報を直接表示できるようにするためのアクションフックが幾つかあり、これらはテーマに記述されている必要があります。以下が含めるべきアクションフックテンプレートタグの一覧です。 |
− | ;< | + | ; [[Plugin_API/Action_Reference/wp_enqueue_scripts|<tt>wp_enqueue_scripts</tt>]] |
− | ; | + | : テーマ機能ファイルで使用されます。外部スクリプトとスタイルシートをロードするために使用します。 |
− | + | ||
− | + | ; [[関数リファレンス/wp head|wp_head()]] | |
− | ;<code> | + | : テーマの <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=" | + | <div id="Theme Customization API"> |
− | === | + | ==== テーマカスタマイズ API ==== |
</div> | </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=" | + | <div id="Theme Classes"> |
− | === | + | ==== テーマのクラス要素 ==== |
</div> | </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=" | + | <div id="Template File Checklist"> |
− | === | + | === テンプレートファイルのチェックリスト === |
</div> | </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 部分の例です。 | |
− | + | ||
− | ; | + | <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> | ||
− | + | <div id="Navigation Menus (header.php)"> | |
− | + | ==== ナビゲーションメニュー (''header.php'') ==== | |
+ | </div> | ||
+ | * テーマのメインナビゲーションは [[関数リファレンス/wp_nav_menu|<tt>wp_nav_menu()</tt>]] を使うカスタムメニューに対応させる。 | ||
+ | ** メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。 | ||
+ | ** サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルに対応すること。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。 | ||
− | + | <div id="Widgets (sidebar.php)"> | |
− | + | ==== ウィジェット (''sidebar.php'') ==== | |
+ | </div> | ||
+ | * テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。 | ||
+ | * 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。 | ||
− | + | <div id="Footer (footer.php)"> | |
− | + | ==== フッター (''footer.php'') ==== | |
+ | </div> | ||
+ | * [[テンプレートタグ/wp_footer|<tt>wp_footer()</tt>]] を、<tt>body</tt> の閉じタグ直前に挿入する。 | ||
− | + | <pre> | |
− | + | <?php wp_footer(); ?> | |
+ | </body> | ||
+ | </html> | ||
+ | </pre> | ||
− | + | <div id="Index (index.php)"> | |
+ | ==== インデックス (''index.php'') ==== | ||
+ | </div> | ||
+ | * 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。 | ||
+ | * 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。 | ||
− | + | <div id="Archive (archive.php)"> | |
+ | ==== アーカイブ (''archive.php'') ==== | ||
+ | </div> | ||
+ | * アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。 | ||
+ | * 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。 | ||
+ | * 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。 | ||
− | <div id=" | + | <div id="Pages (page.php)"> |
− | == | + | ==== 固定ページ (''page.php'') ==== |
</div> | </div> | ||
+ | * 固定ページのタイトルと本文を表示する。 | ||
+ | * コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く) | ||
+ | * 分割された投稿のナビゲーションリンクをサポートする為に [[テンプレートタグ/wp_link_pages|<tt>wp_link_pages()</tt>]] を記述しておく。 | ||
+ | * タグ、カテゴリー、日付、作成者などのメタデータは表示しない。 | ||
+ | * 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。 | ||
− | + | <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>]] を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。 | ||
− | + | <div id="Comments (comments.php)"> | |
+ | ==== コメント (''comments.php'') ==== | ||
+ | </div> | ||
+ | * (投稿の)作成者によるコメントは、他のコメントと識別できるよう (違うハイライトするなど) にする。 | ||
+ | * 適切であれば Gravatar (グラバター。ユーザーのアバター) を表示する。 (訳注:Gravatar について詳しくは [[Gravatar_の使い方|Gravatar の使い方]]を参照) | ||
+ | * スレッド形式のコメントをサポートする。 | ||
+ | * トラックバック/ピンバックを表示する。 | ||
+ | * [http://php.net/manual/en/function.function-exists.php <tt>function_exist()</tt>] を用いた再宣言エラーを回避するチェックを除き、このファイルには関数定義を含めないようにする。理想的には全ての関数は ''functions.php'' にあるべき。 | ||
− | <div id=" | + | <div id="Search Results (search.php)"> |
+ | ==== 検索結果表示 (''search.php'') ==== | ||
+ | </div> | ||
+ | * 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。 | ||
+ | * 検索結果表示ページには検索された語句を表示する。シンプルだが検索内容を知らせるには有効な手段。特に検索結果が0件の場合に便利。[[テンプレートタグ/the_search_query|<tt>the_search_query()</tt>]] を使って表示するか、もしくは [[Function_Reference/get_search_query|<tt>get_search_query()</tt>]] /[[:en:Function_Reference/get_search_query|en]] を使って戻り値を取得する。例: | ||
+ | <pre><h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2></pre> | ||
+ | * 検索結果ページにも検索フォームを含めるのがよい。インクルードするには [[関数リファレンス/get_search_form|<tt>get_search_form()</tt>]] を使う。 | ||
+ | |||
+ | <div id="JavaScript"> | ||
+ | === JavaScript === | ||
+ | </div> | ||
+ | * JavaScript コードはできる限り外部ファイルに記述する。 | ||
+ | * スクリプトをロードするには [[Function_Reference/wp_enqueue_script|<tt>wp_enqueue_script()</tt>]] /[[:en:Function_Reference/wp_enqueue_script|en]] を使う。 | ||
+ | * HTML ドキュメント (テンプレートファイル) に直接ロードする JavaScript は、古いブラウザ上でのエラーを回避する為に、CDATAセクションに記述する。 | ||
+ | <pre> | ||
+ | <script type="text/javascript"> | ||
+ | /* <![CDATA[ */ | ||
+ | // content of your Javascript goes here | ||
+ | /* ]]> */ | ||
+ | </script> | ||
+ | </pre> | ||
+ | |||
+ | <div id="Screenshot"> | ||
+ | === スクリーンショット === | ||
+ | </div> | ||
+ | テーマのスクリーンショットを作ります。ファイル名は ''screenshot.png'' と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 880x660。実際には 387x290 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。 | ||
+ | |||
+ | 注:場合により、 .jpg、.jpeg、.gif は 有効な拡張子 でスクリーンショットのファイル形式です。 (推奨ではありません). | ||
+ | |||
+ | <div id="Theme Options"> | ||
+ | |||
+ | === テーマ設定 === | ||
+ | </div> | ||
+ | テーマは [[Appearance Theme Options Screen|テーマ設定画面]] /[[:en:Appearance Theme Options Screen|en]] を実装することも可能です。コードの例は [http://themeshaper.com/sample-theme-options/ A Sample WordPress Theme Options Page] を参照してください。 | ||
+ | |||
+ | ユーザー[[Roles and Capabilities#Roles|権限グループ]]にテーマ設定画面へのアクセスを有効化する場合は、"switch_themes" ではなく "edit_theme_options" 権限を使います。但し、実際にユーザー権限でもテーマの変更を可能とする場合は除く。より詳しくは[[Roles and Capabilities#Capabilities|権限]]と[[Adding Administration Menus|管理メニューの追加]]を参照してください。 | ||
+ | |||
+ | [[Version 3.0|バージョン 3.0]] より、WordPress [[Glossary#Multisite|マルチサイト]] の場合、デフォルトでは管理者権限グループが "edit_themes" 権限を有していない設定に変更されました。テーマ内で"edit_themes" 権限を使って管理者のアクセス権限を設定している場合は注意してください。[http://wordpress.org/support/topic/capability-manage_options-vs-edit_themes#post-1566844 詳しい説明はこちら]。この様なケースにおいて、管理者にテーマ設定メニューを表示するには "edit_theme_options" 権限を使います。WordPress のマルチサイト機能を使う場合は、管理者権限グループの [[Roles and Capabilities#Additional_Admin_Capabilities|additional capabilities]] を参照ください。 | ||
+ | |||
+ | <div id="Theme Testing Process"> | ||
+ | |||
+ | == テーマのテスト過程 == | ||
+ | </div> | ||
+ | # PHP と WordPress エラーを修正する。非推奨関数の呼び出しや、WordPress 関連のエラーを確認する為に次のデバッグ設定を <tt>wp-config.php</tt> に追加してください: <tt>define('WP_DEBUG', true);</tt>。詳しくは [[WordPress_Deprecated_Functions_Hook|非推奨関数フック]] /[[:en:WordPress_Deprecated_Functions_Hook|en]] も参照してください | ||
+ | # [[Theme_Development#.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88|テンプレートファイルのチェックリスト]] に照らし合わせてテンプレートファイルをチェックする(上記参照)。 | ||
+ | # [[Theme Unit Test|テーマユニットテスト]]を通す。 | ||
+ | # HTMLとCSSをバリデートする。[[Validating a Website]] /[[:en:Validating a Website|en]]参照。 | ||
+ | # JavaScript エラーをチェックする。 | ||
+ | # 全てのターゲットブラウザでテストする。例えば、IE7、IE8、IE9、Safari、Chrome、Opera、Firefox、MIcrosoft Edge。 | ||
+ | # 無関係なコメントやデバッグ設定、TODO アイテムなどを取り除く。 | ||
+ | # テーマディレクトリにテーマを登録して公開する場合は、[[Theme Review|テーマレビュー]] を確認する。 | ||
+ | |||
+ | <div id="Resources and References"> | ||
== 参考資料 == | == 参考資料 == | ||
</div> | </div> | ||
+ | <div id="Code Standards"> | ||
+ | === コーディング基準 === | ||
+ | </div> | ||
+ | * [[Know Your Sources]] /[[:en:Know Your Sources|en]] | ||
+ | * [[WordPress Coding Standards|WordPress コーディング基準]] | ||
+ | * [[CSS Coding Standards]] /[[:en:CSS Coding Standards|en]] | ||
− | [[WordPress | + | <div id="Theme Design"> |
+ | === テーマデザイン === | ||
+ | </div> | ||
+ | * [[Site Design and Layout|WordPress サイトデザインリファレンス]] | ||
+ | |||
+ | <div id="CSS"> | ||
+ | === CSS === | ||
+ | </div> | ||
+ | * [[CSS]] | ||
+ | * [[CSS Shorthand]] /[[:en:CSS Shorthand|en]] | ||
+ | * [[CSS#WordPress_.E3.81.8C.E7.94.9F.E6.88.90.E3.81.99.E3.82.8B.E3.82.AF.E3.83.A9.E3.82.B9|WordPress が生成するクラス]] | ||
+ | |||
+ | <div id="Templates"> | ||
+ | === テンプレート === | ||
+ | </div> | ||
+ | * [[Stepping Into Templates|テンプレート入門]] | ||
+ | * [[Templates|テンプレート]] | ||
+ | * [[Template Hierarchy|テンプレート階層]] | ||
+ | * [[Template Tags|テンプレートタグ]] | ||
+ | * [[The Loop]] | ||
+ | * [[Conditional Tags|条件分岐タグ]] | ||
+ | * [[Function Reference|関数リファレンス]] | ||
+ | * [[I18n for WordPress Developers]] | ||
+ | * [[Data Validation|データ検証]] | ||
+ | |||
+ | <div id="Functions listing"> | ||
+ | === 関数リスト === | ||
+ | </div> | ||
+ | * [[Function Reference|関数リファレンス]] | ||
+ | |||
+ | <div id="Testing and QA"> | ||
+ | === テストと QA === | ||
+ | </div> | ||
+ | * [[テーマユニットテスト]] | ||
+ | * [[Validating a Website]] /[[:en:Validating a Website|en]] | ||
+ | * [[CSS Fixing Browser Bugs]] /[[:en:CSS Fixing Browser Bugs|en]] | ||
+ | * [[CSS Troubleshooting]] /[[:en:CSS Troubleshooting|en]] | ||
+ | * [http://modern.ie/ modern.IE: for testing IE on different platforms with open-source tools] | ||
+ | |||
+ | <div id="Release & Promotion"> | ||
+ | |||
+ | === リリース & プロモーション === | ||
+ | </div> | ||
+ | * [[Theme Review|テーマレビューのプロセス]] | ||
+ | |||
+ | <div id="External Resources & Tutorials"> | ||
+ | === 外部参考資料 & チュートリアル === | ||
+ | </div> | ||
+ | * [http://www.chipbennett.net/2011/02/17/incorporating-the-settings-api-in-wordpress-themes/ Incorporating the Settings API in WordPress Themes] | ||
+ | * [http://htmldog.com/ HTML Dog] | ||
+ | * [http://generatewp.com/theme-support/ WordPress Theme Support Generator] | ||
− | {{原文|Theme Development}} | + | {{原文|Theme Development|152914}} <!-- 14:56, 29 July 2015 Jdgrimes 版 --> |
{{DEFAULTSORT:てえまのさくせい}} | {{DEFAULTSORT:てえまのさくせい}} | ||
[[Category:デザインとレイアウト]] | [[Category:デザインとレイアウト]] | ||
[[Category:WordPress の開発]] | [[Category:WordPress の開発]] | ||
+ | [[Category:UI Link]] | ||
+ | [[bn:থিম ডেভলপমেন্ট]] | ||
[[en:Theme Development]] | [[en:Theme Development]] | ||
+ | [[es:Desarrollo de Temas]] | ||
+ | [[ja:テーマの作成]] | ||
+ | [[ko:Theme Development]] | ||
+ | [[pt-br:Desenvolvimento de Temas]] | ||
+ | [[ru:Создание тем]] | ||
+ | [[zh-cn:主题开发]] | ||
+ | [[zh-tw:主題開發]] |
2015年7月30日 (木) 16:39時点における最新版
このページでは、 WordPress テーマの開発について説明します。テーマのインストール方法、テーマの使い方について学びたい方は、テーマの使い方をおさらいしましょう。テーマの使い方ではテーマの有効化や、新しいテーマの入手方法について説明していますが、このページでは自分用のテーマをコーディングする為の技術的側面にてついて説明しています。
目次
なぜ、WordPress テーマを作るの?
WordPress テーマは、WordPress サイトの外観と機能性を作り上げるためのファイルのセットです。テーマはそれぞれ異なっていて、ユーザーが外観をすぐに変更できるよう、たくさんの種類があります。
自分で使う為や、クライアントに納める為、WordPress テーマの公式レポジトリに登録する為などには独自テーマを作ることもできます。他にはどの様な理由があるでしょうか?
- 自分だけのデザインの WordPress サイトを作るため
- テンプレート、テンプレートタグ、ループを活用し、異なったコンテンツやデザインのサイトを作るため。
- 特定のサイト機能のための代替テンプレートを提供するため。例えばカテゴリーページや検索結果ページなど。
- 複数のサイトレイアウトを入れ替えるため、またはテーマ (スタイル) スイッチャーを活用して、サイト管理者がサイトの外観を変えられるようにするため。
WordPress テーマにはたくさんの利点もあります。
- スタイルとテンプレートファイルをシステムファイル (WordPress コア) から分離し、サイトの外観に大きな影響を及ぼすことなくアップグレードできるようになる。
- カスタマイズすることにより、サイトに独自の機能性を持たせることができる。
- サイトの外観(見た目とレイアウト)を素早く変更できる。
- サイト管理者が CSS、HTML、PHPを知らなくてもかっこいいサイトを持てる。
なぜ独自テーマを作るべきなのか、考えてみましょう。
- CSS、HTML、PHP についてもっと良く知る良い機会だから。
- CSS、HTML、PHP についての知識を実際に使ってみる良い機会だから。
- クリエイティブな作業だから。
- (たいていの場合は) 楽しいから。
- 公開テーマを作成すれば、WordPress コミュニティと何かを共有し、貢献したことで気分が良くなれるから (そう、自慢ができます!)。
テーマの開発基準
WordPress テーマは以下の基準に則ってコーディングする必要があります。
- よく構成され、エラーのない PHP と、valid な HTML。詳しくはWordPress コーディング基準をご覧ください。
- クリーンかつ valid な CSS 。詳しくは CSS Coding Standards/en をご覧ください。
- 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種類のファイルから構成されています。
- ウェブページの外観(見た目とレイアウト)を制御しているスタイルシート (
style.css
)。 - ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御する WordPress テンプレートファイル。
- オプションの関数が含まれている、テーマ関数ファイル (
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.php
、author.php
、date.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 マスターファイルのテンプレートタグをを記入してこれら他のファイル
- ヘッダーを読み込むには get_header() を使用。
- サイドバーを読み込むには get_sidebar() を使用。
- フッターを読み込むには get_footer() を使用。
- 検索フォームを読み込むには get_search_form() を使用。
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.php や index.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() を通す必要があります。一般的には title、alt、value 属性をチェックしましょう。
一般的な場合における、安全なアウトプットが必要なの時の為に、幾つかの特別なテンプレートタグがあります。セキュリティーの脆弱性を避けるために、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()/en と htmlspecialchars() は esc_html()/enに。clean_url()/en は esc_url()/enに。attribute_escape()/en は esc_attr()/enに。さらに詳しくは データ検証 を参照してください。
翻訳対応 / 国際化 (I18n)
スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能なテキストを WordPress の gettext ベースの i18n 関数で囲みましょう。これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストにフックすることができ、翻訳しやすくなります。WordPress Localization/en と I18n 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() を使うカスタムメニューに対応させる。
- メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
- サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルに対応すること。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。
- テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
- 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
- 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() を記述しておく。
- 投稿のタイトルと本文を表示する。
- タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
- 投稿日を表示する。
- デザイン適理由で重要でない限り、日付のフォーマットと時刻のフォーマットの設定を尊重すること。 (日付のフォーマットと時刻のフォーマットに関するユーザー設定は 管理画面 > 設定 > 一般 の中にある)
- ユーザー設定に応じた出力には the_time( get_option( 'date_format' ) ) を使う。
- (適切であれば) 作成者名を表示する。
- 投稿カテゴリーと投稿タグを表示する。
- 編集権限のあるログイン中のユーザーには "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 を参照ください。
テーマのテスト過程
- PHP と WordPress エラーを修正する。非推奨関数の呼び出しや、WordPress 関連のエラーを確認する為に次のデバッグ設定を wp-config.php に追加してください: define('WP_DEBUG', true);。詳しくは 非推奨関数フック /en も参照してください
- テンプレートファイルのチェックリスト に照らし合わせてテンプレートファイルをチェックする(上記参照)。
- テーマユニットテストを通す。
- HTMLとCSSをバリデートする。Validating a Website /en参照。
- JavaScript エラーをチェックする。
- 全てのターゲットブラウザでテストする。例えば、IE7、IE8、IE9、Safari、Chrome、Opera、Firefox、MIcrosoft Edge。
- 無関係なコメントやデバッグ設定、TODO アイテムなどを取り除く。
- テーマディレクトリにテーマを登録して公開する場合は、テーマレビュー を確認する。
参考資料
コーディング基準
テーマデザイン
CSS
テンプレート
関数リスト
テストと QA
- テーマユニットテスト
- Validating a Website /en
- CSS Fixing Browser Bugs /en
- CSS Troubleshooting /en
- modern.IE: for testing IE on different platforms with open-source tools
リリース & プロモーション
外部参考資料 & チュートリアル
最新英語版: WordPress Codex » Theme Development (最新版との差分)
bn:থিম ডেভলপমেন্ট