アップデートに負けないWPtouchカスタマイズ

カスタマイズした内容がアップデート適用で消える

WPtouch Moblie Plugin(以下WPtouch) は自分のサイトをあまり深く考えなくともスマートフォン対応にしてくれる非常に便利なプラグインで、自分の環境に合うようにスタイルシートなどをカスタマイズして使っているユーザも多いと思う。このサイトもスマートフォン向けには、WPtouchのスタイルシートbauhausを少し手を入れて使っている。

ところがプラグインがアップデート(更新)され、これを適用した場合はこうして手を加えた部分もすべて初期状態になってしまう。特にWPtouchはアップデート頻度が高いような気がする……毎回カスタマイズしなおすのが面倒で、アップデートされてもすぐに適用せず、しばらく放置することが多くなった。面倒といっても、カスタマイズ部分は本体CSSファイルとは別のファイルにまとめてあるので、本体ファイルの先頭で1行、@importするだけでいいようにまではしているのだけど、たった1行とはいえ、毎回本体に手を加えないといけないことには変わりない。

プラグイン化で解決

いいかげんやってられないので、カスタマイズ部分だけ別のプラグインにすることにした。やりたいことは、「モバイル表示の時だけカスタマイズ用スタイルシートを適用する」。カスタマイズ用スタイルシートはWPtouchのモバイル表示CSSをカスタマイズするものなので、PC表示のときには適用してほしくない。幸いにもWPtouchにはページがモバイル表示中かどうか判定する関数 wptouch_is_mobile_theme_showing() があるので、これを利用する。

テキストファイルに以下のコードを記述し、拡張子phpで保存して、wp-content/pluginsディレクトリにアップロードしておき、WordPressのダッシュボードのプラグインページで「有効化」する。

function add_wptouch_customized_css()
{
  if (function_exists('wptouch_is_mobile_theme_showing'))
    if (wptouch_is_mobile_theme_showing())
      echo '<link rel="stylesheet" id="wptouch-user-css-css" type="text/css" href="/wp-content/plugins/wptouch_style_ska.css" />'."\n";
}
add_action('wp_head', 'add_wptouch_customized_css');

コードの解説と実行結果

ページがモバイル表示のときにユーザスタイルシートを追加する関数 add_wptouch_customized_css() を用意し、add_action()で、ドキュメントのhead部でこの関数をコールしている。関数内でやっていることは「wptouch_is_mobile_theme_showing() の戻り値がtrueなら、linkタグをechoで書き出す」と、いたってシンプル。書き出すlinkタグのhrefプロパティには、カスタマイズ用CSSファイルの場所を指定する。

この自作プラグインを適用して、モバイル表示の時のページソース。43行目(WP Social Bookmarkingのコメントの前)にlinkタグが追加されている。
wptouch-mobile

モバイル表示でない時のページソース。linkタグは追加されない。
wptouch-nonmobile

メリット(と今後の展開)

WPtouch本体と完全に分離したので、本体が初期状態になろうがどうなろうが、カスタマイズ部分が消えることはない。今後本体のデザインが変わっても、本体をいっさい修正することなく、カスタマイズ用CSSだけを修正すればよい。

最近はレスポンシブデザインとやらで、WordPressのデフォルトテーマ(Twenty Fourteenとか)でも追加プラグイン無しでモバイル端末やタブレット端末などに応じた表示ができるようになっているらしいので、こういうプラグインはゆるゆると役目を終えていくのかもわかりません。

関連(してるかもしれない)記事たち

WordPressへCSV形式で記事を移行
4年ぶり?にサイトリニューアルしました。PHPによる独自システムからWordPressベースに変更。デザインそのものはほ...
コメント処理を軽く
コメントの投稿処理(投稿ボタンをクリックしてから画面が更新されるまでの処理時間)を軽くしてみました。 右側の「COMME...
VBScriptの正規表現における改行(LF)
VBScriptの正規表現エンジン(RegExpオブジェクト)のドットメタ文字(.)は、改行(ラインフィード、vbLf)...