wordPressの記事分割について

エンジニアM168

wordPressで長い記事を分割して表示する方法、ページャー、ページネーションと呼ばれる機能があります。
一般的には、自分で任意の文章やコンテンツが分かりやすいところに、wordPressやテーマのページ区切りのブロックを挿入します。
もしくは、古い情報ですがプラグインを使って自動で行う方法があります。
ただwordPressの記事作成画面で使えるエディタがブロックエディタに変わっているため、古い時代の情報を基にページ分割のプログラムを作るとハマってしまう可能性があります。

こちらの情報が、役立ちます。

WP REST APIでの投稿本文でGutenbergのブロック要素を挿入する際、またブロックの処理をする際にブロックの構成を知ることで、ページ分割の処理を行うことができます。
古い情報、ブロックエディタ、Gutenbergが導入される前でしたら、単純にPタグなどHTMLのタグの処理だけで記事の分割もできたと思います。
ですが今の時代は、普通にページ区切りのコードを挿入すると、Pタグの入れ子のような形、ネストの状態になるため、ブロックエディタで、ページ区切りのコードを認識されず、編集画面に自動で挿入したページ区切の表示がでなというトラブルに見舞われてしまいます。

このようなネストの形は、修正が必要です。

<p><p>●●●</p><p><!--nextpage--></p></p>

それからページネーション、記事の分割の表示を無効にしたい場合は、<!--nextpage-->だけを記事から削除するのではなく、下記の３つのタグが必要です。

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

ページ分割するときは、pタグで判断するのではなく、下記の段落を表すコードを使いましょう。

<!-- wp:paragraph -->
<p>段落ブロック</p>
<!-- /wp:paragraph -->

私としては、先に紹介した記事の中から見出しなどのブロックも確認して、対応できる様にすれば、汎用的な記事を分割して表示することも、HTMLのタグを考慮して実現できると思います。
文字数だけを見て機械的に文章を分割すると、タグの途中で分割されてしまい、見出しなどの効果が無くなってしまい文書のレイアウトが崩れる恐れもあります。

ページ分割のコアの部分のコードを、公開します。
これだけでは不完全なので、各自制作する内容に応じて、カスタマイズして頂けますと幸いです。

function no_pageing_hook() {
    global $post, $pages, $multipage, $numpages;

    // このフックはアーカイブページや検索結果ページなどでも動作するため、シングルページでのみ動作するようにチェックを追加
    if ( ! is_single() ) {
        return;
    }

    // モバイルデバイスの場合は何もしない
    if ( wp_is_mobile() ) {
        return;
    }

    // PCの場合、ページ分割を無効にする
    $multipage = 0;

    // ページ区切りのブロックコードを個別に削除
    $content = $post->post_content;
    $content = str_replace('<!-- wp:nextpage -->', '', $content);
    $content = str_replace('<!--nextpage-->', '', $content);
    $content = str_replace('<!-- /wp:nextpage -->', '', $content);
    $post->post_content = $content;

    $pages = array( $content );
    $numpages = 1;
}
add_action( 'template_redirect', 'no_pageing_hook' );

ご自身で実装が難しい方、wordPressのカスタマイズ、wordPressを使ったウェブサイトの制作も、お気軽にご相談いただけましたら幸いです。

ページ分割した記事の表示についても、色々とノウハウがあります。
こちらのページで書いている記事も、内容は不完全です。
こうした内容が必要な場合も、ぜひ、お気軽にご相談いただけましたら幸いです。


この記事が気に入ったらサポートをしてみませんか？