WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン

更新

レスポンシブデザインでWordPressをスマホ対応させるとき、スマホとPCで表示を切り替えたくなることは多いです。その方法をまとめました。

PCとPC以外とを区別するwp_is_mobile関数を使う

wp_is_mobile関数は、ガラケー・スマホ・タブレットでの閲覧時にはTRUEを返し、PCでの閲覧時にFALSEを返します。

<?php 
if(wp_is_mobile())
{
(タブレット・スマホ・ガラケーから閲覧された場合の処理)
}
else
{
(PCから閲覧された場合の処理)
}
?>

一見これで問題ないように思えますが、ユーザビリティ的にはあまりよくないのです。

グーグルは「タブレットユーザーはスマートフォン版のサイトではなくPC版のサイトが表示されることを期待している」と断言しています。

ユーザビリティーの観点からタブレット端末ではPCと同様の表示が行われるべきなのです。

「タブレット・PC」と「スマホ・ガラケー」とを区別する「is_mymobile関数」を自作して利用

というわけで「スマホ・ガラケー」での閲覧時にはTRUEを返し、「タブレット・PC」での閲覧時にFALSEを返す関数「is_mymobile関数」を作りました。

以下のような感じで、タブレットではPCと同様の表示をすることが出来ます。

<?php 
if(is_mymobile())
{
(スマホ・ガラケーから閲覧された場合の処理)
}
else
{
(タブレット・PCから閲覧された場合の処理)
}
?>

…言うのは簡単なんですが、is_mymobile関数を定義するのには結構苦労しました。

以下のコードをfunction.phpに書けばis_mymobile関数が使えるようになります。

WordPressの投稿で「PC・タブレット」と「スマホ・ガラケー」で表示を切り替える為のショートコード

is_mymobile関数を応用したショートコードを作ると、投稿本文中で、「スマホ・ガラケー」と「PC・タブレット」で表示を切り替えることが出来ます。

function.phpでis_mymobileを定義した部分の後ろに、以下のコードを貼り付けます。

すると、[phone]と[/phone]で囲まれた部分はスマホでのみ表示され、[nophone]と[/nophone] で囲まれた部分はPCとタブレットでのみ表示されるようになります。

WordPressの投稿で「PC」と「タブレット・スマホ・ガラケー」で内容を変えるためのショートコード

wp_is_mobile関数を応用したショートコードを作ると、投稿本文中で、「PC」と「ガラケー・スマホ・タブレット」とで表示を切り替えることが出来ます。

これで[phone]と[/phone]で囲まれた部分はスマホ・ガラケーでのみ表示され、[nophone]と[/nophone] で囲まれた部分はPCとタブレットでのみ表示されるようにします。

スマホとPCで画像の大きさを差し替えるプラグイン

スマホのような幅の狭いデバイスでPC用の画像を表示するのは、高速化の観点からいただけません。

スマホでは、PC用画像の縮小版に、差し替えたいところです。

そんなときにぴったりなプラグインがHammyです。

レスポンシブデザインを諦めてスマホ用テーマを自動出力するプラグインを使うのも手です。

スマホ対応をレスポンシブデザインで行うと色々融通が利く反面、結構面倒くさいです。

いっそのことスマホ専用のテーマを作ってしまう手もあります。

プラグインの中にはスマホ用テーマを自動的に作成してくれるものもあります。

個人的には、スマホ専用テーマを作ってくれるプラグインに頼ると色々窮屈な気がするので、面倒でもレスポンシブデザインのテーマを弄っています。

WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン」への7件のフィードバック

  1. ピンバック: 知ってるとちょっと便利なWordpress関数

  2. ピンバック: WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめ - ゆめぴょんの知恵

  3. ピンバック: WordPressでスマホ / それ以外の広告を出し分ける話 | もやし工房

    1. ウェブシュフ 投稿作成者

      筒井さん、コメントありがとうございます。

      改築頑張ってください。

      返信
  4. 松尾司

    初めまして、こんばんは、function.phpを編集することなく、
    の下にmoreタグを入れると、崩れてしまいます、どのようにすればよろしいでしょうか?

    返信
    1. ウェブシュフ 投稿作成者

      松尾司様、コメントありがとうございます。

      moreタグ絡みのトラブルは未体験にてお答えすることが出来ません。

      お力になれず申し訳ございません。

      返信

コメントを残す

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