WordPressでのスマホ表示最適化と使えるプラグイン：隔週刊「キャンペーンサイト構築＆運用」（4）（2/2 ページ）

スマートフォンサイト用のWordPressコーディング

　今回行うスマートフォンサイト用のコーディングは幾つかあるが、主に、画面サイズに応じた画像の縮小とviewportの設定、PCとスマホでのヘッダー画像の表示切り替えの3つである。

画面サイズに合わせて画像を縮小させる

　画像については、cssで下記を指定しておくと、画面サイズに合わせて縮小してくれる。

max-width: 100%
height: auto;

viewportの設定

　viewportをメタタグで設定し、スマートフォンで見やすくする。ここでは下記のように指定している。親テーマのindex.phpのhead内に記述する。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

PCとスマートフォンでヘッダー画像を切り替える

　index.phpのヘッダー画像の部分にスマートフォン用のimgタグも書き加え、PCからのアクセスの場合、スマートフォン用のヘッダー画像をdisplay:noneで非表示（親テーマのstyle.cssに記述）、逆にスマートフォンからのアクセスの場合は、PC用のヘッダー画像を同じくdisplay:noneで非表示（子テーマのstyle.cssに記述）という対応にした。スマートフォン用のヘッダー画像は、親テーマのimgフォルダーに入れておく。

<img id="headerImage" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" />
<img id="headerImageMobile" src="<?php echo get_template_directory_uri(); ?>/img/title_m.png">

　他にもスマートフォンで見やすくなるように、子テーマのstyle.cssを編集していく。完成したらテーマを親テーマに戻しておく。

「Any Mobile Theme Switcher」のインストールと設定

　次に、プラグインによってユーザーエージェントに応じてテーマの切り替えを可能にする作業をする。

　Any Mobile Theme Switcherは、デバイスのユーザーエージェントによって表示するテーマを切り替えることができる無料のプラグインである。

　管理画面の「プラグイン」→「新規追加」で検索、「いますぐインストール」をし、有効化する。

　管理画面の「設定」→「Any Mobile Theme」から設定をする。iPhoneやiPad、Androidはもちろん、BlackberryやWindows Mobile Phone用のテーマ設定も可能である。また、サイト内に「PC表示に切り替える」ボタンの設置も簡単にできる。

　設定したら、スマートフォンや検証すべき端末からアクセスしてみて正常に表示されるか確認する。

最終回は、アクセス解析とリポートの作成

　次回は、サイトのアクセス解析と本キャンペーンのリポートを作成する。PVやコンバージョンなどの数値を基に、リポートを作成し、サイトの改善施策を考える。

著者プロフィール

佐藤 翔（ねこポッポ）

ネコ大好きWebデザイナー。ネコTシャツやネコマンガを描いて暮らしている。