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

» 2014年03月06日 18時00分 公開
[佐藤翔,ねこポッポ]
前のページへ 1|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シャツやネコマンガを描いて暮らしている。


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。