そろそろテーマを変更しようかなと思っているので、その前準備について。ぼくのサイトのWordPressテーマは子テーマとか既存テーマのカスタマイズではなく、完全フルスクラッチなんですが、その際に「こんな風に作り始めてるよ」という問わず語りです。
1. 開発環境
開発ツールは最近Netbeansを使ってます。NetbeansはWordPressのルートフォルダーをプロジェクトに指定すると、関数が予測変換で呼び出せるようになります。グローバル関数なんて全部覚えていられないので、これは便利ですね。変なタイプミスをなくすためにも、予測変換機能は絶対使うようにした方がいいと思います。DreamWeaverもCS5ぐらいからこういう機能が実装されたように思います。
$thisのコードヒント
いきなり余談ですが、以前はAptanaを使っていました。最近はPythonのお勉強をしていたり、モバイルアプリ作れるTitaniumとかもあるので、Aptanaの後継であるTitanium Studioもよく起動しますが、PHP書く時はNetbeansです。Netbeansに変えたのは$thisの型定義がどうしてもできなかったからです。
CodeIgniterとかCakePHPとかでビューファイルをいじくってるときに、$thisのメソッドを使いたいよーということがあると思います。そういう場合、Netbeansはビューファイルにこんな風に書いておくと、$thisの予測変換が使えるようになります。
/* @var $this My_View_Class */ $this-> //これでMy_View_Classのメソッドが出てくる
WordPressでも管理画面をバキバキ作っているときなんかは便利です。
2. 基本フォルダ配置
個別のテンプレートファイルについては割愛しますが、こんな感じです。フォルダの役割に付いて説明しておきます。
- scripts
- JSファイルを置いておくところ。別にフォルダ名はjsとかでもいいです。
- compass
- CSSファイルを置いておくところ。compassフレームワークを使いたいので、compassにしましたが、styleとかでもいいです。
- functions
- 機能別にまとめたphpファイルを置いておくところ。
- img
- 画像ファイルを置いておくところ。
- widgets
- ウィジェットを置いておくところ。普通はあんまり自作ウィジェットとか作らないかもしれませんが、一応。
他にも色々必要に応じてフォルダでわけておくといいんじゃないでしょうか。
3. style.cssは使わないで、はやりのSCSS
style.cssはテーマの必須ファイルですが、これは使いません。こんな感じでヘッダーだけ書いておきます。
/* THEME NAME: Takahashi Fumiki THEME URI: https://takahashifumiki.com DESCRIPTION: Just Only for Takahashi Fumiki VERSION: 2.0 AUTHOR: Takahashi_Fumiki AUTHOR URI:https://takahashifumiki.com */
あとはSCSSとかを使います。別にLESSでもいいんですが、いずれにせよ保存しただけでコンパイルしてくれるソフトを別に入れておいた方が楽でしょう。
LESSはMac用のアプリがあるので、それを使いましょう。SCSSだとついこの間MoonGiftさんで紹介されていたFire.appというのを使うといいと思います。
Fire.appのインストール方法（Mac）
Fire.appはシェアウェアなのですが、なぜかGithubでソースが公開されているので自分で無料インストールが可能です。Macportsをインストールしたことのある人はすぐ入れられるので、やってみてください。ターミナルほとんど触ったことないし触りたくないという人は$14なので買った方がいいです。
さて、普段rvmとか使ってRails開発とかやってる人はFire.appのビルドというエントリーを参照すればできます。「はにゃ？ rvmってなあに？」という人は以下の通りにやってください。
インストールにはjrubyとrawrが必要なので入れます。ターミナルでインストールしてください。管理者権限が必要なので、su – root をするか、sudoをつけてください。
port install jruby jruby -S gem install rawr #ダウンロードフォルダに移動 cd ~/Downlods #githubからクローン git clone https://github.com/handlino/FireApp.git cd FireApp #binフォルダにあるbuild-all.shの2行目の先頭にjruby -Sをつけて実行 jruby -S rake rawr:bundle:all
これでFireApp/packages/osxにFireApp.appが作成されます。あとは普通のアプリケーションと同じなので、/Applicationsフォルダに移動して起動します。
Fire.appの使い方
SCSSの文法については僕も学び始めたばっかりなのでよく知りませんが、とにかくFireAppにフォルダを監視させると、そのフォルダ内のSCSSファイルを保存するたびにCSSをコンパイルしてくれます。NetbeansにはSCSS用のプラグインもあるので、普通にCSSを編集するようにSCSSを導入することができます。ただ、コンパイルはこのプラグインではなく、Fire.appに任せた方が良さそうです。コンパイルエラーが起きると教えてくれますし。
上で紹介したLESS.appも基本的な流れは同じだと思うので、好きな方を試してみてください。SCSSとLESSの比較記事も見つけました。はじめHAMLとかCoffeeScriptとかを見た時は正気の沙汰とは思えなかったですが、SCSSはいいですね。今後中間言語が当たり前になってくると思いますので、覚えておくといいかもしれません。
4. functions.phpは設定情報と読み込みだけ
よくWordPressのTIPS記事なんかに「functions.phpに以下のコードを書いてください」とありますが、functions.phpが増えすぎると困っちゃうので、基本は機能別にファイルをわけて、functionsフォルダに保存し、funcions.phpはそれを読み込むだけにします。
また、バージョン定数のようなものが決まっていると何かと便利なので、デバッグレベルとともにこれも記載しておきます。
//テーマ全体のバージョン
define('MY_THEME_VERSION', '1.0');
//デバッグ定数を決めておく
if($_SERVER['SERVER_NAME'] =='takahashifumiki.com'){
define('MY_DEBUG_LEVEL', 0); //本番
}elseif($_SERVER['SERVER_NAME'] =='d.takahashifumiki.com'){
define('MY_DEBUG_LEVEL', 1); //ステージング
}else{
define('MY_DEBUG_LEVEL', 2); //ローカルとか
}
//機能別に分けたファイルを読み込む
get_template_part('functions/override');
get_template_part('functions/assets');
get_template_part('functions/override');
get_template_part('functions/admin');
これの何が便利かというと、後述するCSS・JSの読み込みとか、ログ系の関数ですね。var_dumpなんかはデバッグによく使うと思いますが、こんな関数を書いておくと、そのまま本番にアップしても問題ありません。
/**
* 本番環境以外でvar_dump
*/
function var_d(){
if(MY_DEBUG_LEVEL > 0){
call_user_func_array('var_dump', func_get_args());
}
}
他にも本番と開発環境で変えたい情報がある場合は、このデバッグ定数を使います。本番だけCDN使うからドメイン変えたいとか、色々あるでしょう。
分割する利点
functions.phpを分割する利点としては、他のテーマでも流用が利くということですね。たとえばブラウザ判別なんかはどのサイトでも使うと思いますが、browser.phpというファイルを用意しておいて、以下のような関数書いておくと便利です。
- IEをバージョン別に判定する関数
- スマートフォンか否かを判定する関数
- タブレットか否かを判定する関数
- Retinaディスプレイか否かを判定する関数
- 上記の関数を利用して、body_classにクラス名を追加するフィルター関数
これらをまとめておけば、他のサイトにコピペで済みます。
5. CSSとJSは必ずwp_enqueueで読み込む
CSSとJSは必ずWordPressの関数を使って読み込みます。主にキャッシュ対策と環境変化に対応するためです。
まともなWebサーバなら負荷を軽減するためにmod_expiresなどを使ってCSSやJSをブラウザにキャッシュさせるようになっていますが、ファイルを更新した場合は読み込むファイル名を変えないとキャッシュが残ってしまいます。「デザイン変更しました。ご確認ください」「変わってないですよ」「F5押してみてください」「あ、変わりましたね」「では、オッケーですね。請求書をお送りいたします」という会話はもしかしたら日常的に交わされているのかもしれませんが、普通のユーザーはF5押してブラウザキャッシュをクリアしないので、全然オッケーじゃありません。意味が分からないという人はmod_expiresなどでググってみてください。
wp_enqueue_scriptやwp_enqueue_styleはバージョン番号をURLに付与してくれるので、更新を本番に反映させるタイミングで上で紹介したバージョン定数を変えれば済みます。また、以前紹介したSSLありのWordPressだけど高速化したいからCloudFlareのCDNを無料で使うのように、サイト全体に対して設定を変更するようなハックのメリットが得られなくなってしまうので、出来る限りwp_enqueue_*で読み込むようにしましょう。詳しくはwp_enqueue_scriptのススメなどを参考にしてください。
まとめ
以上、手短ですが、もう銀行にいかないとしまっちゃうので終わりです。自作テーマを作るのは茨の道ですが、色々と発見も多いのでやってみましょう。