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

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

テーマの作成

提供: WordPress Codex 日本語版
移動先: 案内検索

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

目次

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

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

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

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

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

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

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

テーマの開発基準

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

テーマの構造

WordPress テーマは、WordPress のテーマディレクトリ (デフォルトでは wp-content/themes/) の中のサブディレクトリに存在します。themes ディレクトリの場所は wp-config.phpを使って移動することはできません/en)。サブディレクトリ (テーマフォルダ) には、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、JavaScript ファイル画像といったものが含まれています。例えば、「test」というテーマは、wp-content/themes/test/ ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面の利用可能なテーマ一覧に表示されないので避けましょう。

新しくインストールされた WordPress にはデフォルトテーマが同梱されています。デフォルトテーマのファイルを詳しく見ることで、独自テーマファイルを作成する方法をよりよく理解することができます。

図解付きの説明は WordPress Theme Anatomy のインフォグラフィックをご覧ください。

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

  1. ウェブページの外観(見た目とレイアウト)を制御しているスタイルシート (style.css)。
  2. ウェブページとして表示する情報をデータベースから取得し、ウェブページを生成する方法を制御する WordPress テンプレートファイル
  3. オプションの関数が含まれている、テーマ関数ファイル (functions.php)。

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

子テーマ

最も単純なテーマは style.css ファイルと画像だけで構成されている子テーマです。これは、他のテーマを「親」とする「子」のテーマを作れる仕組みがあるからです。

さらに詳しくは子テーマのページをご覧ください。

<div="Theme Stylesheet">

テーマスタイルシート

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

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

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

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

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

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

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

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

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

テーマ関数ファイル

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

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

WordPress のデフォルトテーマには、functions.php ファイルが入っており、これら機能の多くを定義しているので見本にするといいでしょう。functions.php は基本的にプラグインのように動作するので、このファイルでできることの情報は、プラグインの作成リストを見るのが一番です。

関数を functions.php に定義するのか、プラグインに定義するのか、に関して: 同じ関数が1つ以上のテーマで使用可能であることが必要な場合、その関数はfunctions.phpではなく、プラグイン内にて定義する方がいいでしょう。テンプレートタグやその他の個別に定義した関数もプラグイン内にて定義する対象となるでしょう。プラグイン内で定義された関数は全てのテーマで使うことができます。

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

テンプレートは、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして WordPress テンプレートタグで構成されています。

それでは、テーマの部品として定義できる様々なテンプレートを見てみましょう。

WordPress では、サイトの各種の表示を個別のテンプレートとして定義できるようになっていますが、サイト全体を機能させるためにあらゆるテンプレートファイルの全てを揃えなければならないわけではありません。テンプレートは、そのテーマに存在するテンプレートに応じて、テンプレート階層に基づいて選ばれ、生成されます。

テーマ開発者としては、カスタマイズしたいテンプレートだけを選んで用意できるのです。極端な例を挙げると、サイトが生成・表示する全てのページ用のテンプレートとして、index.php というテンプレートファイル一つだけを使うこともできます。より一般的には、最大限のカスタマイズができるように、異なる表示には別のテンプレートファイルを用意します。

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

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

