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

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

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


内容がだいぶ古いです!

この記事は2012年にPCテーマとモバイルテーマを別で作って振り分けて、ということをしたときの記事です。2018年にこのブログのテーマはレスポンシブになりました。

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

120412-1 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:○○○の部分もモバイル用に変えておきます。

プラグインを導入

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

120412-2

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

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

追記:2014年3月7日よりこちらを使用しています。 国産のプラグインなので非常にわかりやすく、PC/モバイルの切替ボタンも任意の場所に設置できてとても便利です!設定方法などはこちらです。

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

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

120412-3

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

120412-4

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

120412-5

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

120412-6

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

120412-7

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

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

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;
	}

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

120412-8

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

index.phpとsingle.php

the_post_thumbnail(array(110,110));

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

120412-9

こんな感じになります。

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

120412-10

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

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

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

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

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

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

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

<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

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

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

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

2014/7/31追記:現在はこの部分をjQueryでテコ入れしてます。
120412-12

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

  • カテゴリ一覧(スラッグ: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; ?>

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

120412-13

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

カテゴリ一覧

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

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

タグ一覧

120412-15
<?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>

アーカイブ

120412-16
<?php wp_get_archives(); ?>

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

2016/9/26追記:増えすぎたアーカイブをまとめました。

実機で動作確認

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

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

2012/11/21追記

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

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

120412-17

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

120412-18

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

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

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

更に追記:Androidのスマホとタブレットの切り替え、これで出来るみたいです!知らなかったー!

終わりに

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

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

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

公開日:2012/04/12
更新日:2016/09/26

3件のピンバック

  1. […] WordPressサイトをスマートフォン表示へ対応させるためにやったこと *Ateitexe はみツイートをカマしている方はお試しあれ。 […]

  2. […] 参考記事 WordPressサイトをスマートフォン表示へ対応させるためにやったこと *Ateitexe […]

5件のコメント

  1. Tsubasa Oji より:

    こんにちは。いつも有益な情報ありがとうございます。
    スマートフォン化に関して、1つ教えていただきたいことがあるのですがよろしいでしょうか?
    youさんの記事を元にモバイル版を作りまして、WPtap Mobile Detectorでモバイル版とPC版を振り分けています。

    PC版の記事エントリーで、なぜかモバイル対応されてる記事とされてない記事が出てきてしまいます…. (T-T)
    いろいろ原因を調べているのですが、なかなか解決できません。

    もしも知っていたらおしえていただけないでしょうか?

    Tsubasa Oji

    • *you より:

      Tsubasaさん、コメントありがとうございます。
      WPtap Mobile Detectorは数年アップデートされておらず、不具合の報告等も出てきているようです。

      こちらのプラグインが同じような機能を持っているらしいので、試してみてはいかがでしょうか。私もそのうち切り替えなきゃいけないかなーと思っています。。

  2. Tsubasa Oji より:

    いつも有益な情報ありがとうございます!
    大変忙しい中すいませんせんが、一つ伺いたいことがあります。

    スマートフォン化の際に、
    Media-QueriesをWordpressのCSSに書いたのですが(上書きで)、なぜか適用されません。
    @media
    only screen and (min-device-width: 321px) and (max-device-width: 480px),
    only screen and (min-width: 321px) and (max-width: 480px) {
    #header {
    〜ここに変更したい内容〜
    }
    }
    いろいろ調べたのですが、どうしてもわかりません。
    なぜだかわかりますか?

    • *you より:

      Tsubasaさん、コメントありがとうございます。
      私はMedia Queriesには明るくなく、環境も違いますのでお役に立つことができず、大変申し訳ありません。

      プログラムを組むときのわたしのやり方ですが、既に出来上がっているものに適応させようとすると難しく、どこが悪いのかも見つけにくいものです。シンプルな骨組みで動くかどうか別で試しておいて、そちらに既存のものを少しずつ組み込んでみると、エラーが分かりやすいかもしれません。

      Media Queriesは沢山の方が記事を書いてらっしゃいますので、根気強く取り組めばきっと解決につながると思います。

  3. Tsubasa Oji より:

    いえいえ、こちらこそ何回も聞いてしまってすいませんでした!
    丁寧に答えてくださって感謝してます(^^)
    ありがとうございました!


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。