WordPressの表示設定でフロントページを「固定ページ」に設定しているとき、モバイルのみは「最新の投稿」を表示させたいときのカスタマイズ方法

WordPressで、フロントページ表示前にフックして、表示ページを切り替えることができる方法を知ったので、メモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

今回のカスタマイズ

今回は、Wordpressで「フロントページを固定ページにしているとき」の、切り替えをカスタマイズの例としたいと思います。

WordPress管理画面の「設定 → 表示設定」にある

Wordpressの設定から表示設定を選択する

「フロントページの表示」設定項目を「固定ページにしてフロントページを指定」にしているときに、ページ表示直前にフックして、表示を切り替えるカスタマイズです。

フロントページの表示設定を固定ページに設定時

今回は、パソコンで閲覧したときは「フロントページ」に設定した固定ページを、モバイルで閲覧したときは、「最新の投稿(インデックス)」を表示する方法を紹介したいと思います。

カスタマイズの方法

カスタマイズをするのは簡単で、以下のコードをfunctions.phpに貼り付けるだけです。

add_filter('pre_option_show_on_front', function(){
    if (wp_is_mobile()) {
        return 'posts';
    }
    return false;
});
無名関数を利用しているので、PHPのバージョンは、5.4以上でないとエラーが出ると思います。5.4未満はPHPの推奨バージョンではないと思うので、バージョンアップしてください。
逆にパソコンのみで、「最新の投稿」を表示する場合は、「wp_is_mobile()」を「!wp_is_mobile()」に変更してください。

参考 TechNoteさんが、テーマフォーラムに書き込まれたコードを参考にしました

動作確認

functions.phpにコードを追加することで、パソコンで表示した場合は、「Wordpress管理画面の表示設定」で設定した固定ページがフロントページに表示されます。

パソコンではフロントページに固定ページが表示される

モバイルで表示させた場合は、「Wordpressデフォルト設定」の「最新の記事一覧」が表示されるようになります。

モバイルの場合は最新の投稿一覧が表示

まとめ

こんな感じで、フロントページ表示前に処理を追加して表示するページを切り分けることができます。

pre_option_show_on_frontフックを利用すれば、こんな簡単にできるとは知りませんでした。

というわけで「パソコンとモバイルでフロントページの表示を切り分けたい」なんて場合には、便利なフックだと思います。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク