WordPressの表示をPCとスマートフォンで切り替える
さとかずです。
先日、このサイトのテーマを変更して、PCのブラウザで閲覧したときとスマートフォンやタブレットなど小さい画面のブラウザで閲覧したときの表示を切り替えるように設定したのですが、スマートフォンで確認したところPCと同じ画面幅で表示されていました。
今回のテーマは画面の横幅が500px以上だったらPCブラウザと判定してして横に２段組の表示を行い、500px未満ならスマートフォン、タブレットと判断してメニューが記事の下にくる１段組という仕様なのですが、記事の上に貼ったGoogleAdsenceの広告ユニットの横幅が700pxを超えていたため、１段組にはなっているけど、相対的に全体の文字が小さく表示される結果になっていました。
その日は解決方法がわからず、とりあえず横長の広告ユニットをはずしておいて、方法を探していたところやっと修正することが出来ました。
wp_is_mobile()関数を利用する
ネットで調べたところ、WordPressには利用している端末のブラウザを判定するためのwp_is_mobile()という関数が備わっていたため、単純に条件分岐させてあげればよいとのこと。今回は株式会社コミュニティコム様の「wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ」という記事を参考にさせていただきました。
記述方法
<?php if (wp_is_mobile()) :?>スマートフォン用コンテンツをココに書きます。<?php else: ?>パソコン用コンテンツをココに書きます。<?php endif; ?>実際にはこんな感じです。
PCでの表示↓
スマートフォンでの表示↓
今回はwp_is_mobile関数を利用すれば、簡単に表現を切り替えられることがわかりました。何をするにしても勉強ですね☆
ではまた！
関連記事
にほんブログ村