WordPressのバージョンアップのついでに、今まで学んできたWordPress開発のおさらいをしてみる

WordPressのバージョンアップを実施するついでに、いろんな部分を変更してみた。
具体的には以下の事を実施しました。

  1. WordPressのバージョンアップ
  2. テーマのオーバーライドを使ってみる
  3. 翻訳ファイルを利用してみる
  4. ウィジェットを自作してみる
  5. プラグインを自作してみる

1.WordPressのバージョンアップ

3.2系⇒3.4系に変更。
今回は完全に新しいものに切り替えただけなので、公式サイトから最新版のWordPressをダウンロード。
所定の場所に設置後、.htaccessの設定をしたり、wp-config.phpを修正したり、フォルダの権限を変更したりする。
管理画面にアクセスすると、以前のDBの構成から若干変わるよ的なコメントが表示されるので、指示に従ってマイグレーションする。
これで動くようになった。

2.テーマのオーバーライドを使ってみる

今まで直接テーマを弄っていたんだけど、せっかくなのでテーマのオーバーライドを利用してみる。
使い方はすごく簡単。

wp-content/themes以下にオーバーライドするテーマを作成

今回はtwentytenをベースにしたので、wp-content/themes/twentyten.appendとした

wp-content/themes/twentyten.append/style.cssを作成して、先頭部分に以下のように記述する

/*
 Theme Name:  テーマ名(ここではtwentyten.append)
 Author:      作者
 Version:     1.0
 License:     ライセンス(GNU General Public Licenseとか)
 License URI: ライセンスのURL
 Template:    オーバーライドするテーマ名(ここではtwentyten)
*/
@import url('../twentyten/style.css'); /* 元となるstyle.cssをインポート*/

これで既存テーマのスタイルを踏襲しつつ、自分のスタイルも追加できる。

functions.phpの作成

オーバーライド元でfunctions.phpを作成すると、最初にそっちのファイルを見に行くようになる。
現時点では特に追加するものはないので、空ファイルで用意しておく。

上記以外のテーマファイル

テーマにはstyle.cssとfunction.php以外にもファイルが存在するが(404.phpとかloop.phpとか)、これらに修正を加える場合には、元のテーマのものをオーバーライドテーマにコピーすればOK。オーバーライドテーマに対象のファイルが存在する場合には、そちらのファイルを読みにいくようになる。

ここまで準備できればオーバーライドテーマを適用する子ができるので、「外観>テーマ」から自分の作成したテーマを有効化してみる。

3.翻訳ファイルを利用してみる

オーバーライドテーマの適用ができたら、次は翻訳ファイルの編集をしてみる。

翻訳ファイルとは?

そもそも翻訳ファイルとは、拡張子が.moのファイルで、このファイルは.poのファイルを変換して作成することができる。これらのファイルの細かい説明はググればいっぱい出るので、ここでは割愛。

翻訳ファイルの用意

とりあえずwp-content/themes/twentyten以下にlanguagesディレクトリが存在するので、それを自分の作成したテーマに持ってくる。
ディレクトリの中身を見てみると、twentyten.potというpotファイルがあるので、これをリネームして、定数「WPLANG」の値.poファイル(日本語の場合はja.po)を作成する。

翻訳ファイルのコンパイル

ja.poファイルを作成したら、それを編集後、コンパイルしてja.moファイルを作成する。

msgfmt ja.po -o ja.mo

作成した翻訳ファイルの適用

functions.phpに以下の記述を追加することで、今回作成した翻訳ファイルを適用させる。

add_action('after_setup_theme', 'child_setup');
if(! function_exists('child_setup')):
  function child_setup() {
  load_theme_textdomain(/* 対象テーマのフォルダ名 */, STYLESHEETPATH . '/languages');
}
endif;

テーマ中の翻訳関数の調整

作成した翻訳ファイルは、wordpress中の__()や_e()や_x()の記述に対して、適宜翻訳されるようになるが、その前段階で__()の第2引数が、オーバーライド元のテーマを指定しているので、これを修正する必要がある。

__( 'HogeHoge', 'twentyten' ); 
// ↓こんな感じに
__( 'HogeHoge', 'twentyten.append' );

これでテーマ別の翻訳ができた。

4.ウィジェットを自作してみる

左ナビにGoogleAdsenseを入れたり、はてブの人気エントリーを入れる際、今まではテンプレートに直で記述してしまっていたので、それらをウィジェットとして扱えるようにした。

準備

