WordPressでKtaiStyleとjQuery Mobileを使ってスマホ対応サイトを作る方法

　「ライターも増えたし、この機会にスマホ対応にしよう」なんてどうでも良いことを思い立ち、あーだこーだしてみました。
　「jQuery Mobile」というjavascriptのライブラリを使えば簡単にスマホ対応サイトに出来るらしい、ということは前からなんとなく知っていたので、「簡単にできるだろう」なんて思って始めたのですが、Ktai Styleとの兼ね合いでいろいろ苦労しました。。

　WordPressでPC、スマホ、ガラケーに対応する場合、よく使われるのは Ktai Style + WPtouch の組合せみたいです。最初はその方法で行こうかと思っていたのですが、調べたらWPtouchには無料のWPtouchと有料のWPtouch Proがあって、無料版はなんかいろいろ制限があるっぽい(通りでみんな似たような見た目になってるはずだわ)。

　しかし、$39も払って自分でテーマ作るってのもシャクナベイベーなので、今回はKtai Style + jQuery Mobileでがんばる！

作り方

　基本的にはスマホ用のKtai Styleテーマを作って、それを「iPhone, Android 用」のテーマとして指定してあげるだけです。そのあたりの流れは以下のページが非常に参考になりました。

WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ | Design Spice

DOCTYPEを変える

　HTML5でマークアップするのはやぶさかではないのですが、そのままだとHTML5ではなく、XHTMLのDOCTYPE出ちゃうんですけれどもぉ……

　ってことで、いろいろ調べた結果、ここは Ktai Style のコアに手を加えることにしました。
　変更するのはoperators/base.php。この2487行目以降にiPhoneやandroidでアクセスした場合の動作が書かれているらしいKtaiService_Touch クラスがあるので、このコンストラクトを以下のように編集します。

public function __construct($user_agent) {
  parent::__construct($user_agent);
  $this->theme = ks_option('ks_theme_touch');
  $this->type  = 'TouchPhone';
  $this->preamble = '<!DOCTYPE html>'; // 追加
  add_action('ktai_wp_head', array($this, 'viewport') );
  return;
}

　もっと簡単にfilterとかで対応出来る方法があったら教えてください。

HTMLタグのstyle属性が消えないようにする

　そのままだとthe_content()の出力結果からタグに付されているstyle属性が削除されるようになっているみたいです。icoroはstyle属性が消えちゃうとgoogle mapsがうまく表示出来なくなっちゃう仕様なので、style属性を削除しないようにしました。
　変更するには上と同じくoperators/base.phpにあるKtaiService_Touchクラスのviewportメソッドの後あたりに、新たにstrip_stylesメソッドを追加してメソッドをオーバーライドします。

/* ==================================================
 * strip_stylesをオーバーライド
 * @param string  $buffer
 * @return  string  $buffer
 */
public function strip_styles($buffer) {
  return $buffer;
}

　これに限らず、なんか動作が面白くない場合は、KtaiService_TouchでKtaiServicesのメソッドをオーバーライドすれば面白くなることが多いようです。

表示されるHTMLタグと属性を追加する

　Ktai Styleでは出力されるHTMLタグとその属性の種類がinc/kses.phpの中で指定されています。$allowedtagsの配列に入っていないタグや属性は削除されてしまいます。
　たとえば、SyntaxHighlighterを使っている場合、preタグにclass属性やtitle属性が付されるようになっています。しかし、デフォルトではKtai Styleがこれらの属性を削除してしまうため、SyntaxHighlighterの表示が適用されなくなってしまいます。

　そういう場合は、以下のような内容のプラグインを作って、preタグに付される属性(class、style、title)を削除されないようにすればおｋ。kses.phpファイルに直書きしてもいいですが、そうするとKtai Styleのアップデートの度に修正を加えなければならなるのでちょっとめんどい。

<?php 
/*
Plugin Name: Ktai Style Hooks
Version: 2.05
*/
function icr_allowedtags($tags){
  $tags['pre'] = array(
      'class' => array(),
      'style' => array(),
      'title' => array()
  );
  return $tags;
}
add_filter('ktai_allowedtags', 'icr_allowedtags');
?>

　このプラグインのファイル名は「0_ktai_style_hooks.php」とかにしておけば良いです。
　なぜかicoroの環境だと「ktai_style_hooks.php」と言う名前ではうまく読み込まれませんでした。ktai_styleよりも前にないとダメっぽい？　でも、別のテスト用のWordPressでは普通に読み込まれた。なんでだ。

Flickrのサムネイルを取得出来るようにする

　これはスマホに限らないんですけれども。
　記事に貼り付けてるFlickrのサムネイル画像が表示されたりされなかったりしてるなぁ、と思ったら、画像のリンク先が「flickr.com」ではなく、「staticflickr.com」になってるものがありました。最近アップロードされた画像は「staticflickr.com」になってる？

　というわけで、inc/shrinkage.phpにあるflickrのサムネイルを取得しているらしいコードの下にstaticflickr.comも追加しました。コードはKtaiShrinkageクラスのコンストラクトの中、158行目にありました。

$this->image_services = apply_filters('ktai_image_services', array(
  '^https?://[-\w.]+\.flickr\.com/' => array($this, 'get_thumbnail_flickr'),
));
// staticflickr.comを追加
$this->image_services = apply_filters('ktai_image_services', array(
  '^https?://[\w]+\.staticflickr\.com/' => array($this, 'get_thumbnail_flickr'),
));

