サイトアイコン Gatespace's Blog

スターターテーマ _s を使ってWordPressのテーマをつくる（準備編）

gatespace
この記事をシェアする

WordPressにはデフォルトで「Twenty Eleven（3.5から）」「Twenty Twelve」「Twenty Ten」というテーマが付属してきます。
また、公式のテーマディレクトリにも多くのテーマが登録されているので、そこから好みのテーマを選ぶこともできます。
ですが、オリジナリティを出したい（平たく言えば企業サイトなどでオリジナルのデザインにしたい）場合は、独自のテーマをつくる必要があります。

テーマをつくる上でどのような手法をとるかは高野直子さんが「WordPress テーマ開発4つのアプローチ #wacja2012」という記事を書かれたので、そちらもご覧ください。

WordPressに慣れてきた方は「子テーマ」でテーマを作られていると思います（親テーマを直接カスタマイズするとテーマのアップデート時にカスタマイズ箇所が消えるのでダメですよ）。
しかし、子テーマも親テーマへの依存が大きかったり、functions.phpで定義された関数を変更するのに癖があったりします。また、ありがちなこととして、親テーマのほとんどのテンプレートを子テーマで書き換えていませんか？

そんな人にお勧めなのが「スターター・テーマ」を利用したテーマ開発です。
これから何回かに分けて _s（underscores） というスターター・テーマを利用したテーマ開発の手順を書いていきます。

なお、ある程度テーマの作成（カスタマイズ）に慣れた人向けの内容となりますので、ご了承ください。
[show_underscores]

この記事の対象

目次

  1. _s（underscores）とは
  2. 公式サイトのジェネレーターを使ってファイルをつくる
  3. ダウンロードしたファイルの中身
  4. ジェネレーターでAdvanced Optionsを入力していた場合のメリット
  5. この時点で備わっている（いない）機能

1. _s（underscores）とは

_s（underscores）はWordPressのテーマです。Automattic社のテーマチームが汎用テーマを作るために自社開発しました（HTMLでいえばフレームワークですかね）。

_s（underscores）は公式サイトに

I’m a theme meant for hacking so don’t use me as a Parent Theme.

とあるように、親テーマとしてではなく、ハッキング（カスタマイズ）されること前提としています。そのため、ある程度のテンプレートファイルとcssで構成されていますが、見栄え（css）に関してはリセットがされているくらいで、まっさらな状態です。

_s（underscores）のテーマファイルはGitHubで公開されています（テーマディレクトリには公開されていません）。
ここからフォークしたり、zipファイルをダウンロードしてカスタマイズすることも可能ですが、今回は公式サイトのジェネレータを使って元になるファイルを作成したいと思います。

2. 公式サイトのジェネレーターを使ってファイルをつくる

公式サイトにはジェネレーターがあります。

基本的には「Theme Name」の欄に名付けたいテーマ名（テキスト）を入力し、「GENERATE」ボタンを押すだけですが、「Advanced Options」をクリックするとテーマ名の他に

を設定できるので、入力した方がよいでしょう（後で手を入れる箇所が少なくなります）。

これだけで関数名や翻訳ファイル用のテキストドメインなどがオリジナルのテーマ名に変更されたテーマファイル（zip）をダウンロードできます。

3. ダウンロードしたファイルの中身

ダウンロードしたファイルの中身

ダウンロードしたファイルの中身は写真の様になります。
公式サイトのジェネレーター入力したTheme Name（Theme Slug）に基づく名前でテーマフォルダが作成されています（テーマ名に空白が入っていてもハイフンに変換されます）。
その中に以下のテンプレートファイルが入っています。カスタマイズしていく上で足りないファイル、いらないファイルが出てくると思いますが、次からの説明で必須と書かれているファイルは削除しないようにしてください。

スタイルシート

テーマ関数ファイル

テンプレートファイル

モジュールテンプレートファイル（テンプレートファイルなどに読み込まれるファイル）

※必須と書いてあっても、index.phpなどで読み込まない場合は削除可能です。

その他のファイル

ディレクトリ（フォルダ）

テーマファイルの中身ですが、テキストなどが英語で記述されているので翻訳ファイルは自分で用意しないといけません。しかし、先ほど紹介した直子さんが_s テーマの日本語ファイルを作成されているのでそちらをダウンロードし、languagesディレクトリに追加してください。

4. ジェネレーターでAdvanced Optionsを入力していた場合のメリット

ジェネレーターでAdvanced Optionsを入力していた場合、style.cssに入力した内容が反映され、関数名のプレフィックスや翻訳テキストに使うテキストドメインも変更されています。
GitHubからテーマファイルをダウンロードした際は自分で書き換える必要があるので地味に便利です（その場合、書き換えすべきテキストとその方法はREADME.mdに書かれていますので説明は省略）。

5. この時点で備わっている（いない）機能

この状態でダウンロードしたテーマを適用してみます。

別途、詳細は書きますが、style.cssは最低限のリセットとWordPressが自動で付与するクラスについての設定がされているだけなので、このような状態になります。
ただし、ウィジェットエリアが1箇所（IDがsidebar-1でsidebar.php内）、カスタムメニューが1箇所（IDがprimaryでheader.php内）配置されています。

最低限必要と思われる機能は設定されていますので、見た目を変えるだけであれば、style.cssを編集するだけで良いでしょう。

さて、これで _s をカスタマイズする準備ができましたので、次回から各ファイルについて詳しく説明していきたいと思います。

参照サイト

この記事をシェアする