WordPressのデフォルトでは、トップページ（ホームページ）の表示は新着投稿の一覧になっていますが、設定メニューの「表示」項目から変更することで、任意の固定ページを指定することができます。
しかしながら、ブロックエディタ（Gutenberg）の便利さからいろいろな表示・表現を使って作成したページをモバイルで確認すると、特にカバーブロックを使ったり、カラムブロックを使ったりする場合には大きく表示が崩れたりすることもあり、結構調整が大変だったりすることがあります。
そこで今回は、単純に、WordPressサイトのトップページを固定ページに指定した際に、パソコンからのアクセス時とモバイルからのアクセス時で内容を変える方法をいくつか紹介します。
本ページの大きな流れ（内容）は以下の通りです。
- モバイル判定関数を作る（タブレットはパソコンと認識されるようにする）
- パソコンとモバイルで別の固定ページが表示されるようにする
- 同じ固定ページを使いつつ、部分的にパソコン用とモバイル用で分ける
- モバイルの場合だけ、通常の新着投稿一覧にする
今回のカスタマイズでは、テーマのfunctions.phpへコードを追記することが必要です。慣れていない方、トラブル発生時の対応が難しい方はご遠慮ください。
テーマ、併用されるプラグイン等によっては正常に動作しない場合がありますので、参考記事として閲覧ください
モバイル判定関数を作る
WordPressには、パソコンとモバイルを区別する組み込み関数として、「wp_is_mobile」というのが用意されています。if構文で「wp_is_mobile」を指定すればモバイルの時に．．、「!wp_is_mobile」とすればモバイルでないときに．．という形や、どちらかの判定に「else」を使って「そうでなかったら．．」を使うことで、切り分けを行うことができます。
今回のカスタマイズ用コードにも、この切り分け（条件分岐）が多数出てきます
ただ、「wp_is_mobile」は、タブレット端末についてもモバイルと判定されてしまうため、不都合が生じることがあります。
そこで、タブレット端末もパソコンとして判定されるよう、「is_mobile」という独自の関数（ユーザー定義関数）であるを用意します。
以下のコードをテーマのfunctions.phpへ挿入します。
/***** モバイル判定をスマホだけに限定 *****/
if ( !function_exists( 'is_mobile' ) ){
//スマホ表示分岐
function is_mobile(){
if (!isset($_SERVER['HTTP_USER_AGENT'])) {
return false;
}
$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
'Mobile.*Firefox', // Firefox OS
'Opera Mini', // Opera Mini Browser
'BB10', // BlackBerry 10
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
}テーマによっては既に「is_mobile」関数が用意されているものがあり、既に用意されている場合に重複トラブルとならないようにしてありますが、その場合にはテーマ側の「is_mobile」の条件内容が反映されます。
これから紹介するコードはすべて上記の「is_mobile」関数の条件指定を使ってパソコンとモバイルの判定をしていますので、まずはこの関数を追加してください。また、これから紹介するコードは必ず「is_mobile」関数の記述よりも下へ追加してください。
上記コードは「Cocoon」テーマ内で実装されているソースを紹介させていただいております。
パソコンとモバイルで全く別の固定ページが表示されるようにする
パソコン表示時のトップページは「表示」設定で指定した固定ページを、モバイル表示時のトップページは任意の固定ページを表示させるという方法です。
以下のようにして実現させます。
- パソコン用のトップページ用固定ページを作って公開する
- モバイル用のトップページ用固定ページを作って公開する
- パソコン用のトップページを「設定」→「表示」で指定する
- モバイルトップページ用固定ページのURLをコピーしておく
- テーマのfunctions.phpへコードを追加する
1～4については問題なくできると思いますので、5で追加するコードと編集内容のみ紹介します。
以下のコードをテーマのfunctions.phpへ追記します。
/***** モバイルのトップページを任意の固定ページにする *****/
function hab_redirect_mobile() {
if ( is_mobile() && is_front_page() ) {
wp_redirect( 'モバイル固定ページのURL', 301 );
exit;
}
}
add_action( 'wp', 'hab_redirect_mobile' );上記コードの「モバイル固定ページのURL」の部分を実際の固定ページURLへ変更して保存します。
固定ページURLは絶対URL(例：https://hogehoge.com/mobile-home/)で指定します
functions.phpを保存したら、デベロッパーツールや、実際にスマートフォンからアクセスして、切り替わっているかを確認してください。
参考：Different homepage for mobile
この方法の問題点・留意点
このコードでは、トップページへモバイルでアクセスされたら、〇〇ページへリダイレクトするという動作をしますので、これが検索エンジン等からどう評価されるのかは不明です。
特に何等かの方法でcanonicalタグをヘッダー内に出力している場合、リダイレクト先のページURLがcanonicalタグのURLとして出力されるため、正確にはトップページではないと判断されるかも知れません。
出力されるcanonicalタグをトップページのURL（ドメイン）へ変更するには、テーマで出力しているのか、出力プラグイン等で出力しているのかによっても対処が違うので、ご自身の環境に合わせて調べて調整いただく必要があります。
モバイルアクセス時に別の固定ページ本文を表示させる
/* モバイルのトップページを任意のページにする */
function habone_mobile_static_selective_page($o){
if ( is_mobile() ) {
return 固定ページのIDをここに記述;
} else {
return $o;
}
}
function habone_mobile_static_selective_page_content($o){
if ( is_mobile() ) {
return 'page';
} else {
return $o;
}
}
add_filter( 'pre_option_page_on_front', 'habone_mobile_static_selective_page');
add_filter( 'pre_option_show_on_front', 'habone_mobile_static_selective_page_content');挿入後、「固定ページのIDをここに記述」の部分をモバイルの時に表示する固定ページのIDにします。
固定ページのIDは、固定ページ一覧で目的のページのタイトル部分をマウスオーバーして出てくるリンクURLから見つけるか、「ShowID for Post/Page/Category/Tag/Comment」というプラグインを一旦有効にすれば固定ページ一覧上で確認できます。
この方法は、Change home page for logged in usersを参考にコードの変更をしました。
この方法では、トップページの内容のみを入れ替えるため、前項の方法での「モバイルページがトップページとソース上認識されない」問題を解消することができます。
使用しているテーマやプラグインなどによっては、以下のような事柄に対する調整が必要な場合がありますのでご自身で対処してください。
- HTML上のタイトルタグが指定した固定ページのタイトルになる
- タイトルタグの内容がブラウザのタブに出力されてしまう（サイトタイトルにならない）
- モバイル時のトップページに固定ページタイトルが表示されてしまう
- descriptionタグが正常に機能せず、意図しない文章が出力されてしまう
- OGPタグの出力やSchema.orgタグの出力が意図しないものになってしまう
2021年10月25日現在、Ordinary Lifeという私が管理するサイトでは、この方法を使って、パソコンでは固定ページ、モバイルでは新着投稿の一覧を表示するようにさせています。実装の参考になれば幸いです。
トップページにする固定ページ内で部分的に「パソコン用」「モバイル用」コンテンツを作る
この方法が管理する上でも、他のページで利用する上でも一番現実的かも知れません。
やり方としては、「パソコン用」「モバイル用」それぞれでのみ出力されるようにするショートコードを作り、いずれかで表示させたい部分をショートコードで囲むというものになります。
共通のものは共通として、分けたいものは分けることができるので便利だとは思いますが、エディタ内が煩雑になるので、特に編集時には確認が必要です。
表示をパソコンアクセス時に限定するショートコード
以下のコードをテーマのfunctions.phpへ追加します
/***** hab-pcショートコードでパソコン表示時のみコンテンツを表示 *****/
if ( !function_exists( 'habone_onlypc_show' ) ){
function habone_onlypc_show( $atts, $content = null ) {
if(!is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
}
add_shortcode('hab-pc', 'habone_onlypc_show');パソコンアクセス時のみ表示させたいブロックの手前に、ショートコードブロックを挿入し、以下のショートコードを入力します。
[hab-pc]パソコンアクセス時のみ表示させたいブロックの最後に、ショートコードブロックを挿入し、以下のショートコードを入力します。
[/hab-pc]表示をモバイルアクセス時に限定するショートコード
以下のコードをテーマのfunctions.phpへ追加します
/***** hab-mobileショートコードでモバイル表示時のみにコンテンツを表示 *****/
if ( !function_exists( 'habone_onlymobile_show' ) ){
function habone_onlymobile_show( $atts, $content = null ) {
if(is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
}
add_shortcode('hab-mobile', 'habone_onlymobile_show');モバイルアクセス時のみ表示させたいブロックの手前に、ショートコードブロックを挿入し、以下のショートコードを入力します。
[hab-mobile]モバイルアクセス時のみ表示させたいブロックの最後に、ショートコードブロックを挿入し、以下のショートコードを入力します。
[/hab-mobile]どちらのショートコードも、ページ内で何回でも使用できますし、トップページ以外の投稿や固定ページでも使えます。
モバイルのトップページを通常の新着投稿一覧にする
他にページを用意するのではなく、単純に標準である「新着投稿一覧」をモバイルアクセス時のトップページでは表示する方法です。
テーマの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');参考：WordPressの表示設定でフロントページを「固定ページ」に設定しているとき、モバイルのみは「最新の投稿」を表示させたいときのカスタマイズ方法
