岐阜発!40代でフリーのITコンサルタントに転身した男のブログ

コンピュータ、スマホ関連、日々の話題などを不定期で更新。

WordPressの表示をPCとスマートフォンで切り替える

さとかずです。

先日、このサイトのテーマを変更して、PCのブラウザで閲覧したときとスマートフォンやタブレットなど小さい画面のブラウザで閲覧したときの表示を切り替えるように設定したのですが、スマートフォンで確認したところPCと同じ画面幅で表示されていました。

今回のテーマは画面の横幅が500px以上だったらPCブラウザと判定してして横に2段組の表示を行い、500px未満ならスマートフォン、タブレットと判断してメニューが記事の下にくる1段組という仕様なのですが、記事の上に貼ったGoogleAdsenceの広告ユニットの横幅が700pxを超えていたため、1段組にはなっているけど、相対的に全体の文字が小さく表示される結果になっていました。

その日は解決方法がわからず、とりあえず横長の広告ユニットをはずしておいて、方法を探していたところやっと修正することが出来ました。

wp_is_mobile()関数を利用する

ネットで調べたところ、WordPressには利用している端末のブラウザを判定するためのwp_is_mobile()という関数が備わっていたため、単純に条件分岐させてあげればよいとのこと。今回は株式会社コミュニティコム様の「wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ」という記事を参考にさせていただきました。

記述方法

<?php if (wp_is_mobile()) :?>
スマートフォン用コンテンツをココに書きます。
<?php else: ?>
パソコン用コンテンツをココに書きます。
<?php endif; ?>

実際にはこんな感じです。
PCでの表示↓

pc

スマートフォンでの表示↓

smapho

今回はwp_is_mobile関数を利用すれば、簡単に表現を切り替えられることがわかりました。何をするにしても勉強ですね☆
ではまた!

ランキング参加中です。応援よろしくお願いします。 にほんブログ村 経営ブログ 自営業・個人事業主へ
にほんブログ村 このエントリーをはてなブックマークに追加

コメントを残す

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

CAPTCHA


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