KUSU'S SITE
2015年4月18日

【WordPress】PCとスマホの端末判別してサイトのデザインを変えるには?

  

 いろいろなサイトを見た時に、PCで見た時とスマートフォンで見た時にデザインが変わっており、なおかつPCのウェブブラウザを縮めてもデザインが変わらない(=レスポンシブデザインではない)というサイトを見たことがある人もいるのではないでしょうか?
そこで今回、上に紹介したようにサイトを見る端末を判別してサイトのデザインをサイトに実装する方法の1つとして、WordPressで作ったサイトにおいて、端末判別してCSSを切り替えるという方法を今回紹介したいと思います!

1. functions.phpに端末情報を記述する

 まず、functions.phpに以下の情報を記述し、端末をPHPで判別してくれるようにします。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        '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']);
}

こちらはそのままコピペで自身のサイトのfunctions.phpに記述してあげましょう。

2. 端末で変更したい箇所にPHPコードを記述する

 続いて、端末で変更したい箇所に以下のようなPHPコードを記述してあげます。

<?php if(is_mobile()) { ?>
    // スマートフォン向けコンテンツの処理 //
<?php } else { ?>
    // PC向けコンテンツの処理 //
<?php } ?>

上を利用して、例えば
PC用CSS→style.css
スマートフォン用CSS→mobile.css

としてあげて、端末によって読み込むCSSを変えよう!となった時には以下のようにPHPを記述してあげましょう。

<?php if(is_mobile()) { ?>
    <link rel="stylesheet" type="text/css" href="mobile.css">
<?php } else { ?>
    <link rel="stylesheet" type="text/css" href="style.css">
<?php } ?>

このように記述してあげることで、PCでサイトを見た時には

<link rel="stylesheet" type="text/css" href="style.css">

とのみ表示されstyle.cssが、スマートフォンでサイトを見た時には

<link rel="stylesheet" type="text/css" href="mobile.css">

とのみ表示されmobile.cssが読み込まれ、それぞれサイトのデザインを変更してあげることができます!

 以上のようにPHPで端末判別してあげて、サイトを見ている端末でサイトのデザインを変えてあげましょう!

スポンサーリンク
スポンサーリンク

コメントを残す




CAPTCHA


スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER


ページトップに戻る