style.css
メインのスタイルシート。テーマにはこのファイルが必須で、テーマのヘッダ情報を含まなければなりません。
rtl.css
RTL スタイルシート。ウェブサイトのテキスト方向が右から左の場合、このファイルが自動的に適用されます。RTL スタイルシートは the RTLer プラグインを使って生成することもできます。
index.php
メインテンプレート。(親テーマのテンプレートを利用するのではなく) このテーマ自身のテンプレートを設けるなら index.php は必須。
comments.php
コメントテンプレート。
front-page.php
フロントページテンプレート。home.phpとfront.phpが両方存在した場合は、front-page.phpがフロントページ表示用のテンプレートとして使われます。
home.php
ホームページテンプレート。フロントページの表示(にデフォルトとして設定されている最新の投稿)に使われる。固定ページをフロントページとして設定した場合、指定した固定ページがフロントページの表示に使われます。
single.php
個別投稿テンプレート。ひとつの投稿が要求 (クエリ) されたときに使用。このクエリテンプレートが存在しないときは index.php が使われる。この他のクエリテンプレートも同様。
single-<post-type>.php
カスタム投稿タイプの個別投稿が要求 (クエリ) されたときに使われるテンプレート。例えば books というカスタム投稿タイプを個別表示するためには single-books.php が使われる。
page.php
固定ページテンプレート。特定の固定ページが要求されたときに使用。
category.php
カテゴリテンプレート。あるカテゴリが要求されたときに使用。
tag.php
タグテンプレート/en。タグが要求されたときに使用。
taxonomy.php
タクソノミーテンプレート/enカスタム分類内の個別項目が要求されたときに使用。
author.php
作成者テンプレート/en。作成者が要求されたときに使用。
date.php
日付別テンプレート。ある日付または時刻が要求されたときに使用。年、月、日、時、分、秒。
archive.php
アーカイブテンプレート。あるカテゴリ、作成者、日付が要求されたときに使用。各クエリの種類に対応する category.phpauthor.phpdate.php がそれぞれ存在する場合は、そのクエリに対してアーカイブテンプレートは無効となる。
search.php
検索結果テンプレート。ある検索が実行されたときに使用。
attachment.php
添付ファイルテンプレート。特定の添付ファイルを個別表示するときに使用。
image.php
添付画像ファイルテンプレート。特定の添付画像ファイルを個別表示するときに使用。存在しない場合は attachment.php が使用される。
404.php
404 Not Found テンプレート。WordPress が要求に合う投稿やページを見つけられなかったときに使用。

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

基本的なテンプレート

WordPress テーマは、最小で2ファイルから構成される。

  • style.css
  • index.php

両ファイルはそのテーマのディレクトリ内に置きます。index.php テンプレートファイルはとても融通が利きます。これは、参照するヘッダー・サイドバー・フッター・コンテンツ・カテゴリー・アーカイブ・検索結果・エラーほか、WordPress 上で生成されるウェブページすべてに用いることができます。

もしくは、モジュール式のテンプレートファイルとして分割することもできます。別のテンプレートファイルを用意しなかった場合、WordPress は内蔵のデフォルトファイルか、デフォルト関数を用いることもあります。例えば、searchform.php テンプレートファイルがないとき、WordPress はデフォルト関数を使って検索フォームを表示します。

代表的なテンプレートファイルは次のとおりです。

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

テンプレートファイルを使うことにより、index.php マスターファイルのテンプレートタグをを記入してこれら他のファイル

include の使用例:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

テンプレート関数の中には、その関数のデフォルトファイルが非推奨、もしくは存在しない場合があります。その場合はこれら(テンプレート)ファイルをテーマに同梱しなければいけません。バージョン 3.0 の時点では非推奨となったデフォルトファイルは wp-includes/theme-compat にあります。例えば、 get_header() が安全に動作する為には header.php を、 comments_template() の為には comments.php を同梱しましょう。

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

カスタム固定ページテンプレート

固定ページのテンプレートファイルはテーマディレクトリの中にあります。固定ページの為の新規のカスタム固定ページテンプレートを作成するには、新しくファイルを作る必要があります。例えば、snarfer.php という固定ページの為の固定ページテンプレートを作るとします。snarfer.php ファイルの冒頭に以下のコードを記述します。

<?php
/*
Template Name: Snarfer
*/
?>

上記コードによって snarfer.php が "Snarfer" テンプレートとして定義されます。"Snarfer" を変更することで、固定ページテンプレート名 (Template Name) を変更することができます。このテンプレート名は、管理画面のテーマの編集ページのテンプレート一覧に表示されます。

カスタム固定ページテンプレートのファイル名は、.php の拡張子がついていればほぼ何でもかまいません(ただし、WordPress 内部で予約されている特別なファイル名は除く。使用できないファイル名のリストはreserved Theme filenamesを参照)。

冒頭に記述する上記の5行のコードの後に何を記述するかはあなた次第です。記述したコードの内容により、Snarfer 固定ページテンプレートを使う固定ページがどのように表示されるかコントロールされます。この目的に使用できる WordPress テンプレート関数の詳細はテンプレートタグをご覧ください。場合によっては、他のテンプレートファイル(page.phpindex.php など)をコピーし、snarfer.php とリネームし、上記5行のコードをファイルの冒頭に記述する方が作りやすいでしょう。全てをスクラッチから(イチから)作るよりも、HTML と PHP コードを変更するだけですみます。例は下記をご覧ください。ページテンプレートを作成し、テーマディレクトリに保存すると、固定ページを新規作成もしくは編集の際に、選択肢の1つとして現れます(注意:上記方法によって、少なくとも1つ以上のページテンプレートが存在しない限り、固定ページの作成・編集時にページテンプレート選択のオプションは表示されません)。

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

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

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

