広告 WordPress関連

特定ページを指定してモバイルの時だけ「ページ分割」する方法

スポンサーリンク

 

wordpressで作成した長文の投稿記事をブラウザで見た時、モバイル閲覧の場合はページが長くなるので途中でページ分割したくなる時があります。

ネット検索すると「モバイルの時にページ分割し PCはページ分割させない方法」(後述)が見つかりますが、この方法を採ると、全ての記事が対象になるので、PCではページ分割ができなくなるのが難点です。

そこで、特定記事のページidを指定できる機能を追加することで、モバイルではページ分割され、PCではページ分割されず、またページidの指定が無い記事は、通常通りPCでもページ分割される方法を考えてみました。

当記事は、下記の問題から改訂しました
以前の記事は、Post Snippets Pluginを使った『モバイルの時に「ページ分割を指定する」ショートコード作成方法』として紹介しましたが、ショートコードでは上手くページ分割が行えないことが分かり全面見直し改訂したものです。(2023/10/24)

 

WordPressで、ページ分割する方法(通常の場合)

ビジュアルエディタでは、ページ分割したい所で、ページ区切りボタンを押せば --PAGE BREAK--- が現れ、簡単にページ分割できます。 このボタンアイコンが見つからない時は、「Advance Editor Tools」の設定でツールバーにボタンアイコンを登録できます。

テキストエディタの場合は、ページ分割したい所で<!--nextpage-->タグを記述すればその箇所でページ分割できます。

PCでもモバイルでも、ブラウザでページを見ると下の様にページが分割されます。

 

モバイルの時にページ分割し PCはページ分割させない方法

参考にさせて頂いた記事:
「WordPressのマルチページで、PCの時は分割しない、モバイルの時は分割する方法」
URL:https://nelog.jp/remove-nextpage-tag

 

参考にさせて頂いたページ分割の方法は、function.phpに以下のコードを記述することで、PCでは <!--nextpage-->を削除し、モバイルの場合は <!--nextpage-->を残すので、モバイルのみページ分割ができる様になります。 

 

オペレータ
オペレータ
ただこの方法ですと、Wordpressサイト全体に適用されてモバイルでページ分割されますが、PCではページ分割ができなくなってしまうところが問題ですね。

 

今回の方法で対策した「ページ分割タグ」を配置してみました。

ここの下に、今回の方法で対策した「ページ分割タグ」<!--nextpage-->を配置しています。 
PC上で確認したいときは、お使いのプラウザで「レスポンシブ・デザイン」モード等にしてモバイル画面にて、ページの再読み込み(リロード)すればページ分割され、「次のページ」ボタンが表示されていることが確認できると思います。

 

 

特定ページを指定してモバイルの時だけ「ページ分割」する方法

先程のPHPコードを下の様に少々モディファイさせて頂きました。

背景色が黄色でハイライトされている部分が手を加えた箇所(行)です。

ハイライト行の簡単な説明

  • 6行目:get_the_ID() は現在ページIDを調べる関数です。
  • 7行目:$input_id に配列データを入力しています。 [ ]内にモバイルのみページ分割したいページIDをカンマ区切りで指定します。
  • 9行目:if文で、現在ページIDと$input_idの配列データと一致すれば、下の行を実行します。
  • 17行目:if文の終点です。

以上のコードをfunction.phpにコピペします。 
このfunction.phpが実行されると、20行目のif文で、モバイルでない(つまりPC)と判定されると、9行目の if文で、現在ページIDと指定IDが一致しているなら、「ページ分割タグ」を除去し、不一致なら何もしせず「ページ分割タグ」が残ります。 20行目のif文で、モバイルと判定されると、何もしないので「ページ分割タグ」が残りページ分割されます。 

つまり、ページIDで指定された特定ページに対して、モバイルではページ分割され、PCではページ分割されません。 また、ページidの指定が無い記事は、通常通りPCでもページ分割されます。 

備考:
ページIDを簡単に調べるには、投稿ページの編集画面で、ブラウザ上部のURLアドレス入力欄に表示されている post=☓☓☓ の✗部 数値です。

 

 

以上、特定ページでモバイルの時にページ分割を指定する方法でした。 

 

オススメ記事
WordPressの旧エディタで「ページ区切り」に付加されてしまう Pタグの構文エラーを対策する方法

    Affinger6の旧エディタで編集中の頁に「ページ区切り」 <!--nextpage-->を挿入して、確認のためプレビューするとChrome拡張機能の「HTM ...

 

スポンサーリンク

 

スポンサーリンク

 

t