テーマ別にウィジェットを扱いたいので、テーマのフォルダの下にwidgetsというディレクトリを作成。この下にウィジェット用のスクリプトを置くようにする。

GoogleAdsenseの埋め込みスクリプトをウィジェット化した例

実際に作るとこんな感じになる。

class Google_Adsense extends WP_Widget {

  /**
   * ウィジェットの基本情報
   */
  function __construct() {
    $widget_ops = array('classname' => 'Google_Adsense',
                        'description' => '/* 外観>ウィジェットにアクセスした時の説明文 */' );
    parent::WP_Widget(false, $name = '/* 外観>ウィジェットにアクセスした時のタイトル */', $widget_ops);
  }
  /**
   * 公開側に反映する内容
   */
  function widget($args, $instance) {
    extract( $args );
    echo $before_widget;
    echo $before_title . wp_specialchars('おすすめ') . $after_title;
    echo '
<script type="text/javascript"><!--google_ad_client = "' . $instance['google_ad_client'] . '";
google_ad_slot = "' . $instance['google_ad_slot'] . '";
google_ad_width = ' . $instance['google_ad_width'] . ';
google_ad_height = ' . $instance['google_ad_height'] . ';
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    ';
    echo $after_widget;
  }
  
  /**
   * 保存した時の処理
   */
  function update($new_instance, $old_instance) {
    return $new_instance;
  }
  
  /**
   * 管理画面の設定項目
   */
  function form($instance) {
    $google_ad_client = $instance['google_ad_client'] == '' ? '-' : esc_attr($instance['google_ad_client']);
    $google_ad_slot   = $instance['google_ad_slot'] == '' ? '-' : esc_attr($instance['google_ad_slot']);
    $google_ad_width  = $instance['google_ad_width'] == '' ? '-' : esc_attr($instance['google_ad_width']);
    $google_ad_height = $instance['google_ad_height'] == '' ? '-' : esc_attr($instance['google_ad_height']);
 
    $html  = '<p>';
    $html .= '<label for="' . $this->get_field_id('google_ad_client') . '">Client :<br />';
    $html .= '<input id="' . $this->get_field_id('google_ad_client') . '" name="' . $this->get_field_name('google_ad_client') . '" type="text" value="' . $google_ad_client . '" />';
    $html .= '<br />';
    $html .= '<label for="' . $this->get_field_id('google_ad_slot') . '">Slot :<br />';
    $html .= '<input id="' . $this->get_field_id('google_ad_slot') . '" name="' . $this->get_field_name('google_ad_slot') . '" type="text" value="' . $google_ad_slot . '" />';
    $html .= '<br />';
    $html .= '<label for="' . $this->get_field_id('google_ad_width') . '">Width :<br />';
    $html .= '<input id="' . $this->get_field_id('google_ad_width') . '" name="' . $this->get_field_name('google_ad_width') . '" type="text" value="' . $google_ad_width . '" />';
    $html .= '<br />';
    $html .= '<label for="' . $this->get_field_id('google_ad_height') . '">Height :<br />';
    $html .= '<input id="' . $this->get_field_id('google_ad_height') . '" name="' . $this->get_field_name('google_ad_height') . '" type="text" value="' . $google_ad_height . '" />';
    $html .= '</p>';    echo $html;
  }
}

ウィジェットの作り方は、いろんなとこで説明しているのでここでは割愛。

作成したウィジェットを管理画面に反映させる

作成したウィジェットを管理画面から利用するには、functions.phpでウィジェットの適用化をさせる必要がある。
以下は上記で作成したウィジェットを適用させた場合。

if (version_compare($wp_version, '2.8', '>=')){
  require_once(TEMPLATEPATH . ".append/widgets/google_adsense.php");
  add_action( 'widgets_init', create_function('', 'return register_widget("Google_Adsense");'));
}

これでウィジェットを追加できるようになった。

5.プラグインを自作してみる

ウィジェットと同じように、今までは直で記述していたjavascriptをプラグインとして作成してみる。
今回作成したのは、target=”_blank”のリンクに別ウィンドウで開く画像を自動的に付与するスクリプト。

準備

プラグイン格納用のフォルダを、wp-content/plugins以下に作成。
(ここでは、target-blank-imageとする)

プラグイン用スクリプトファイルを作成

作成したフォルダの中にフォルダ名と同じ名前のファイルを作成。
ファイルに記述する情報はググれば出てくるので割愛。

作成後、管理画面から対象のプラグインを有効化すれば完了。

で、ここまでいろいろやって現在のサイトに至りました。