　「なんか最近、Flickrのサムネイルが表示されてなくないか？」って人はこのあたりを見直すと良いかも。

Flickrの画像を大きくする

　「スマホの画面でサムネイルサイズの画像はちょっと小さいかな」と思ったので、スモールサイズを出すように変えました。ついでにAmazonの画像も表示するようにしました。
　Ktai Styleのスマホ用テーマの中にあるfunction.php(なければ作成)に以下の内容を追加します。

/* 画像を直接表示する */
function ks_keep_amazon_image($replace, $orig, $src) {
  // Amazon
  if (preg_match('#^http://ecx\.images-amazon\.com/images/#', $src)) {
    $replace = $orig;
  }
  if (preg_match('#^http://images\.amazon\.com/images/#', $src)) {
    $replace = $orig;
  }
 
  // flickr
  $regexp = '#^https?://([\w]+\.staticflickr|[-\w.]+\.flickr)\.com/#';
  if (preg_match($regexp, $src) ) {
    $replace = preg_replace('#(/\d+_[0-9a-z]+)(_[stmb])?(\.jpg)#', '$1_m$3', $orig, 1);
    $replace = preg_replace('# width="[\d]*?"#', '', $replace, 1);
    $replace = preg_replace('# height="[\d]*?"#', '', $replace, 1);
  }
 
  return $replace;
}
add_filter('ktai_image_to_link', 'ks_keep_amazon_image', 10,3);

　個人的にwidthとhightの属性を削除してるのがちょっと心残りなんですが、まあ、画像が小さければ問題ないだろうと言うことで。GD使って画像のサイズ使って、とかするのもあれですし。

表示切り替えリンクの出力を変える

　今回初めて知ったのですが、Ktai Styleってスマホで表示したときにPC表示と携帯表示を切り替えられるリンクを表示する機能があるんですね。。なんて便利な！
　この機能を使うにはKtai Styleのテーマの中でPC表示のリンクを表示したい場所に「ks_switch_pc_view」関数を追加するだけです。

<?php ks_switch_pc_view(); ?>

　PCのテーマにはとくに何かする必要はありません(wp_footerの記述は必要かも)。スマホでPC表示にした場合にだけ、一番下に携帯表示のリンクが表示されます。

　ただ、表示が欲しいものと違ったのでちょっと変えました。
　PC表示リンクを変えるコードはスマホ用テーマのfunction.phpに記述しました。

// PC表示リンクを変更する
function icr_switch_pc_view($menu, $uri, $before, $after) {
//  $menu = '(<a href="/news/?pcview=true">PC 表示にする</a>)'
  $exp = '/<a href="(.*?)">/i';
  preg_match($exp, $menu, $m);
  $html = "<a href=\"{$m[1]}\" data-icon=\"refresh\">PC表示</a>";
  return $html;
}
add_filter('switch_pc_view/ktai_style.php', 'icr_switch_pc_view', 10, 4);

　携帯表示リンクを変えるコードはPC用テーマのfunction.phpに記述しています。ついでにCSSも設定してボタンっぽい見た目にしています。

/******************************
 * smartphone対応
 */
function icr_switch_mobile_view($menu, $path) {
  $html = str_replace('携帯表示', 'スマホ表示', $menu);
  return $html;
}
add_filter('ktai_switch_mobile_view', 'icr_switch_mobile_view', 10, 2);
 
function icr_switch_mobile_view_css($style){
  $html =
  "#switch-mobile {
    background: #232323;
    padding: 20px 10px;
    text-align: center;
  }
  #switch-mobile a {
    padding: 10px 20px;
    color: #ccc;
    border: 1px solid #666;
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
    background: -moz-linear-gradient(top, #333, #222);
    border-radius: 6px;
    font-size: 13px;
  }";
  return $html;
}
add_filter('ktai_switch_mobile_view_css', 'icr_switch_mobile_view_css');

と言う感じ

　メンテナンスがめんどくさくなるので、あんまりプラグインのコア部分に手を入れたくないのですが、今回はやむなくいくつかの部分に手を入れました。
　特に出力からタグやら属性やらが削除されるのが一番参りました。。the_content()の出力が携帯用に変換されることは分かっていたのですが、テーマに直接書いたechoやらvar_dumpやらの出力もフィルタされちゃうとは思いませんでした。。まあ、携帯出力が考慮されていないプラグインからの出力も考慮すると、この仕様も仕方ないかもと思ったり。

　スマホ対応に限っては出力がフィルタされない方が使いやすいと思う一方、画像のサムネイルを表示する機能はあった方がありがたいと思ったり。てかそうなると、Ktai Styleとは別にスマホを表示するWPtouchのようなプラグインを探すなり作るなりした方が良いかもですねぇ。

画像サイズをスマホに最適化
PCとスマホの表示を切り替えるリンクを表示
テーマは標準のテーマディレクトリを流用すればいいかも
出力のキャッシュ機能とかあったらとってもおいしいです

というあたりの機能があると嬉しいです。これからスマホのシェアはどんどん増えていくと思いますし。とか言ってる自分のケータイはガラケーですけれども。

参考

1冊ですべて身につくWordPress入門講座

メーカー：SBクリエイティブ
カテゴリ：Kindle版
発売日：2022/03/23

Amazon Yahoo! 楽天