WordPressにスマートフォン用の条件分岐関数を追加する方法

　WordPress[※1]ワードプレスにはパソコンとモバイルの処理を分けるための関数「wp_is_mobile()ダブリューピー・イズ・モバイル」があり、サイトを閲覧している端末がモバイル端末だった場合は「TRUEトゥルー」、それ以外の端末だった場合は「FALSEフォールス」を返します。その戻り値を利用して端末の分岐処理を行います。
　しかし、「wp_is_mobile()」で分岐できるモバイル端末には「スマートフォン」の他に「タブレット」も含まれており、「パソコン」と「タブレット＆スマートフォン」の二種類の分岐しかできません。
　そこで、「パソコン」「タブレット」「スマートフォン」の三種類の分岐を行うため、スマートフォン判別用の関数を作ります。

スポンサーリンク

端末条件分岐用コード作成

　スマートフォン判別関数とそれを利用した、パソコン・スマートフォン・タブレットを分岐するための端末分岐用コードをご紹介します。

スマートフォン判別関数コード

　WordPressで使用しているテーマの「functionsファンクションズ.php」を直接開くか、テーマファイルエディタを使用して下記のコードを追加してください。コードを追加するとスマートフォンだけを検知してくれる関数「is_mobile()」が使用できるようになります。

function is_mobile() {
    $user_agent = array(
        'iPhone',
        'Android.*Mobile',
        'Windows.*Phone',
        'Mobile.*Firefox',
        'BlackBerry',
        'webOS',
        'Symbian'
    );
    $pattern = '/'.implode('|', $user_agent).'/i';
    return preg_match($pattern, getenv('HTTP_USER_AGENT'));
}

端末分岐コード

　実際に分岐したい位置に張り付けるコードは下記のPHPコードとなります。パソコン・タブレット・スマートフォンで分岐処理を実行したい位置に下記のコードを追加してください。
(エディタに直接コードを記述することはできません。エディタでPHPを使いたい場合はコチラを参考にしてください)

<?php
if (is_mobile()) {
    // この位置にスマートフォンの処理を書き込んでください。
} elseif (wp_is_mobile()) {
    // この位置にタブレットの処理を書き込んでください。
} else {
    // この位置にパソコンの処理を書き込んでください。
}
?>

WordPressのエディタでPHPとJSコードを扱えるようにする方法

WordPress管理ページの「記事投稿ページ」や「固定ページ」「ウィジェットページ」などの「エディタ」内で「PHP」や「JS」を使用できるようにする方法をご紹介します。

wm-oboegaki.com

端末条件分岐用コード解説

　スマートフォン判別関数コードと端末分岐コードの解説、使用したPHP関数や正規表現の説明をします。

スマートフォン判別関数コード解説

端末分岐コード解説

PHP関数解説

　スマートフォン判別関数と端末分岐のコードで使用したPHPの関数を簡単に解説します。

正規表現解説

　スマートフォン判別関数と端末分岐のコードで使用した正規表現と修飾子を解説します。

正規表現

修飾子

まとめ

　今回説明したコードを利用すると「パソコン」と「タブレット＆スマートフォン」にしか分岐できなかった処理が、組み合わせかたによって「パソコン＆タブレット」と「スマートフォン」など様々な分岐方法が実行できるようになります。
　管理人は、端末によってサムネイルのサイズや文字数を変更しています。他にも、主にデザインを変更するために利用しています。