本記事では、パソコンとスマホでデザインが大きく変わり、レスポンシブデザインでは限界がある場合にパソコン用のトップページとスマホ用のトップページへそれぞれリダイレクトさせる方法について紹介していきます。
目次
PHPコードの紹介
以下のコードは、ユーザーのデバイス(PCまたはモバイル)に基づいて、特定のURLへのアクセスを別のURLにリダイレクトするためのものです。ユーザーが特定のURLにアクセスした際に、適切なデバイス用のページにリダイレクトさせるための処理を行います。
function custom_redirect_based_on_device() {
// 現在のURLを取得
$current_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
// PC時の遷移先URLを指定
$locationPC = 'パソコン時に表示させるリンク';
// モバイル時の遷移先URLを指定
$locationSP = 'モバイル時に表示させるリンク';
// リダイレクトを行うURLのリスト
$target_urls = array(
'パソコン時に表示させるリンク',
'モバイル時に表示させるリンク'
);
// 現在のURLがリダイレクト対象のURLであるかをチェック
if (in_array($current_url, $target_urls)) {
// ユーザーエージェントの判定
if (wp_is_mobile()) {
if ($current_url == 'パソコン時に表示させるリンク') {
// モバイルでPC用のURLにアクセスした場合、モバイル用にリダイレクト
wp_redirect($locationSP);
exit;
}
} else {
if ($current_url == 'モバイル時に表示させるリンク') {
// PCでモバイル用のURLにアクセスした場合、PC用にリダイレクト
wp_redirect($locationPC);
exit;
}
}
}
}
add_action('template_redirect', 'custom_redirect_based_on_device');
コード中にある
・パソコン時に表示させるリンク
・モバイル時に表示させるリンク
をそれぞれ3か所ずつ実際のURLへ変更すればOKです!
続いてそれぞれの部分の解説をしていきます。
1. 現在のURLの取得
$current_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$_SERVER['HTTPS']
を確認して、通信がHTTPSかHTTPかを判別しています。$_SERVER['HTTP_HOST']
で現在のホスト名(ドメイン)を取得。$_SERVER['REQUEST_URI']
でリクエストされたページのパスを取得。- これらを組み合わせて、現在のURLを生成しています。
2. PC用とモバイル用のURL設定
$locationPC = 'パソコン時に表示させるリンク';
$locationSP = 'モバイル時に表示させるリンク';
locationPC
とlocationSP
には、リダイレクト先のPC用とモバイル用のURLがそれぞれ指定されます。これらのリンクは、実際のリンクに置き換える必要があります。
3. リダイレクト対象URLのリスト作成
$target_urls = array(
'パソコン時に表示させるリンク',
'モバイル時に表示させるリンク'
);
- この配列
$target_urls
には、リダイレクトの対象となるURLがリストとして格納されています。現在のURLがこのリストのいずれかに一致する場合、リダイレクト処理が行われます。
4. 現在のURLがリダイレクト対象かをチェック
if (in_array($current_url, $target_urls)) {
in_array
関数を使用して、現在のURLが$target_urls
リストに含まれているかどうかをチェックします。
5. ユーザーエージェントの判定とリダイレクト
if (wp_is_mobile()) {
if ($current_url == 'パソコン時に表示させるリンク') {
// モバイルでPC用のURLにアクセスした場合、モバイル用にリダイレクト
wp_redirect($locationSP);
exit;
}
} else {
if ($current_url == 'モバイル時に表示させるリンク') {
// PCでモバイル用のURLにアクセスした場合、PC用にリダイレクト
wp_redirect($locationPC);
exit;
}
}
wp_is_mobile()
関数は、ユーザーがモバイルデバイスを使用しているかどうかを判断します。- モバイルデバイスの場合、もし現在のURLがPC用のものであれば、モバイル用URLにリダイレクトします。
- 逆に、PCを使用している場合で、現在のURLがモバイル用のものであれば、PC用URLにリダイレクトします。
wp_redirect()
関数は指定されたURLにリダイレクトし、exit;
でスクリプトの実行を停止します。
6. カスタム関数をアクションフックに追加
add_action('template_redirect', 'custom_redirect_based_on_device');
template_redirect
アクションフックを使用して、このカスタムリダイレクト機能を適用します。template_redirect
は、テンプレートが表示される前に実行されるため、この時点でリダイレクトを行うことができます。
まとめ
このコードは、訪問者が特定のデバイス(PCまたはモバイル)でアクセスする際に、適切なページにリダイレクトさせることを目的としています。これにより、ユーザーエクスペリエンスを向上させ、各デバイスに最適化されたコンテンツを表示できます。