レスポンシブでページを作成すると、PCの場合は問題ないのですが、モバイルの場合どうしてもページが長くなってしまい途中でページ分割をしたくなります。
そこで、PCではページ分割せず、モバイルではページ分割を指定できるショートコードを作ってみました。 （このショートコードを投稿ページから外せば通常通りモバイルでもPCでもページ分割できます。）
WordPressで、ページ分割する方法（通常の場合）
ビジュアルエディタでは、ページ分割したい所で、ページ区切りボタン
を押せば --PAGE BREAK--- が現れ、簡単にページ分割できます。 このボタンアイコンが見つからない時は、「Advance Editor Tools」の設定でツールバーにボタンアイコンを登録できます。
テキストエディタの場合は、ページ分割したい所で<!--nextpage-->タグを記述すればその箇所でページ分割できます。
PCでもモバイルでも、ブラウザでページを見ると下の様にページが分割されます。
Affinger5テーマで、モバイルの場合の条件表示するショートコード【nopc】---PAGE BREAK---【/nopc】で囲んでも、自己完結型のショートコードでないのでページ分割は上手く出来ません。
モバイルの時にページ分割し 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' ); } |
対策・ポイント
そこで、この問題を解決するために、上のPHPコードをちょっとモディファイさせて頂きました。 14行〜16行のコード（if文コード部分）をカットし、下のPost Snippetsプラグイン② の箇所にペーストし自己完結型のショートコードを作成します。 詳しくは、以下のショートコード作成方法を参照してください。
ページ区切りボタンを押して --PAGE BREAK--- （テキストモードでは<!--nextpage-->）の直前に作成したショートコードを配置すれば、モバイルではページ分割し、PCでは ページ分割しません。 このショートコードを配置しなければ、通常通りのPC、モバイル両方でページ分割が行われます。
Post Snippetsプラグインを使ったモバイルの時に「ページ分割を指定する」ショートコードの作成方法
Post Snippets Pluginの基本的使い方は、以下の記事を参照してください。
ここに、今回作成した【スマホでページ分割】ショートコードを配置しています。 PC上で確認したいときは、お使いのプラウザで「レスポンシブ・デザイン」モード等にしてスマホ画面にて、ページの再読み込み（リロード）すればページ分割を確認できます。
Post Snippetsの設定画面
①にショートコードの名前を記入：ここでは、スマホでページ分割 としました。
② 前記のfunction.phpに記述したコードのif文（14行〜16行のコード）部分をカットして②のエリアにペーストします。 ただし、今回は、else 以降に次ページのコメントを付記できる様にしています。
|
1 2 3 4 5 6 |
if ( !wp_is_mobile() ) {// PCページを判別 add_action( 'the_post', 'remove_nextpage_tag' ); //PCの時、function.phpに設置した remove_nextpage_tag 関数を呼び出してページ分割タブを削除する。 } else { echo "<h5>{comment}</h5>"; //mobileの時は、ページ分割タブがそのままでコメントを付加 } |
③ Variablesは comment=〜に続きます と記入。 ④ のShortcodeと ⑤ のPHPは夫々レ点を入れます。
⑥ Descriptionは、適当にわかり易いショートコードの説明文を記入します。 （例：ページ分割より上にこのショートコードを置きます。 ページ分割<!–nextpage–> ）
以上の設定が終わったらSave ボタンを押して保存すれば、モバイルの時に「ページ分割を指定する」ショートコードが完成します。
完成したshortcode
[スマホでページ分割 comment="〜に続きます"]
（備考）「スマホでページ分割」ショートコードは、投稿ページに対して適用されるので、複数のページ分割を指定したい場合、投稿ページの１箇所に配置すればOKです。
使用上の注意
ページキャッシュプラグインの「WP Fastest Cache 」などを使っている場合、ページキャッシュにより、モバイルの「ページ分割」が正常に機能しない場合があります。 この場合は、当該ページのキャッシュを除外する必要があります。（2021/10/1追記）
モバイルの時にページ分割を指定するショートコードの作成方法でした。
-
-
WordPressの旧エディタで「ページ区切り」に付加されてしまう Pタグの構文エラーを対策する方法
Affinger6の旧エディタで編集中の頁に「ページ区切り」 <!--nextpage-->を挿入して、確認のためプレビューするとChrome拡張機能の「HTM ...