テンプレート階層では、さらに特定の用途の、例えば category-6.php のようなファイルを取得できます。このファイルは、カテゴリーID 6 のページを生成する際に category.php に替わって使われます (バージョン 2.3 以下では、カテゴリーID はログイン中に「管理 > カテゴリー」で確認できます。バージョン 2.5 では ID カラムが管理画面から削除されました。 'カテゴリーの編集' をクリックして URL の '...categories.php?action=edit&cat_ID=3' という部分を確認してください。cat_ID=3 なので カテゴリー ID は 3になります)。この詳細は、ーテンプレートをご覧ください。

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

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

<?php
if ( is_category( '9' ) ) {
    get_template_part( 'single2' ); // カテゴリー ID 9 に当てはまるとき
} else {
    get_template_part( 'single1' ); // 当てはまらないカテゴリの投稿のとき
}
?>

あるいは、クエリを用いた場合、次のようにもなります。

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

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

カスタムテンプレートの定義

WordPress プラグインを使って、カスタム基準に応じるカスタムテンプレートを追加定義することもできます。この上級者向け機能を使うには、template_redirect というアクションフックを利用します。プラグインの作成についてより詳しくはプラグイン API のページを参照してください。

テンプレートファイルのインクルード

(ヘッダー、サイドバー、フッターなど、get_header()といった定義済み関数が存在しない)その他のテンプレートファイルをテンプレートに読み込むには、get_template_part() が使用できます。これにより、テーマ内のコードをセクション単位で簡単に再利用することができます。

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

テーマ内に存在するその他のファイルを参照する場合、URIやファイルパスをハードコードする(直書きする)のは避け、bloginfo() を使って参照します。

スタイルシートの中で使われるURIは、スタイルシートからの相対パスです。スタイルシートを参照しているページからのパスではないことに注意してください。例えば、テーマ内に images/ ディレクトリがある場合、CSS ではこのように相対パスで指定します。

h1 {
    background-image: url(images/my-background.jpg);
}

プラグイン API フック

テーマを作成する時、ユーザーがどの WordPress プラグインをインストールしても問題なく動くようにしておく必要があることを覚えておきましょう。プラグインは、アクションフックを通して WordPress に機能を追加します。 (詳しくはプラグイン API を参照してください)

アクションフックの多くは WordPress のコア PHP コードの中に書かれており、動作させるために特別なタグをテーマに記述する必要はありません。しかし、プラグインがヘッダー、フッター、サイドバー、もしくはページの本文に、情報を直接表示できるようにするためのアクションフックが幾つかあり、これらはテーマに記述されている必要があります。以下が含めるべきアクションフックテンプレートタグの一覧です。

wp_enqueue_scripts
テーマ機能ファイルで使用されます。外部スクリプトとスタイルシートをロードするために使用します。
wp_head()
テーマの header.php にある <head> 要素内に記述する。
プラグインによるこのフックの使用例:JavaScript コードを挿入する。
wp_footer()
テーマの footer.phpの、</body> タグ直前に記述する。
プラグインによるこのフックの使用例:ページが読み込まれる最後に実行する PHP のコードをフッター下に挿入する。Google Analytics などのアクセス解析コードの挿入によく使われる。
wp_meta()/en
一般的には、テーマのメニューまたはサイドバー (sidebar.php テンプレート) の <li>Meta</li> セクションに記述する。
プラグインによるこのフックの使用例:広告スイッチャーやタグクラウドを表示させる。
comment_form()
comments.php の終了タグ (</div>) の直前に含める。
プラグインによるこのフックの使用例:コメントプレビューを表示させる。

実際のテーマ内での使い方の例については、デフォルトテーマのファイルに書かれたフックを探してみてください。

テーマカスタマイズ API

WordPress 3.4 から、新しいテーマカスタマイズ管理画面機能 (テーマカスタマイザー) がデフォルトで追加され、ほぼ全ての WordPress テーマで利用可能です。管理画面のテーマカスタマイザーページには、add_theme_support() もしくは Settings API を用いてテーマ内で定義が必要な機能は自動的に集約され、リアルタイムでプレビューできます。

オプション設定項目を新たにテーマカスタマイザーのページに追加したいテーマ開発者やプラグイン開発者は、 テーマカスタマイズ API を参照してください。テーマカスタマイズ API に関するチュートリアルは、 Ottopress.com のウェブサイトも参照してください。

信頼できないデータ

テーマ内で動的に生成されたコンテンツ、特に HTML 属性を含むコンテンツは、エスケープする必要があります。WordPress コーディング基準 でも書かれている通り、HTML 属性に挿入されるテキストは、シングルクォートやダブルクォートが属性の値を終了し、invalid な XHTML やセキュリティーの問題を起こさないようにする為、 esc_attr() を通す必要があります。一般的には titlealtvalue 属性をチェックしましょう。

一般的な場合における、安全なアウトプットが必要なの時の為に、幾つかの特別なテンプレートタグがあります。セキュリティーの脆弱性を避けるために、the_title() ではなく the_title_attribute() を使って title 属性に記事のタイトルを出力するのもその様なケースの1つです。翻訳可能なテキストを用いた、記事タイトルリンクの title 属性を正しくエスケーピング処理する例は次の通りです。

<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a>

非推奨となったエスケープ用関数は新しく正しい関数に変更してください。 wp_specialchars()/enhtmlspecialchars()esc_html()/enに。clean_url()/enesc_url()/enに。attribute_escape()/enesc_attr()/enに。さらに詳しくは データ検証 を参照してください。

翻訳対応 / 国際化 (I18n)

スムーズな言語ローカライゼーションのために、テンプレートファイル内の全ての翻訳可能なテキストを WordPress の gettext ベースの i18n 関数で囲みましょう。これにより、翻訳ファイルをテンプレート内のラベルやタイトル、その他テキストにフックすることができ、翻訳しやすくなります。WordPress Localization/enI18n for WordPress Developers を参照してください。

テーマのクラス要素

body、post、comment に、WordPress によって生成されたクラス属性を付与するには、以下のテンプレートタグを組み入れます。記事用のクラス属性はループ内の要素のみに対して付与します。

テンプレートファイルのチェックリスト

テーマを作る時、テンプレートファイルを以下のテンプレートファイル基準に照らし合わせてチェックしてください。

Document Head (header.php)

  • 適切な DOCTYPE を使う。
  • <html> タグには language_attributes() を含める。
  • <meta> 要素の charset 属性は、<title> を含む全ての要素より前に挿入する。
  • <meta> 要素の charset と description 属性の指定には bloginfo() を使う。
  • <title> 要素の指定には wp_title() を使う。理由はこの項 (訳注: 未訳。en) を参照。
  • フィードリンクを追加するには Automatic Feed Links /en を使う。
  • </head> 終了タグよりも前に wp_head() を挿入する。プラグインはこのアクションフックを使ってスクリプトやスタイルシート、その他の機能を追加する。
  • ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。 代わりにテーマ関数のアクションフック wp_enqueue_scripts を使う。

下記は、HTML5 に準拠した正しいフォーマットの head 部分の例です。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo( 'description' ); ?>">
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>
  • テーマのメインナビゲーションは wp_nav_menu() を使うカスタムメニューに対応させる。
    • メニューは、長いリンクタイトルやメニューアイテムの数が多いケースにも対応し、デザインもしくはレイアウトが崩れることのないように実装する。
    • サブメニューが正しく表示される必要がある。可能であれば、サブメニューはドロップダウンスタイルに対応すること。ドロップダウンであれば、メニューレベルの第一階層以下も表示することができます。

ウィジェット (sidebar.php)

  • テーマは可能な限りウィジェット化する。レイアウト上の、ウィジェットの様に使えるエリア(タグクラウド、ブログロール、カテゴリーリスト)、もしくはウィジェットを実装可能なエリア(サイドバー)には、ウィジェットに対応ウィジェットに対応しましょう。
  • 外観 > ウィジェットからウィジェットが設定されていると、ウィジェット化されたエリアにデフォルトで表示されるコンテンツ(例えば、サイドバーに直接コーディングされている内容)は表示されないようにする。
  • wp_footer() を、body の閉じタグ直前に挿入する。
