wordpressでスマホ対応

昨今、スマートフォンからwebへアクセスされることが多くなったので、wordpressで作ったサイトも、スマートフォン用にカスタマイズする。

今回の対応は、

  1. クライアントの端末(ブラウザ)を見てテーマを振り分けるプラグインの導入
  2. スマートフォン用のテーマの選定と導入
  3. スマートフォン用のテーマの修正

という手順で行った。

これまでのwebの画面がいわゆるブログのように、最新投稿を表示するようなものであれば、上記1、2の対応でおおむね問題ないように思う。テーマを振り分けるプラグインはいくつもあるが、比較的ダウンロード数の多いものであれば、どれでもきちっと振り分けできていたようだ。今回は、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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
<?php header(“Location: http://abc.xyz.com/recent&#8221;, true, 301); ?>

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。