2012年春にリリースされたWordPressのバージョン3.4には、テーマカスタマイザーやツイートの自動埋め込み機能の導入に加えて、サイト訪問者がスマホやタブレットなどのモバイル端末からアクセスしているかどうかを確認できる開発者向け関数が実装されました。

この関数（wp_is_mobile()）は、AppleがiPhone 4向けに発表した「Retinaディスプレイ」がわずか640×960ピクセルだった時代に登場。WordPress 3.4リリースの数ヵ月後に登場したiPhone 5のディスプレイは640×1,136ピクセルで、モバイルとPCの画面の境界を曖昧にするほどの進化を遂げた現在のスマホやタブレットの画面に比べると、程遠いものでした。

今回は、現在でもwp_is_mobile()を使用する価値があるのかどうかを掘り下げていきます。

wp_is_mobile関数の目的

2012年には、レスポンシブデザインを可能にするCSSメディアクエリのブラウザサポートは、まだ比較的新しいものでした（MicrosoftのInternet Explorerユーザーにとっては特に）。とはいえ、様々なビューポートの寸法に適応するページレイアウトを可能にすることが、wp_is_mobile()の目的というわけではありませんでした。

wp_is_mobile()は、デバイスがスマホかタブレットであるかを区別したり、ブラウザに表示できるピクセル数（解像度）を考慮したりするわけではなく、主にモバイル端末の帯域幅を最適化するための機能として考案されています。これは当時のモバイル端末は性能が低い傾向にあり、利用者が通信会社にデータ転送量を支払っている可能性があったためです。

今日のスマートフォンやタブレットは一般に2012年のPCよりも強力であり、帯域幅を制限することも重要性は低くなっているかもしれませんが、それでも「モバイル端末」と「それ以外」に分けることができる関数には現在でも利用価値があります。

wp_is_mobile関数の仕組み

WordPressのwp_is_mobile()は、ほとんどのスマホやタブレット（Kindleを含む）のブラウザからのリクエストが実行された場合に、trueを返します。以下は、wp_is_mobile()を使用してPHPで異なるコンテンツストリームを生成する一般的な例です。

<?php if( wp_is_mobile()){ ?>

    <p>モバイル端末用のコンテンツ</p>

<?php } else { ?>

    <p>PC（ノートパソコン含む）用のコンテンツ</p>

<?php } ?>

ウェブサイトの出力をモバイル端末向けに最適化する必要がある場合（帯域幅の要件を最小化するためなど）、上記のテクニックをテーマファイルで使用して、モバイル用ページとPC用ページで全く異なる構造を出力することができます。

デバイス検出によるきめ細かなコンテンツ調整

CSSメディアクエリやレスポンシブデザインをサポートするその他のテクニックは、ページレイアウトをさまざまな画面サイズや向きに適応させるのに有用です。しかし、「モバイルユーザー」と「PCユーザー」それぞれに特化した操作には対応できません。

例えば、PCユーザーはマウスを使ってサイトの要素を「クリック」するのに対し、モバイルユーザーは「タップ」します。また、リンクを右クリックして新規ウィンドウでリンクを開くPCユーザーに対し、モバイルユーザーは、画面を長押しすることになるかもしれません。ヘルプドキュメントなどでウェブサイトのナビゲート方法を説明する場合も、モバイル端末とPC向けにそれぞれ異なる用語を使用しなければなりません。

以下、wp_is_mobile()とWordPressのショートコードを組み合わせて、モバイルおよびPC向けにそれぞれコンテンツをきめ細かく調整する方法をご紹介します。

WordPressのadd_shortcode()とdo_shortcode()を使ってデバイスがモバイルまたはPCであるかを検出し、投稿に適用できるショートコードツールを作成します。

まずは、以下のコードをテーマのfunctions.phpファイルに追加します（子テーマを作成してから）。

/**
 * ショートコードを追加
 */

// [desktop]ショートコードを作成
add_shortcode('desktop', 'show_desktop_content');
function show_desktop_content($atts, $content = null){
    if( !wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

// [mobile]ショートコードを作成
add_shortcode('mobile', 'show_mobile_content');
function show_mobile_content($atts, $content = null){
    if( wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

これで[desktop]と[mobile]のショートコード（とその閉じタグ）が作成され、投稿や固定ページのコンテンツで以下のように使用することができます。

<h2>パスワードの変更</h2>

パスワードを変更するには、歯車のアイコンを[desktop]クリック[/desktop][mobile]タップ[/mobile]してください。

モバイル端末では、以下のように表示されます。

モバイル端末では操作方法が「タップ」に
モバイル端末では操作方法が「タップ」に

その他のデバイスでは、以下のように表示されます。

PCでは操作方法が「クリック」に
PCでは操作方法が「クリック」に

このテクニックを使用すれば、訪問者の体験を考慮したコンテンツは配信を実現することができます。

wp_is_mobile関数とWordPressキャッシュ

ページキャッシュがパフォーマンスを向上する効果的な手段であることは、2012年からWordPressを使用していなくてもご存知でしょう。しかし、WordPressの基本的なキャッシュは、同じページへのリクエストで異なるコンテンツを配信しようとする試みに大きな影響を与える可能性があります。

WordPressによる個別ページのキャッシュは、クライアントからのリクエストによって開始されます。最初のリクエストがモバイル端末からきた場合は、wp_is_mobile()により、キャッシュされたコンテンツがモバイル端末向けに調整されます。その後、キャッシュをクリアしない限り、そのページに対するリクエストはPCユーザーにもモバイル端末向けのコンテンツが配信されることになります。

このため、KinstaのWordPress専用マネージドクラウドサーバーでは、モバイルコンテンツとPCコンテンツそれぞれに異なるキャッシュを提供しています。キャッシュはNginxのローカルキャッシュから始まり、世界260+のCloudflare PoPにあるエッジキャッシュまで拡張されます。

モバイル端末用のページキャッシュは、MyKinstaから数回のクリック（またはタップ）で有効化できます。

MyKinstaの「キャッシュ」画面
MyKinstaの「キャッシュ」画面

まとめ

WordPressのwp_is_mobile()は、過去のもののように思えますが、「モバイルかPCか」を検出する機能は現在でも、すべてのサイト訪問者にとってより良い体験を提供するのに役立つ可能性があります。

そして、モバイルとPCの両方でパフォーマンスを最大化するには、コンテンツごとに別々のキャッシュが必要になることをお忘れなく。

Steve Bonisteel Kinsta

Kinstaのテクニカルエディター。救急車や消防車を追いかける記者としてキャリアをスタート。1990年代後半からインターネット関連の技術情報を担当している。