トップページの表示を、パソコンでは固定ページ、モバイルでは投稿一覧にする方法(メモ)

トップページの表示を、パソコンでは固定ページ、モバイルでは投稿一覧にする方法(メモ)
このページについて
WordPressテーマのfunctions.phpへ簡単なコードを追加するだけで、トップページを固定ページにした際のモバイルページを通常の投稿ページにできる方法のメモ記事です。

この記事にたどり着いた方は、WordPressでは設定によってトップページ(ホームページ)の表示方法を以下のようにできるのはご存じかと思います。

  1. 最新の投稿一覧を表示する(表示する件数も設定により変更可)
  2. 特定の固定ページを指定する(投稿一覧ページは空の固定ページを作成して割り当て、メニューなどでアクセスできるようにする)

WordPressのインストール直後は1の投稿一覧になっていて、トップページ用の固定ページを作って表示設定で変更することで、2のようにできる仕組みになっています。

トップページを固定ページ化する機会があるのはいろいろなブロックを使って「ブログじゃないよ」というサイトにしたいときなのですが、ちょっと困るのが、そうした時のモバイルでの表示。ただでさえ構造が複雑になっているのに、モバイルできれいに表示されるようにするのは結構骨が折れますし、すごい量のデザインコードを追記しないといけない状態になることもあります。

そこで考えるのが、モバイル用に別の固定ページを作って読み込ませたり、モバイル用のテンプレートを別に作成して読み込ませる方法。これは実際に検索すると結構コードコピー?と思われる情報がたくさんあります。

が、そんなに複雑な処理ではなくて、単純に以下のようにしたい場合があります。

  • パソコンでアクセスされた時にはトップページに設定した固定ページを表示する
  • モバイルでアクセスされた時にはデフォルトの投稿一覧(home.php)を表示する

なかなか情報がありませんでしたが、簡単なコードで実現可能ということが分かりましたので、メモを兼ねて紹介しておきます。

モバイル表示時のトップページを投稿一覧にする方法

以下のコードをテーマのfunctions.phpへ追加するだけで実現できます。

function habone_mobile_only_post_list(){
	if (is_mobile()) {
        return 'posts';
    }
    return false;
}
add_filter('pre_option_show_on_front', 'habone_mobile_only_post_list');

タブレット端末をパソコンとして認識させるため、モバイル判定に「is_mobile」を使っていますので、モバイルを判定するための関数についてを参考に「is_mobile」関数を追加してください(WordPress標準のモバイル判定にする場合は「wp_is_mobile」へコードを変更してください)

フィルタフックの「pre_option_show_on_front」を使って、モバイルアクセス時のトップページは「posts(投稿一覧)」にしなさいというコードだそう(参考記事の聞きかじりですので..)ですが、「pre_option_show_on_front」という関数はほとんど使われないのか?検索してもなかなか出てきませんでしたので、ひょっとすると隠し技なのかも知れません。

実はこの処理をしたくて検索検索でほぼ1日使ってしまいましたが、「え?こんな簡単なコードで?」と青天の霹靂でした。


本ページで紹介しているコードについては、以下のページを参考にユーザー定義関数化とモバイル判定の調整をしています。

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

いつも思うことですが、「これがやりたい!」って時にいろいろ調べると、大抵寝ログさんのページにたどり着きます。Simplicity2テーマを利用させていただいている時から私にとって、まさに「神」的存在です。

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球