本連載では、初心者向けにWordPressのテーマのカスタマイズ方法を解説します。

WordPressには毎年新しいデフォルトテーマが追加されます。最新バージョン(2013年1月18日時点)の3.5には、デフォルトテーマとして「Twenty Twelve」が追加されました。本連載では、このTwenty Twelveをもとにカスタマイズしていきます。第1回はTwenty Twelveの特徴とそのファイル構成について解説します。

新テーマTwenty Twelve

新しく追加されたTwenty Twelveは、ブログ用としても利用できますが、Webサイト用としての利用も想定されたテーマです。また、レスポンシブWebデザインを採用し、モバイルファーストの考えのもと開発されています。このため、コーポレートサイトのベースとして利用するのに適しています。

Twenty Twelveのファイル構成

WordPressのテーマはPHPやCSSなど様々なファイルで構成されています。Twenty Twelveの場合、以下の合計37ファイルから構成されています。

  • 27つのPHPファイル
  • 5つのCSSファイル
  • 3つのJavaScriptファイル
  • 1つのPNGファイル
  • 1つのpotファイル

一般的にテーマを構成するテンプレートファイル(PHPファイル)には、以下の3種類があります。

  • テンプレート階層に合わせてページ全体を表示するテンプレートファイル
  • 共通するパーツを読み込むためのテンプレートファイル
  • テーマ独自の機能を記述するテンプレートファイル

ページ全体を表示するテンプレートファイル

ファイル名が示すとおり、インデックスページ、アーカイブページ、カテゴリーページなどのページ全体を表示します。

共通するパーツを読み込むためのテンプレートファイル

header.php、sidebar.php、footer.php、sidebar-front.php、comments.phpは、ページ内のパーツを表示するテンプレートです。Twenty Twelveの場合、contentから始まる各ファイルで、サイトのコンテンツ部分を表示しています。

テーマ独自の機能を記述するテンプレートファイル

functions.phpにはテーマで利用する様々な機能が記述されており、Twenty Twelveでは、incフォルダーの中に、カスタムヘッダー機能に関連するコードが記述されています。

CSSファイル

style.cssには、冒頭のコメントでテーマに関する情報が記載されており、テーマ全体に関するスタイルが記述されています。editor-style.cssは、管理画面のビジュアルエディターで利用されるスタイルです。また、CSSフォルダーにはInternet Explorer用(バージョン9以前)のスタイルが記述されています。

※rtl.cssとeditor-style-rtl.cssには、右から左に読まれる言語用のスタイルが記述されています。日本語圏向けのテーマを作成する際には気にする必要はありません。

その他のファイル

screenshot.pngは、管理画面のテーマ選択の画面に利用されます。jsフォルダーにはテーマで利用されているJavaScriptファイルが格納されており、languagesフォルダーには翻訳用のファイルが格納されています。

次回からは、このTwenty Twelveをカスタマイズする方法を解説していきます。