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-->を残すので、モバイルのみページ分割ができる様になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//ページ分割タグを取り除く function remove_nextpage_tag( $post ) { global $pages, $multipage, $numpages; $multipage = 0; //<!--nextpage-->を置換して取り除く $content = str_replace("\n<!--nextpage-->\n", '<!--nextpage-->', $post->post_content); $content = str_replace("\n<!--nextpage-->", '<!--nextpage-->', $content); $content = str_replace("<!--nextpage-->\n", '<!--nextpage-->', $content); $pages = array( str_replace('<!--nextpage-->', '', $content) ); $numpages = 1; } if ( !wp_is_mobile() ) {//!マークで非モバイルを判定 add_action( 'the_post', 'remove_nextpage_tag' ); } |
今回の方法で対策した「ページ分割タグ」を配置してみました。
ここの下に、今回の方法で対策した「ページ分割タグ」<!--nextpage-->を配置しています。 PC上で確認したいときは、お使いのプラウザで「レスポンシブ・デザイン」モード等にしてモバイル画面にて、ページの再読み込み（リロード）すればページ分割され、「次のページ」ボタンが表示されていることが確認できると思います。
特定ページを指定してモバイルの時だけ「ページ分割」する方法
先程のPHPコードを下の様に少々モディファイさせて頂きました。
背景色が黄色でハイライトされている部分が手を加えた箇所（行）です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//指定されたページに対して、モバイルのみページ分割させる処理 function remove_nextpage_tag( $post ) { global $pages, $multipage, $numpages; $post_id =get_the_ID(); // 現在のページIDを取得 $input_id=[21020,10309,369]; // 【重要】モバイルのみページ分割したいページIDをカンマ区切りで指定 if (in_array($post_id ,$input_id)){ // ページidが致したら、ページ分割タグを除去する処理へ $multipage = 0; //<!--nextpage--> ページ分割タグを除去 $content = str_replace("\n<!--nextpage-->\n", '<!--nextpage-->', $post->post_content); $content = str_replace("\n<!--nextpage-->", '<!--nextpage-->', $content); $content = str_replace("<!--nextpage-->\n", '<!--nextpage-->', $content); $pages = array( str_replace('<!--nextpage-->', '', $content) ); $numpages = 1; } } if ( !wp_is_mobile() ) {//!マークで非モバイル(=PC)を判定 add_action( 'the_post', 'remove_nextpage_tag' ); } |
ハイライト行の簡単な説明
- 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=☓☓☓ の✗部 数値です。
ページ分割を指定した事例
下のリンクボタンをクリックすると当該ページへジャンプします。
このページをPCで確認すると「ページ分割」が無く、モバイルでは分割されている。
「ワーグナー「ニーベルングの指環」を題材にMicrosoftのBing AIチャットで粗筋とイメージ画像を生成、その実力は？」
以上、特定ページでモバイルの時にページ分割を指定する方法でした。
-
-
WordPressの旧エディタで「ページ区切り」に付加されてしまう Pタグの構文エラーを対策する方法
Affinger6の旧エディタで編集中の頁に「ページ区切り」 <!--nextpage-->を挿入して、確認のためプレビューするとChrome拡張機能の「HTM ...