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社が提供している独自テーマジェネレーターです。
テーマの名前を入れるだけで、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などは書き換えが必要ですね。
続いて紹介するのは、日本製ですね。
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についてはこちらの記事を御覧ください。
WordPressを動かす環境について
先述した通り、WordPressはPHPやMySQLといった環境が必要です。ローカル(自分のPC)で動かすにはVagrantやMAMPなどがあります。
ローカルで色々と編集ができるのは気も楽でいいですが、実際にクライアントに確認してもらうときに、PCをもっていけないときもあります。
モバイルで確認したいときや、クライアントにURLを渡して確認したいとき、テストサーバーを立てたり未公開のために認証を設けたり、意外と面倒な作業もあったりします。
手前味噌ですが…
Webクリエイターのためのファイル管理コラボレーションツール|universions
universionsを使っていただけると、WordPressが動く自動連携のテストサーバーがすぐ手に入ります。
ご興味持っていただけた方は、是非こちらの記事をご覧ください。
いかがでしたでしょうか?
利用ユーザーが増えてくると、利便性を高め効率化するツールやノウハウがたくさん生まれますね。今後、WordPressにJSON RestAPIが標準導入されるなど、更に活用形態を広げていくことが予想されます。
みなさんも自身の使い方にマッチするツールを探してみてください。そして是非教えてください。
今後もunitopiでは、WordPressを始めとしたWeb制作のトレンドを追いかけ続けたいと思います!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事