昨今、スマートフォンからwebへアクセスされることが多くなったので、wordpressで作ったサイトも、スマートフォン用にカスタマイズする。
今回の対応は、
- クライアントの端末（ブラウザ）を見てテーマを振り分けるプラグインの導入
- スマートフォン用のテーマの選定と導入
- スマートフォン用のテーマの修正
という手順で行った。
これまでのwebの画面がいわゆるブログのように、最新投稿を表示するようなものであれば、上記１、２の対応でおおむね問題ないように思う。テーマを振り分けるプラグインはいくつもあるが、比較的ダウンロード数の多いものであれば、どれでもきちっと振り分けできていたようだ。今回は、WPtap Mobile Detectorを使った。
スマートフォン用のテーマはいくつか出ているが、テキスト中心のサイトに向いたデザイン、写真が多用されているサイトに向いたデザインなどがあり、いろいろ試してみるとよい。スマートフォンを縦に向けたり、横に向けたりしたときにも、ちゃんと幅が収まるといったことも必須要件だ。
使いたいスマートフォン用のテーマが決まったら、振り分けプラグインでそのテーマを選ぶだけ。簡単にスマートフォン対応できる。
ただ、この簡単さが、なかなか納得いかない原因でもある。
というのも、wordpressのトップページのヘッダ、メニュー、ウィジット、フロントページなど、いずれも、PC向けのテーマを前提に設定する。しかし、スマートフォン用のテーマは、wordpressから直接アクティブにすることもないので、一切のオプションは使えず、そのテーマの初期状態でしか使えない。そのため、よさそうなテーマを見つけても、そのまま使えるテーマは簡単には見つけられない。
その結果、スマートフォン用テーマを個別に修正せざるを得なくなるのだ。
とは言っても、スマートフォン用には、ページ一覧が不要とか、カレンダーが不要とか、PC用のテーマのサイドバーにあるようなものを整理したいという程度なので、index.php, sidebar.php, page.phpこのあたりの不要な部分を削るだけで、当初の目的は達せられる。
このような対処で切り抜けられたサイトもいくつかあったのだが、これでうまくケースもあった。それは、PC版テーマのフロントページが、特定の固定ページを設定している場合だ。今回対処したケースでは、フロントページがfrontというページテンプレートを使っていた。スマートフォン用テーマにはfrontというテンプレートはないので、デフォルトテンプレートが使われて、なんだか、サイドバーだけといった感じの初期画面表示となってしまった。PC用では、やや凝ったフロントページを作成する場合でも、スマートフォンで見る場合は、単に、最新投稿から、記事が並んで見えればよかったので、フロントページを出さないような対処が必要となった。
ところが、スマートフォン用には最新投稿を表示するだけで良いといっても、初期ページの設定をスマートフォン用に新たに設定することはできない。そこで、やむなく、wordpress を騙すことにする。
つまり、スマートフォン用のテーマのフォルダの中に、frontというページテンプレートを作成する。このテンプレートは、画面表示をするようなことはせず、すぐに、最新投稿を表示するためのページへリダイレクトさせる。サンプルのスクリプトは以下。
これで何とか目的は達せられたが、スマートフォン用テーマをバージョンアップするときに、frontページテンプレートを削除しないよう、注意が必要である。
<?php /** * Template Name: front */ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>
<?php header(“Location: http://abc.xyz.com/recent”, true, 301); ?>
Ermanii's memo-random 