WordPress 開発に役立つ8つの Tips

WordPress 開発に役立つ Tips 集

WordPress を導入する上でもっとも大切となるテーマ。デフォルトの twenty ten をはじめとした既製のものもいいのですが、やはり自分のサイトに合ったテーマを作ってみたいもの。
あるいは気軽に機能を拡張できるプラグイン。既存のものの動きに満足がいかなくても、自分で改造・作成できるのがうれしいところ。
そんな WordPress 開発にあたってすこし役立つ Tips をまとめました。

ローカルサーバーをたてる

基本中の基本かもしれませんが。
チームで使う開発サーバーがあればいいのですが、まだ準備ができていない・個人での開発といった場合にはローカルサーバーを使いましょう。自分のマシンで WordPress が動かせます。アップロードや読み込みのタイムラグが少ないのもうれしい。
Windows なら XAMPP、 Mac なら MAMP が便利ですよ。

リファレンスを使いこなす

日本語での公式なリファレンスは Codex ですが、開発に必要な(すこしマニアックな)記事は翻訳の手がまわっていないようなので、その場合は 英語版 Codex も参考にしましょう。
どちらも OpenSearch に対応していますので、 Firefox の検索バーに簡単に追加できます。

検索バーのアイコンをクリックすると追加できる

作成したものを公開・配布する場合 WordPress が定めたルールに則って作る必要があります。
コーディング規約では、インデントはスペースではなくタブを使うこととなっています。
テーマの場合は必須の関数が一覧できるテーマ審査基準も確認しましょう。

デバッグモードを有効化する

通常の WP ではエラーが発生しても真っ白になるだけですが、開発中でもこれではちょっと困ります。デバッグモードを有効にするとエラーを表示させたり、ログを取ることができます。
有効化するには wp-config.php を以下のように編集。

/**
 * 開発者へ: WordPress デバッグモード
 *
 * この値を true にすると、開発中に注意 (notice) を表示します。
 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。
 */
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

こうすることで wp-content/debug.log にエラーが記録されます。WP_DEBUG_DISPLAY (エラーを画面に出すかどうか)は false にしておいたほうがデザインが崩れずに済みます。
また、テーマを工夫することで、開発中だけ広告や解析をオフにすることもできます。

<?php if(!WP_DEBUG): ?>
    <!-- 広告スペース -->
<?php endif; ?>

💡 WP_DEBUG は内部で必ず定義されるため、 defined で調べる必要はありません。

多言語化をうまくやる

多言語化の手順自体は WordPress 開発者のための i18n などをご覧いただくとして、ここで紹介するのは、言語ファイルのカタログ(原本)となる .pot ファイルの生成に便利なツールです。

SVN からチェックアウトできますので、

$ svn checkout http://develop.svn.wordpress.org/trunk

とすると、ダウンロードされた中の tools/i18n/makepot.php でテーマ・プラグインの pot ファイルが生成できます。
たとえば my-theme の .pot を生成するなら wp-content/themes にて、

$ php /path/to/makepot.php wp-theme my-theme

これで my-theme.pot が生成できます。プラグインなら引数が wp-pluginとなります。
単に Poedit や xgettext で生成したものとは以下の点で違います。

  • すべてのファイルを一度に変換できる
  • プラグイン名や解説文を翻訳できるようになる
  • ヘッダーが WordPress に適したものになる

💡 プラグイン名や解説文を翻訳するには、プラグインヘッダーに以下の行を追加する必要があります。プラグイン内で使用しているテキストドメインを書きます。

/*
Plugin Name: My Plugin
:
Version: 1.0
Text Domain: myplugin
*/

JavaScript を正しく扱う

依存関係にある jQuery プラグインは正しい順番で読み込んでほしいとき。あるいは、デフォルトの jQuery ではなくGoogle Libraries API を利用したいというとき。直接 script要素 を書きこむよりスマートな方法があります。
wp_**_script という関数を使いましょう。

function my_header(){
    /* デフォルトの jQuery を解除 */
    wp_deregister_script( 'jquery' );
    /* 代わりに Google でホスティングされている jQuery を登録 */
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' );
    /* jQuery を追加しなおす */
    wp_enqueue_script( 'jquery' );
    
    /* 3番目の引数は依存関係を表す */
    wp_enqueue_script( 'jquery-ui', 'jquery-ui.min.js', array('jquery') );
    wp_enqueue_script( 'mylib', 'mylib.js' );
    /* このスクリプトは jQuery UI と mylib に依存している */
    wp_enqueue_script( 'myscript', 'myscript.js', array('jquery-ui', 'mylib') );
}
add_action('wp_head', 'my_header', 0);

あとは WP 側でうまくやってくれます。
もちろんプラグインでも使えるので、自分のスクリプトを追加する際に重複や依存を心配する必要はありません。

ただし jQuery に関するスクリプトの場合は noConflict が設定されているため一工夫がいります。

(function($){
  /* ここでは jQuery を表す $ が使える */
})(jQuery);

jQuery.("h1")... /* 外側では $ ではなく jQuery を使う必要がある */ 

テーマをチェックする

Theme-Check は前述のテーマ審査基準に通っているか確認するためのプラグインです。
公式のテーマダウンロードページへの掲載申請に対し WordPress.org が審査に使っているものと同等だそうです。

ちょうど、ずいぶん前に作ったテーマを見つけました。 WP のバージョンは 2.5 あたりのようです。まだデフォルトのテーマが青かった頃。
ちょっとチェッカーに通してみましょう。

Theme Check Screen Shot

このように必ず含めるべき関数や、廃止された関数を教えてくれます。ついでにハードコードされたリンクや adsense のコードも発見する優れもの。さすが公式で使われているだけあります。

自分のサイトだけで使うから...という場合でも、 REQUIRED にはできるだけ対応しましょう。フィードリンクを追加するadd_theme_support('automatic-feed-links')のように無いと不便なもの・post_classのようにセマンティックな観点から入れるべきものがあります。

Validator やエラーコンソールで HTML/CSS/JavaScript に誤りがないか確認することも忘れないでください。

テストデータを入れる

文章を書く際、ひとはそれぞれ違った構造を用いるものです(筆癖だけでなくHTML要素も)。テーマの利用者があなたの考えたようにブログを書くとは限りません。
たとえば、デザインに影響がでないようにと margin padding のリセットはよく行われますが、そのせいで入れ子リストが平坦になってしまっては格好悪いですよね。そうならないようにテスト用の記事データを入れてテストしましょう。

公式: test-data.2011-01-17.xml
英語: Easier Theme Development with Sample WordPress Content
日本語: wp_post_jp:インポートで使えるWordPress用ダミー記事セット

ダウンロードしてきて、そのままインポートするだけで使えます。コメントもついているので、コメント欄の表示・動作までしっかりチェックできますね。

IEでテストする

Utilu IE Collection は InternetExplorer の各種バージョンを同時にインストールしてくれます。同様のソフトには Multiple IE や IETester がありますね。
自分(自社)のサイトなら「IE6なぞ腐った牛乳だ!」で済ませたいところですが、顧客の要件に含まれていたり、配布した先での反応が気になったりする場合は入れておいたほうがいいかもしれません。

まとめ

おしゃれなテーマや便利なプラグインができたら、ぜひ公開してみてください。きっと誰かの役に立つことでしょう 🙂

This post is also available in other languages.

Reaction on Twitter

  1. @sigh_too より:

    WordPress 開発に役立つ8つの Tips http://bit.ly/kkSqNt #wp #wordpress #blog #tips