現在開発中の WordPress テーマでは、マガジンサイトに特化したデザインや機能を想定しています。
マガジン系のサイトでは、1つの記事が複数ページに分かれている場合、分割される箇所で次ページへ誘導する文言をリンクにして区切られているスタイルをよく見かけることがあると思います。

WordPress では、本文の途中で <!--nextpage--> というタグまたは「ページ区切りブロック」を任意の箇所に追加すれば、1つの記事を複数ページにわたって分割できますが、通常は前後への分割ページへのテキストリンクか、連番ナビゲーションのリンクのみが表示されます。

これを、連番ナビゲーションと共に次ページへ誘導する任意のテキストリンクの両方を表示させる方法を考えてみます。

---

標準のページネーションに処理を追加する

<!-- nextpage --> タグで記事を複数ページに分割表示させるには、wp_link_pages() という関数を利用しますが、この関数の next_or_number パラメータの値には、“next” (分割前後ページへのテキストリンク) か “number” (連番ナビゲーションリンク) のいずれかを指定するのみなので、そのままでは次ページへのテキストリンクと連番ナビゲーションリンクを両方表示することができません。

そこで、wp_link_pages_args というフィルターを利用して wp_link_pages() 関数でページネーションのHTMLが生成される前に、next_or_numberパラメータからの新たな値(next_and_number)を判定させ、この値が指定されたときはテキストリンクと連番リンクの両方を表示するようにします。

フィルターを追加する

まずは function.php に以下のコードを追加し、wp_link_pages_args フィルター実行時に wp_link_pages_args_add_next_and_number() という自前の関数を実行させるようにします。

add_filter( 'wp_link_pages_args', 'wp_link_pages_args_add_next_and_number' );

テキストリンクと連番リンクを表示する関数を用意する

続けて、上記で追加したフィルターで実行させる wp_link_pages_args_add_next_and_number() 関数を用意します。

function wp_link_pages_args_add_next_and_number( $args ) {
　　　　global $page, $numpages, $more;

    // 値が next_and_number でなければスルー
    if ( $args['next_or_number'] !== 'next_and_number' ) {
        return $args;
    }

    // 連番ナビゲーションに変更
    $args['next_or_number'] = 'number';

    if ( !$more ) {
        return $args;
    }

    // 「次のページ」テキストリンクを連番リンク前に挿入
    if ( $page < $numpages ) {
        $args['before'] .= '<div class="next-page-link">' . _wp_link_page( $page + 1 ) . '<span class="page-text">';
        $args['before'] .= isset( $args['nextpagelink'] ) && !empty( $args['nextpagelink'] ) ? $args['nextpagelink'] : sprintf( __( 'Read page %s' ), $page + 1 );
        $args['before'] .= '</span></a></div>';
    }

    return $args;
 }

以上で、次ページへのテキストリンクと連番ナビゲーションを両方表示する準備が整いました。

wp_link_pages 関数で分割ページナビゲーションを表示

あとは以下のように wp_link_pages() 関数をsingle.php や page.php の the_content() 関数の直後に実行するようにしておきます。

// 分割ページナビゲーションを表示
wp_link_pages( array(
        'before' => '<div class="split-page-nav">',
        'after' => '</div>',
        'link_before' => '<span class="page-number">',
        'link_after' => '</span>',
        'next_or_number' => 'next_and_number',
        'nextpagelink'  => __( 'Next page' ),
        'previouspagelink'  => '',
        'echo' => 1
    )
);

次ページへのリンクに表示されるテキストは nextpagelink パラメータで指定しますが、このパラメータを空にした場合は、自動的に「○ページ目を読む」という表記になります。

最後の改ページには連番ナビゲーションのみが表示されます。

改ページリンクのテキストを任意の文言にする

ここまでのコードでは、改ページごとに表示されるリンクのテキストを個別に指定することができません。
次ページリンクのテキストは、記事ごとに、さらに改ページごとに指定したいので、カスタムフィールド(メタボックス)を利用して実現できないか試してみます。

カスタムフィールドの追加、保存についてはここでは割愛しますので、詳細は公式ドキュメントをご覧ください。

改ページごとのリンクテキストを指定するカスタムフィールドを追加し、テキストエリアにて1行ずつリンクテキストを入力・保存しておけるようにします。

このカスタムフィールドのデータを wp_link_pages() 関数の nextpagelink パラメータに渡します。

記事ごとのカスタムフィールドのデータは、 get_post_meta() 関数で対象のキー(以下の例では “_nextpage_text”)を指定することで取得できます。

wp_link_pages( array(
        'before' => '<div class="split-page-nav">',
        'after' => '</div>',
        'link_before' => '<span class="page-number">',
        'link_after' => '</span>',
        'next_or_number' => 'next_and_number',
        'nextpagelink'  => get_post_meta( $post->ID, '_nextpage_text', true ),    // カスタムフィールドのデータを渡す
        'previouspagelink'  => '',
        'echo' => 1
    )
);

続いて、先述の wp_link_pages_args_add_next_and_number() 関数を修正し、受け取ったカスタムフィールドのデータ(テキスト)を1行ずつ分割して配列化し、表示中のページ番号に対応する配列の値をリンクテキストとして割り当てます。

function wp_link_pages_args_add_next_and_number( $args ) {
　　　　global $page, $numpages, $more;

    // 値が next_and_number でなければスルー
    if ( $args['next_or_number'] !== 'next_and_number' ) {
        return $args;
    }

    // 連番ナビゲーションに変更
    $args['next_or_number'] = 'number';

    if ( !$more ) {
        return $args;
    }

    // 任意のテキストの次ページリンクを連番リンク前に挿入
    if ( $page < $numpages && !empty( $args['nextpagelink'] ) ) {
        // 改行コードで分割し配列化
        $nextpage_text = explode( "\n", $args['nextpagelink'] );
        // 配列からページ番号に対応するテキストを抽出
        $nextpage_text = is_array( $nextpage_text ) && isset( $nextpage_text[ $page - 1 ] ) ? $nextpage_text[ $page - 1 ] : sprintf( __( 'Read page %s' ), $page + 1 );

        $args['before'] .= '<div class="next-page-link">' . _wp_link_page( $page + 1 ) . '<span class="page-text">' . $nextpage_text . '</span></a></div>';
    }

    return $args;
 }

これでなんとか改ページごとに任意の文言で次ページに誘導するリンクを実装できました。

---