WordPressサイトをスマートフォン表示へ対応させるためにやったこと

当サイトもスマートフォンへ対応させてみました！レスポンシブデザインではなく、テーマの切り替えという方法をとっていますが、適応させてみると断然見易い…やはりやってみるものですね。なかなか勉強になったので、その流れを書き残しておきます。

スマホで見るとこんなかんじになってるはず

良かったらお手持ちのスマホでも見てみてください！

目次

1. モバイルテーマ用に現在のテーマをコピー
2. プラグインを導入
3. PC上でスマートフォンテーマを確認する
4. 各種phpとstyle.cssを編集
5. スマホは、画像解像度が倍
6. サムネイルの大きさも変える
7. 投稿内の大きい画像を画面に収める
8. 各種一覧・アーカイブページをつくる
9. 実機で動作確認
10. 終わりに

モバイルテーマ用に現在のテーマをコピー

フォルダごとコピー

wp-content/themes/内のPCサイト用テーマフォルダをそのままコピーします。私の場合、“ateitexe”というテーマを使っていたので、モバイル用という意味で“ateitexe-m”というフォルダ名にしてみました。

style.cssのテーマ名も忘れずに変更！

冒頭の、Theme Name:○○○の部分もモバイル用に変えておきます。

プラグインを導入

このプラグインを使いました。

• WPtap Mobile Detector

ユーザーエージェントごとに使用テーマを変えることができます。

• WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ -Webクリエイターボックス

この辺は完全にWebクリエイターボックスさんの導くままです。いつもすみません。

PC上でスマートフォンテーマを確認する

今やいろんなブラウザでユーザーエージェントの切り替えが出来ますが、私はSafariを使ってみました。

まずは、ツールバーのこのマークのところから[設定]をクリック。

この画面が出てくるので[メニューバーに“開発”メニューを表示]にチェックを入れます。

今度はこのマークのところから、[開発]→[ユーザーエージェント]を選びます。

この中から、今回はスマートフォン用なのでiphoneを選びます。

こんなふうに、PC上でスマートフォン用テーマを確認できます！ローカル環境でチェックしながらガシガシ編集していきましょう！

私の使ってるスマホはAndroidなので、実機じゃないにしろiphoneの動作確認できて良かったです。

• パソコンでスマートフォン画面を確認する -簡単ホームページ作成支援-Detaramehp

Safariの設定については、こちらのサイトを参考にさせて頂きました！

各種phpとstyle.cssを編集

やっと下準備が整ったところで、いらないところを削ってスッキリさせていきます。私の場合、PCサイトでは940pxに設定していたwidthをとっぱらって可変にし、サイドバーを消し、ヘッダーもロゴ以外はほとんど削ってしまいました。

横幅をデバイスに合わせる

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

こいつをhead内に記述するとスマホ用に横幅が合うみたいです。

スマホは、画像解像度が倍

Retinaディスプレイというものが搭載されているため、画像を普通に表示するだけだと、なんだかぼんやりしてしまうみたいです。縦横1/2で表示してあげると、綺麗に見えます。

HTMLの場合

<!-- 本来は200*100画像 -->
<img src="http://xxx/sample.png" width="100" height="50" />

CSSの場合（背景画像など）

/* 本来は200*100画像 */
body{
	background: url(images/footer.png) repeat-x bottom;
	background-size: 100px 50px;
	}

サムネイルの大きさも変える

サムネイルはいつも横幅220pxで作成していますが、スマホ表示だと大きすぎる…。

index.phpとsingle.php

the_post_thumbnail(array(110,110));

サムネイル表示のコードの中にarray(110,110)と入れると自動で縦横比保持のまま長辺を110pxにしてくれます！左寄せなどcssで指定していた場合、クラス名が変わりますのでご注意ください。

こんな感じになります。

投稿内の大きい画像を画面に収める

大きい画像は画面からはみ出してしまうので、投稿内の画像のCSSに以下を追記。

img {
	max-width: 100%;
	height: auto;
	}

きっちり画面に収めてくれます！

• 少しのコードで実装可能な15のスマートフォンサイト用小技集 -Webクリエイターボックス
• 外部CSSを1枚読み込ませて、ブログをスマホ最適化させる5つのフロー -mnemoniqs

phpやcssの編集に関してはほとんど見よう見まねです！ホントにありがとうございます！

追記：ツイートの埋込みもスマホ対応

WordPress3.4からURLを貼り付けるだけで簡単にツイート埋込みができるようになりましたよね。

昨晩夫が慣れない作業で腕の筋肉に違和感がって言ってたから、「ジャバウォックが覚醒するんじゃない？“力が欲しいか”って聞こえない？」って言ってみたら反応薄かった(´Ａ｀)

— *yuko (@ateitexe) August 2, 2012

