tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【wordpress】ページ分割のリンクに「数字」と「次ページ・前ページ」の両方を表示する

https://okinawanpizza.hatenablog.com/entry/2020/09/04/085447

next_link_pagesのパラメータには、リンクの表示方法を
「前のページ」「次のページ」と表示するかページ番号で表示するかを選択する 'next_or_number'というパラメーターが存在します。

'next' か 'number' を設定することができ

例えば'next'なら

前のページ・次のページ

'number'なら

1・2・3・4

と表示されるようなイメージです。

今回は

前のページ・1・2・3・4・次のページ

のように両方表示することができる方法を紹介していきます。

wp_link_pages()に 'next_and_number'というオプションを追加する。

1 functions.phpファイルに以下のフィルターを追加します。

add_filter('wp_link_pages_args','wp_link_pages_args_prevnext_add');

add_filter()は関数をフックさせることができます。 wp_link_pages_argsが実行されるとwp_link_pages_args_prevnext_addも発火するようにします。

2 続けて、以下の文章を追加します。

ここでnext_and_numberという値を追加できるようにしています。
この関数をwp_page_linksにフックさせています。

/**
 * Add prev and next links to a numbered page link list
 */
function wp_link_pages_args_prevnext_add($args)
{
    global $page, $numpages, $more, $pagenow;

    if (!$args['next_or_number'] == 'next_and_number') 
        return $args; # exit early

    $args['next_or_number'] = 'number'; # keep numbering for the main part
    if (!$more)
        return $args; # exit early

    if($page-1) # there is a previous page
        $args['before'] .= _wp_link_page($page-1)
            . $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>'
        ;

    if ($page<$numpages) # there is a next page
        $args['after'] = _wp_link_page($page+1)
            . $args['link_before'] . ' ' . $args['nextpagelink'] . $args['link_after'] . '</a>'
            . $args['after']
        ;

    return $args;
}

3 配列に'next_or_number' => 'next_and_number',こちらを追加します。

wp_link_pages(array(
    'before' => '<p>' . __('Pages:'),
    'after' => '</p>',
    'next_or_number' => 'next_and_number', # activate parameter overloading
    'nextpagelink' => __('Next'),
    'previouspagelink' => __('Previous'),
    'pagelink' => '%',
    'echo' => 1 )
);

全部で3ステップなので思ったより簡単に追加できると思います。

参考:
https://wordpress.stackexchange.com/questions/37256/paged-posts-how-to-use-numbers-and-next-previous-links

http://www.velvetblues.com/web-development-blog/wordpress-number-next-previous-links-wp_link_pages/