<?php wp_footer(); ?>
</body>
</html>

インデックス (index.php)

  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。

アーカイブ (archive.php)

  • アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。

固定ページ (page.php)

  • 固定ページのタイトルと本文を表示する。
  • コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
  • タグ、カテゴリー、日付、作成者などのメタデータは表示しない。
  • 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。

個別投稿表示 (single.php)

  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
  • 投稿のタイトルと本文を表示する。
    • タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
  • 投稿日を表示する。
  • (適切であれば) 作成者名を表示する。
  • 投稿カテゴリーと投稿タグを表示する。
  • 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
  • コメントリストとコメントフォームを表示する。
  • previous_post_link()next_post_link() を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。

コメント (comments.php)

  • (投稿の)作成者によるコメントは、他のコメントと識別できるよう (違うハイライトするなど) にする。
  • 適切であれば Gravatar (グラバター。ユーザーのアバター) を表示する。 (訳注:Gravatar について詳しくは Gravatar の使い方を参照)
  • スレッド形式のコメントをサポートする。
  • トラックバック/ピンバックを表示する。
  • function_exist() を用いた再宣言エラーを回避するチェックを除き、このファイルには関数定義を含めないようにする。理想的には全ての関数は functions.php にあるべき。

検索結果表示 (search.php)

  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 検索結果表示ページには検索された語句を表示する。シンプルだが検索内容を知らせるには有効な手段。特に検索結果が0件の場合に便利。the_search_query() を使って表示するか、もしくは get_search_query() /en を使って戻り値を取得する。例:
<h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>
  • 検索結果ページにも検索フォームを含めるのがよい。インクルードするには get_search_form() を使う。

JavaScript

  • JavaScript コードはできる限り外部ファイルに記述する。
  • スクリプトをロードするには wp_enqueue_script() /en を使う。
  • HTML ドキュメント (テンプレートファイル) に直接ロードする JavaScript は、古いブラウザ上でのエラーを回避する為に、CDATAセクションに記述する。
<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

スクリーンショット

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

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

テーマ設定

テーマは テーマ設定画面 /en を実装することも可能です。コードの例は A Sample WordPress Theme Options Page を参照してください。

ユーザー権限グループにテーマ設定画面へのアクセスを有効化する場合は、"switch_themes" ではなく "edit_theme_options" 権限を使います。但し、実際にユーザー権限でもテーマの変更を可能とする場合は除く。より詳しくは権限管理メニューの追加を参照してください。

バージョン 3.0 より、WordPress マルチサイト の場合、デフォルトでは管理者権限グループが "edit_themes" 権限を有していない設定に変更されました。テーマ内で"edit_themes" 権限を使って管理者のアクセス権限を設定している場合は注意してください。詳しい説明はこちら。この様なケースにおいて、管理者にテーマ設定メニューを表示するには "edit_theme_options" 権限を使います。WordPress のマルチサイト機能を使う場合は、管理者権限グループの additional capabilities を参照ください。

テーマのテスト過程

  1. PHP と WordPress エラーを修正する。非推奨関数の呼び出しや、WordPress 関連のエラーを確認する為に次のデバッグ設定を wp-config.php に追加してください: define('WP_DEBUG', true);。詳しくは 非推奨関数フック /en も参照してください
  2. テンプレートファイルのチェックリスト に照らし合わせてテンプレートファイルをチェックする(上記参照)。
  3. テーマユニットテストを通す。
  4. HTMLとCSSをバリデートする。Validating a Website /en参照。
  5. JavaScript エラーをチェックする。
  6. 全てのターゲットブラウザでテストする。例えば、IE7、IE8、IE9、Safari、Chrome、Opera、Firefox、MIcrosoft Edge。
  7. 無関係なコメントやデバッグ設定、TODO アイテムなどを取り除く。
  8. テーマディレクトリにテーマを登録して公開する場合は、テーマレビュー を確認する。

参考資料

コーディング基準

テーマデザイン

CSS

テンプレート

関数リスト

テストと QA

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

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

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

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