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

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


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

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をとっぱらって可変にし、サイドバーを消し、ヘッダーもロゴ以外はほとんど削ってしまいました。

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

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

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

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

HTMLの場合

CSSの場合(背景画像など)

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

120412-8

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

index.phpとsingle.php

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

120412-9

こんな感じになります。

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

120412-10

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

120412-11

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

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

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

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

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

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

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

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

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

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

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

  • カテゴリ一覧(スラッグ:category)
  • タグ一覧(スラッグ:tag)
  • アーカイブ(スラッグ:archive)

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

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

の直後(前でもいいですが)あたりに

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

120412-13

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

ページ本文に処理を書いても良かったのですが、PHPを本文でも使えるようにするプラグインを入れなきゃいけません。めんどくさプラグインを無駄に増やさないように、上記のように書いてみました。

カテゴリ一覧

120412-14

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

タグ一覧

120412-15

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

追記

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

アーカイブ

120412-16

アーカイブは特にいじってませんが、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は電源ボタン+ホームボタンでスクリーンキャプチャがとれるんですって!便利!!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

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


5件のコメント

  • Tsubasa Oji
    2013年3月26日 5:46 AM

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

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

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

    Tsubasa Oji

    • *you
      2013年3月26日 4:51 PM

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

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

  • Tsubasa Oji
    2013年3月30日 11:48 AM

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

    スマートフォン化の際に、
    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
      2013年4月2日 9:47 AM

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

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

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

  • Tsubasa Oji
    2013年4月4日 11:11 PM

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

3件のトラックバック

コメントを残す




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


back to top