記事内に広告が含まれています。

wordpressでPCと他のデバイスで表示を変える関数(タグ)

WordPress ウェブサイト・ブログ作成
ウェブサイト・ブログ作成
この記事は約4分で読めます。

 wordpressでPCと他のデバイス(スマートフォンとか)の表示を切り替えるための関数のメモ。

 FC2ブログでPCと他のデバイスで表示を変える為の変数があるように、wordpressにもPCと他のデバイスで表示を変える為の関数がある。

 条件分岐ってやつのひとつだ。

広告

wordpressのPCだけに表示するための関数

<?php if (!wp_is_mobile()) :?><?php endif; ?>

<?php if (!wp_is_mobile()) :?><?php endif; ?>実際の使い方

<?php if (!wp_is_mobile()) :?>
ここにPCで表示したい内容を記載
<?php endif; ?>

 実際に使うときには、コメントタグを添えておくとわかりやすいかも。

 たとえばこんな感じ↓

<!?▼PCのみ表示?><?php if (!wp_is_mobile()) :?>
ここにPCで表示したい内容を記載
<?php endif; ?><!?▲PCのみ表示?>

wordpressのPC以外のデバイスのみに表示するための関数

<?php if (wp_is_mobile()) :?><?php endif; ?>

<?php if (wp_is_mobile()) :?><?php endif; ?>の実際の使い方

<?php if (wp_is_mobile()) :?>
ここにPC以外のデバイスで表示したい内容を記載
<?php endif; ?>

 コメントを添えると↓

<!?▼モバイルのみ表示?>
<?php if (wp_is_mobile()) :?>
ここにPC以外のデバイスで表示したい内容を記載
<?php endif; ?>
<!?▲モバイルのみ表示?>

 wp_is_mobileは便利な関数だがスマートフォンでもタブレットでも適応されてしまうのが難点。

 スマートフォンだけに表示を適応したい場合もある。

スマートフォンだけに表示・非表示を行う場合

1、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']);
}

*STINGER3の場合はすでにfunctions.phpに書き込まれているようでさらに書き込むとエラーになる。

2、スマートフォンだけに表示したい部分には以下の記述を追加する。

<?php if (is_mobile()) :?>
  スマートフォンでのみ表示させたいコード
<?php endif; ?>

 PC・タグレットなどで表示したい部分は以下の記述を記載する

<?php if (!is_mobile()) :?>
  PCでのみ表示させたいコード
<?php endif; ?>

 便利な条件分岐の関数(タグ)だが、ウィジェットの中では使えない。

 プラグインで広告を配置するような場合も利用不可。

コメント

タイトルとURLをコピーしました