WordPressの独自テーマを最速でつくるためのジェネレータやツールたち

WordPressはブログCMSとして登場して瞬く間に世界中に広まりました。その理由の一つとしては、ブログに限らないコーポレートサイトやポータルサイトとしても活用することができたからだと思っています。

そしてWeb制作会社さんがWordPressを用いたWeb制作メニューを充実化させ、いまやWordPressで作られた企業サイトをたくさん目にします。

もともとブログCMSとして登場したWordPressが多種多様化できた理由は、独自テーマを作成できるからでしょう。

今回はテーマの制作、とくに作成にとりかかるまでにフォーカスを当てて効率化のご紹介を致します。

制作のとき乗り越える壁

テーマファイルの作成には決まり事がある
- 煩雑にならない良い点でもあるのですが、構成を理解していないうちは少し戸惑います。例えばheader.php, footer.php, single.php, page.phpと決められた名前で役割ごとのファイルが存在したり、CSSの中にテーマの説明などを記載する必要があります
PHPが動く環境でないと状態を確認できない
- WordPressはPHP, MySQLといった言語で実装されています。そのため普通にファイルを開いても動かすことはできません

今回は上記2点の解決方法をご紹介します。

テーマファイルの雛形を作るジェネレーター

テーマファイルには少なくないファイル数と、決められた記述方法があります。皆さんならどうやってテーマファイルの作成をはじめますか？

既存のテーマファイルをコピーしてきて書きかえる
０からファイルを作る。

どちらも面倒ですよね。そして漏れやミスが怖いです。

そこで登場するのがテーマファイルのジェネレーターです。

Underscores | A Starter Theme for WordPress

こちらは “_s” と記載されているのも目にしますね。AUTOMATTIC社が提供している独自テーマジェネレーターです。

テーマの名前を入れるだけで、ZIPでダウンロードできます。
中身をみてみると、必要なファイル一式できていますね。テーマの名前が元に、setup関数なども用意されています。
style.cssの中身を見てみると、

/*
Theme Name: test-theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: test-theme
Tags:

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.

 test-theme is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/

Authorなどは書き換えが必要ですね。

megumiteam/iemoto

続いて紹介するのは、日本製ですね。
WordPressに関するテーマ開発などで貢献されているmegumiteamさんによるジェネレーターツール（Grunt-initテンプレート）です。

ちなみにGrunt-initに関する説明は割愛しますが、様々なプロジェクトの雛形生成を助けるプログラムです。

黒い画面がでてきますが、基本的には流れ作業のような形でテーマファイルの雛形を生成することができます。

方法はこちらをご覧ください。

流れで入力していきます。

いろいろ作られていく！

@charset "UTF-8";
/*!
Theme Name: test-iemoto
Theme URI: http://unitopi.com/
Author: unimal Co.,Ltd.
Author URI: http://unitopi.com
Description: test no wp theme
Version: <%= pkg.version %>
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iemoto
Tags:

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.

test-iemoto is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/

こちらはAuthorなども反映されています。便利です。
ちなみにベースとなっているテーマは、underscoresですね。

iemotoの素晴らしいところは、Sass (Compass) が導入されているので、更に効率的なテーマ作成ができます！Sassについてはこちらの記事を御覧ください。