【wordpress】wp_link_pages() — 長い投稿記事を記事をページ分割しよう！

2020.9.62020.9.22Writer: tamakiComment: 0

開発ブログ

今回はwordpressに関する情報です。

投稿する記事を何ページにわたって表示するかを
決めることがでるのでその方法を紹介します。

投稿された記事にと入力すると記事が分割されます。
そして分割されたページのリンクを出力するためには、
テンプレートタグwp_link_pages()を使います。

今回はその方法についてご紹介していきます。

1.投稿を任意のタイミングで分割する

記事のテキストエディタを開きます。

そしてタグを分割したいところに挿入します。

すると、ビジュアルエディタではこのように----PAGE BREAK----と表示されます。

2.分割したページへのリンクを作る

記事内にあるwordpressループの中で<?php wp_link_pages(); ?>を入力します。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_link_pages

すると自動的に次のページに遷移するためのページ番号が出力されます。
クリックすると分割した次のページに飛ぶことができ
分割した数だけ自動的に数字が出ます。

2.5 ページネーションはカスタマイズも可能

このwp_link_pagesはカスタマイズも可能です。

wp_link_pages($args) → $argsに配列形式でパラメータを設定することができます。

1	wp_link_pages($args) → $argsに配列形式でパラメータを設定することができます。

キー	値
'before'	リンクの前に表示する文字列。
'after'	リンクの後に表示する文字列。
'link_before'	beforeより前に出力する文字列。デフォルトは空文字列
'link_after'	afterより後に出力する文字列。デフォルトは空文字列
'next_or_number'	「前のページ」「次のページ」と表示するかページ番号で表示するかを選択する
'separator'	ページ番号を何で区切るか。
'nextpagelink'	「次のページ」のリンクに使用する文字列。next_or_numberで'next'を設定している場合に有効
'previouspagelink'	「前のページ」のリンクに使用する文字列。next_or_numberで'next'を設定している場合に有効
'pagelink'	ページ番号に使用するフォーマット

ページ分割のリンクに「数字」と「次ページ・前ページ」の両方を追加する

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

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

例えば'next'なら

前のページ・次のページ

1	前のページ・次のページ

'number'なら

１・２・３・４

１・２・３・４

と表示されるようなイメージです。
ですが、少し手を加えるtp

前のページ・１・２・３・４・次のページ

1	前のページ・１・２・３・４・次のページ

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

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

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

add_filter('wp_link_pages_args','wp_link_pages_args_prevnext_add');

1	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;
}

/**

* 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 )
);

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/

ワタシブログカイテルネ
https://okinawanpizza.hatenablog.com/