こんな感じで。ただこれ、このままだとスマホで右側がはみ出しちゃうので、

<script type="text/javascript">
	window.onload=function(){
		if(jQuery('.twitter-tweet-rendered').size()>0){
			jQuery('.twitter-tweet-rendered').each(function(){jQuery(this).css("width","");});
		}
	};
</script>

こいつをbody閉じタグの直前に書くと綺麗に収まります！動作確認はこのページをスマホで見てみてください！

• ヘイ！ブロガーさん書いておきなよこのコード！ツイート貼付けのスマホ対応 -actywayhttp://actyway.com/7031

こちらにはレスポンシブの書き方も載ってます！いつもありがとうございますー！

各種一覧・アーカイブページをつくる

ヘッダーやサイドバーを削ったかわりに、フッターにメニューを作りました。

元々あるページはただリンクさせればいいんですが、カテゴリ、タグ、アーカイブのページをスマホ用に新しく設置します。

• カテゴリ一覧（スラッグ：category）
• タグ一覧（スラッグ：tag）
• アーカイブ（スラッグ：archive）

という名前の新規固定ページを3つ作成します。（本文には何も書かなくていいです）

で、固定ページテンプレート（page.php）の

<?php the_content(); ?>

の直後（前でもいいですが）あたりに

<?php if (is_page('category')): ?>
	<ul>
		<?php wp_list_categories('show_count=TRUE&title_li='); ?>
	</ul>
<?php endif; ?>
<?php if (is_page('tag')): ?>
	<ul>
		<?php wp_tag_cloud('format=list'); ?>
	</ul>
<?php endif; ?>
<?php if (is_page('archive')): ?>
	<ul>
		<?php wp_get_archives(); ?>
	</ul>
<?php endif; ?>

と記述します。ページに合わせて一覧を出す処理をしています。

ちなみに、スラッグでなくページIDで指定したいときは記事一覧をマウスオーバーしたときに出てくる数値がIDです。

カテゴリ一覧

<?php wp_list_categories('show_count=TRUE&title_li='); ?>

show_count=TRUEを入れることで件数を表示します。画像では見出しが入っていますが、title_li=を入れると削除できます。

タグ一覧

<?php wp_tag_cloud('format=list'); ?>

format=listを入れてリスト形式にしています。

追記

今はカテゴリと同じように、件数付きで表示させています。

<ul>
<?php
$posttags = get_tags();
if ($posttags) {
	foreach($posttags as $tag) {
		echo '<li><a href="'. get_tag_link($tag->term_id) .'">' . $tag->name . '</a> ('. $tag->count . ")</li>";
	}
}
?>
</ul>

アーカイブ

<?php wp_get_archives(); ?>

アーカイブは特にいじってませんが、Codexを見るといろいろできそうです。

実機で動作確認

手持ちのandroid（AQUOS PHONE f SH-13C）で検証しましたがSNSボタンは各種サービスがスマホ対応してるのかな？そのまま普通に使えました。

iphoneの実機では動作確認できていませんので、不具合ありましたら教えて頂けたら嬉しいです。

2012/11/21追記

※現在はWPtap Mobile Detectorを使っていないので、こちらの情報は古い可能性があります。

WPtap Mobile Detectorで、モバイル表示のときに「PC表示へ」、モバイルでPC表示しているときに「モバイル表示へ」というのはできないかなーと思って調べてみたら、分かりやすく説明してくださってる記事を発見！

• WPスマホ用テーマで『PC版への切り替えボタン』を実装できるプラグイン「MW Theme Switcher on WPtap」の使い方

モバイル版のヘッダーに「PC表示」と追加して、

モバイルでPC表示しているときのフッターに表示切り替えを実装しました！

WPtap Mobile Detectorすごく便利なんですが、iphoneとipadは区別できてもAndroidはモバイルもタブレットも一緒なんですよね（ということに、先日Androidタブレットで見てみて初めて気がつきました）。タブレットでモバイル表示されると、び、びみょう…。。

それなりに知識のある人はブラウザの設定からPC表示にできると思うんですが、やっぱりPC/モバイル切り替えはあったほうがわかりやすいかなぁと思い、実装してみました。

終わりに

結構前から、スマホ対応…してみたいな、でも自分には敷居が高いんじゃないかな…とぐだぐだしていたんですが、いざやってみたら意外と早くできました。プラグイン使ったのが大きいとも思いますが…。何事も勉強ですね。楽しくできました。

スマホ画面の無料GUIキット

• Android画面を完全再現したPhotoshop無料GUIキット -Photoshop VIP

この記事のスマホ画像はこちらのpsdにスクリーンキャプチャをはめ込んで作成しました。この記事を書くまで知らなかったのですが、SHARP製のandroidは電源ボタン+ホームボタンでスクリーンキャプチャがとれるんですって！便利！！