この記事にたどり着いた方は、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. 投稿一覧表示用に空の固定ページを用意する
  2. 表示設定で、トップページ用の固定ページを「ホームページ」にする
  3. 表示設定で、「投稿ページ」を空の固定ページにする
  4. 投稿ページへのリンクメニュー（仮に「新着一覧」とします）を設定する

つまり、全ページに表示されるグローバルメニューにある「新着一覧」をクリックすれば、投稿一覧（固定ページ化していないトップページ）が表示されるようにするという設定をしておくことで、新着記事の一覧を訪問者がいつでも見ることができるようになるのです。

しかし、上記コードを入れることで、モバイル時にはトップページを投稿一覧（WordPressの表示設定でいう「最新の投稿」）に置き換えてしまっているため、モバイル表示時にメニュー内の「新着一覧」をクリックした場合には、空の固定ページが表示されてしまう不具合（不都合）が発生します。

これを解消するためには、モバイル時のみ「新着一覧」を非表示にする必要があります。

対応としては、WordPressのグローバルメニューで、「新着一覧」メニューへカスタムCSSクラスを設定し、CSSで非表示にするとよいでしょう。

グローバルメニューへカスタムCSSクラスを付与するには、メニュー設定から画面右上の「表示オプション」をクリックすると出てくる「CSSクラス」にチェックを入れ、目的のメニュー項目を開いてカスタムクラスを入力します。

ここでは仮に「mob-list-menu」と設定したものとします。

カスタムCSSクラスを追加したら、以下のコードをテーマのfunctions.phpへ追加します。

/* モバイルで「mob-list-menu」クラスのメニューを非表示にする */
function ha_mobile_list_menu_hidden(){
	if(is_wp_mobile()){
		echo '<style>
		.mob-list-menu{display:none;}
		</style>';
	}
}
add_action('wp_footer','ha_mobile_list_menu_hidden');

これでモバイルの時だけ、新着一覧（mob-list-menu）を非表示（display:none）にすることができます。

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

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

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

本記事の更新（変更）履歴

更新日更新内容
2021年10月22日記事を公開しました
2022年 5月 8日モバイル表示時に一覧へのメニューを非表示にする工夫を追加しました