WordPressでスマートフォンとPCとで表示を変更する条件分岐させる方法

large-6

ワードプレスのカスタム投稿!
カテゴリー名を取得せよ!

システムエンジニア(SE)かっきーです。

「サイト内にコンテンツを導入したいが、スマホのみ導入したい!」
または、「パソコン画面のみ、この処理をしたい」という声を多数いただいたため、今回はそのやり方を紹介したいと思います。

is_mobile()関数の作成

まず、分岐させるためには分岐させる内容を関数にまとめ、【functions.php】に
以下のコードを記載します。

【functions.php】を編集する際は慣れていないと不具合を生む可能性もあるため、
バックアップを取っておきましょう。
こちらの記事を参考にしてください。

function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

こちらのコードは、
「iPhone」「iPod touch」「Android」等を1つずつ設定して、USER_AGENT(ユーザーエージェント)を判別する関数になります。

この【is_mobile()】関数を使って分岐処理を該当の箇所に書いていきます。

is_mobile()の使い方

分岐処理をさせたい箇所に下記のように書いていきます。

<?php if ( is_mobile() ) : ?>
  // スマホで表示させたい内容
<?php else: ?>
  // PC・タブレット(スマートフォン以外)で表示させたい内容
<?php endif; ?>

このように記載することにより、SPとPCで処理内容を分けることが出来ます。

応用編

SPとPCの分岐だけではなく、iPhoneのみに表示させたいもありと思います。

その際は【functions.php】に
iPhone専用の関数を用意します。
記載内容は下記のコードを記載してください。

function is_iphone() {
    $is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
    if ($is_iphone) {
        return true;
    } else {
        return false;
    }
}

そして分岐させたい箇所に下記のように分岐処理を記載します。

<?php if ( is_iphone() ) : ?>
  // iPhoneで表示させたい内容
<?php else: ?>
  // それ以外で表示させたい内容
<?php endif; ?>

簡単に実装することができるため皆さんもぜひお試しください。

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

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