【wordpress】PC画面とスマホ画面で全く別のTOPページにしたい

Question

前提・実現したいこと

wordpressで企業サイトを作成しています。
今はウィジェットを追加して写真を入れ替えたり、
投稿画面から記事を投稿したり、
テーマそのもののコード・プログラムを編集することなく
サイトを作成している段階です。

ただ、リクルーティング対策として、

スマホでアクセスするときだけ
トップページを全く違うものにしたいと考えています。

発生している問題・エラーメッセージ

そもそも、テーマを使用している状態でコードさえいじれば
全くテーマから逸れてしまう画面を作ることはできるのでしょうか？

試したこと

何から手をつければ良いのか分からない状態です。

Answer 1

全く別のテーマを表示させたい場合はプラグインを使用した方法があります。
Multi Device Switcher
Multi Device Switcherの使い方ーWordPressプラグイン【初心者向け】

テーマ（子テーマ）を編集して、wp_is_mobile()等で切り替える方法もあります。
ある程度コードを理解してないと難しいかもしれませんが。
WordPressでスマートフォン・タブレット・PCで表示を変更する条件分岐方法

Answer 2

スマホとPCで表示する内容を変える場合、以下の方法が簡単です。

①functions.phpに以下コードを記述

/* スマホとPCの切り替え */
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']);
}

function is_ipad() {
    $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
    if ($is_ipad) {
        return true;
    } else {
        return false;
    }
}

②TOPページのファイル（index.php　か　frontpage.php）に以下コードを記述して、スマホとPCで処理を分ける

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

スマホで表示したい内容をここに記載

<?php } else { ?>

PCで表示したい内容をここに記載

<?php } ?>

このように、デバイスの種類によってPHPの条件分岐処理をすることで、スマホ・PCそれぞれで表示する内容を変えることが出来ます。
コードをいじる必要があるので、慣れないうちはバックアップを取った上で試してみてくださいね。

Comments

[Ayapowhpb]

とても丁寧なご回答ありがとうございます。

すでにPC版は出来上がっていて、スマホ版だけを新しく作り変えたいと思っております。
その場合、else文の中身は書かず、if文だけでも大丈夫でしょうか？

[ikemon]

スマホ時の処理のみする場合は、下記のif文だけで可能です。

<?php if(is_mobile()) { ?>
スマホで表示したい内容をここに記載
<?php } ?>

ただ、ご質問内容の
「スマホでアクセスするときだけトップページを全く違うものにしたいと考えています。」
ですが、
PCで見たときはスマホのコンテンツは隠し、スマホで見たときはPCのコンテンツを隠す必要があるかと思いますので、
今出来上がっているPC版のコンテンツは

<?php if(is_mobile()) { ?>
スマホで表示したい内容をここに記載
<?php } else { ?>
PCで表示したい内容をここに記載
<?php } ?>

のように条件分岐でそれぞれ分ける必要があります。

[Ayapowhpb]

ありがとうございます！