特定のページだけモバイルとPCで別々のURLに振り分けたいことがあります。この記事では、WordPress標準のwp_is_mobile() を使ってサーバー側で即座にリダイレクトする方法を解説します。ただし、まず前提として知っておきたい注意点があります。
Googleはレスポンシブデザイン(同一URL)を推奨
PC・モバイルで別URLにすると、canonical・alternateタグの管理や2つのページの保守が必要になり、SEO・運用コストの両面で不利です。可能なら同一URLでCSS・表示を出し分けるレスポンシブ対応を優先してください(wp_is_mobileで簡単にPCとスマホの表示を切り替える方法)。ランディングページなど本当に別ページが必要な場合だけ、この記事のリダイレクトを使います。
PC・モバイルで別URLにすると、canonical・alternateタグの管理や2つのページの保守が必要になり、SEO・運用コストの両面で不利です。可能なら同一URLでCSS・表示を出し分けるレスポンシブ対応を優先してください(wp_is_mobileで簡単にPCとスマホの表示を切り替える方法)。ランディングページなど本当に別ページが必要な場合だけ、この記事のリダイレクトを使います。
この記事でわかること
wp_is_mobile()+template_redirectでのサーバーサイド判定- クライアント側JSでの判定より優れている理由
- 無限リダイレクトを起こさないための注意
wp_is_mobile() でサーバーサイド判定してリダイレクトする
子テーマの functions.php に、次のコードを追加します。template_redirect フックの中で判定し、ページが描画される前にリダイレクトします。
functions.php:モバイルとPCで別ページへリダイレクト
add_action('template_redirect', function () {
if (!is_page('top')) { // 対象ページを限定(無限ループ防止にもなる)
return;
}
if (wp_is_mobile()) {
wp_safe_redirect(home_url('/mobile-top/'));
exit;
}
});
クライアント側JS判定より優れている理由
navigator.userAgent をJavaScriptで判定して window.location.href で飛ばす方法は、一度PCページを丸ごと読み込んでから転送するため、表示のちらつき・帯域の無駄が生じます。サーバーサイドの wp_is_mobile() ならページを描画する前に判定・転送でき、WordPress標準関数のため新しい端末が出ても保守が要りません(正規表現でUser-Agentを自前判定するより確実です)。無限リダイレクトを起こさないための注意
リダイレクト先を条件から除外する
対象ページを
対象ページを
is_page('top') のように限定してください。すべてのページに条件なくこの処理を書くと、転送先の /mobile-top/ にモバイルでアクセスした際に再び自分自身へリダイレクトしようとして無限ループになりかねません。「元のページ」だけを対象にし、転送先ページには処理を書かないのが安全です。逆にPC向けページへ誘導する場合
「モバイル用ページに来たPCユーザーを、PC用ページへ戻す」場合は条件を反転します。
functions.php:PCユーザーをPC用ページへ
add_action('template_redirect', function () {
if (!is_page('mobile-top')) {
return;
}
if (!wp_is_mobile()) {
wp_safe_redirect(home_url('/top/'));
exit;
}
});
特定のURLパラメータの有無で表示・遷移先を変える一般的な方法はURLパラメータを取得して表示を切り替える方法、ページ単体のリダイレクトは特定のページをリダイレクトする方法も参考になります。
よくある質問(FAQ)
Qwp_is_mobile() はタブレットも「モバイル」判定されますか?
Aはい、
wp_is_mobile() はタブレットも含めて true を返すことがあります。タブレットを除外して判定したい場合は、Jetpackプラグインの jetpack_is_mobile()(タブレット除外オプションあり)などを検討してください。Q別URLにする場合、SEO的に何を設定すればよいですか?
Acanonicalタグで正規URLを指定し、PC版・モバイル版それぞれに
<link rel="alternate" media="only screen and (max-width: ...)" href="..."> を設定します。ただし、これらの管理が不要なレスポンシブデザインの方がGoogleの推奨であり、運用も楽です。Q特定のページだけでなく全ページで振り分けたいのですが?
A
is_page() の条件を外せば全ページが対象になりますが、転送先ページにも同じ処理があると無限ループになります。モバイル用サイトとPC用サイトでテーマやテンプレートを分けている場合は、転送先ではこの判定を行わないよう設計してください。まとめ
- まず検討:Googleが推奨するレスポンシブ(同一URL)で足りないか
- 判定:
wp_is_mobile()+template_redirect(サーバーサイド・即時) - NG:クライアント側JSでの判定・転送(ちらつき・帯域の無駄)
- 注意:対象ページを限定し、転送先での無限ループを避ける
別URLへのリダイレクトは最終手段と考え、可能な限りレスポンシブ対応とサーバーサイド判定を優先しましょう。
