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

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

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

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

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

制作のとき乗り越える壁

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

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

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

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

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

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

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

Underscores | A Starter Theme for WordPress


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

Screen Shot 2014-09-18 at 13.17.52

テーマの名前を入れるだけで、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に関する説明は割愛しますが、様々なプロジェクトの雛形生成を助けるプログラムです。

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

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

Screen Shot 2014-09-18 at 13.30.20

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

Screen Shot 2014-09-18 at 13.30.10

いろいろ作られていく!

@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についてはこちらの記事を御覧ください。

WordPressを動かす環境について

先述した通り、WordPressはPHPやMySQLといった環境が必要です。ローカル(自分のPC)で動かすにはVagrantやMAMPなどがあります。

Vagrant

MAMP & MAMP PRO

ローカルで色々と編集ができるのは気も楽でいいですが、実際にクライアントに確認してもらうときに、PCをもっていけないときもあります。
モバイルで確認したいときや、クライアントにURLを渡して確認したいとき、テストサーバーを立てたり未公開のために認証を設けたり、意外と面倒な作業もあったりします。

手前味噌ですが…

Webクリエイターのためのファイル管理コラボレーションツール|universions

universionsを使っていただけると、WordPressが動く自動連携のテストサーバーがすぐ手に入ります。

ご興味持っていただけた方は、是非こちらの記事をご覧ください。


いかがでしたでしょうか?
利用ユーザーが増えてくると、利便性を高め効率化するツールやノウハウがたくさん生まれますね。今後、WordPressにJSON RestAPIが標準導入されるなど、更に活用形態を広げていくことが予想されます。

みなさんも自身の使い方にマッチするツールを探してみてください。そして是非教えてください。

今後もunitopiでは、WordPressを始めとしたWeb制作のトレンドを追いかけ続けたいと思います!

フォローして続編をチェック

@universionsをフォロー