ちゃんとブログ。

WordPressで、スマートフォンにのみテーマを変更する際、専用のプラグインも多数ありますが、大抵はテーマとセットになってしまっているため、全くオリジナルのデザインを適用するには、別のアプローチを取る必要があります。

そこで便利なのが「UserAgent Theme Switcher」。スマホに限らず、ユーザーエージェントで判定して、自由にテーマを切り替えることができます。

• UserAgent Theme Switcher

しかし、こちらのプラグイン、ちょっと困った点があります。

• iPadがスマートフォンとして認識されてしまう
• Androidで切り替わらない

そこで、プラグインを少し改造します。なお、ちょっとはまったのがプラグインにはXMLファイルが用意されているため、てっきりこれで制御できるのかと思ったのですが、現状ではこのXMLは使われていないようです。。なぜ・・　ということで、PHPを直接編集します。

/wp-content/plugins/user-agent-theme-switcher/UserAgentThemeSwitcherData.php　をエディタで開いて、300行目付近の次の記述を見つけます。

…
$this->addBrowser(new BrowserUA(‘operadesktop’, ‘Opera’, null, ‘^Opera/[d.]+( ){0,1}(.*).*$’, ‘opera’));
$this->addBrowser(new BrowserUA(‘safarimobile’, ‘Safari Mobile’, null, ‘^Mozilla/5.0 (.*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘operamini’, ‘Opera Mini’, null, ‘^Opera/.* (.*Opera Mini/.*).*$’, ‘opera,mobile’));
… 

この、太字になった部分（safarimobileと書かれている行がポイント）を次のように書き換えます。

…
$this->addBrowser(new BrowserUA(‘operadesktop’, ‘Opera’, null, ‘^Opera/[d.]+( ){0,1}(.*).*$’, ‘opera’));
$this->addBrowser(new BrowserUA(‘safarimobile’, ‘Safari Mobile’, null, ‘^Mozilla/5.0 ((iPhone|iPod).*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘androidmobile’, ‘Android Mobile’, null, ‘^Mozilla/5.0 (Linux; U; Android.*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘operamini’, ‘Opera Mini’, null, ‘^Opera/.* (.*Opera Mini/.*).*$’, ‘opera,mobile’));
… 

行ったこととしては、「Safari Mobile」をiPhone/iPod touchのみにするために正規表現を少し細かくしています。また、Android用の判定がないので、付け足しています。

これで、動作を確認しました。プラグインを直接書き換えてしまっているため、バージョンアップするとパターンが消えてしまいますが、XMLなどで制御できるようになりそうな感じなので、今後のバージョンアップに期待ですね。

なお、こちらの内容は2011/11/27のWordCamp Tokyo 2011で発表します。