WordPressで1つの記事を複数のページで表示するには<!–nextpage–>を埋め込み、wp_link_pages を使って改ページ遷移のリンクを作成します。
コマンドの詳細はCodexでも見てもらうとして、各リンクテキストの前後に設定する文字列(link_beforeとlink_after)が<a>タグの内側に入る仕様になっています。これだと<ul><li>で積めませんのよ(´・ω・`)
ということで自分なりに改変してみました。
表題にある通りBootstrapで使う前提で作っています。
Usage
<?php tkb_wp_link_pages( $args ); ?>
Parameters
wp_link_pagesと異なる部分を記載します。
パラメータは配列として渡す必要があります。
- before / after (string)
- リンクの前後のテキスト。デフォルトは<ul>と</ul>
- link_before / link_after (string)
- リンクテキストの前後のテキスト。※<a>タグの外に書きます!デフォルトは<li>と</li>
- next_or_number (number / next / both as string)
- ページ番号を使用するかどうかを指定する。
bothを指定すると、numberとnextの両方を表示します。デフォルト値はbothに設定してあります。 - nextpagelink / previouspagelink (string)
- 次ページ/前ページへのリンクのテキスト。デフォルトはNextとPrev
Examples
パラメータ無しでも動くけど使い道ないかと。
Bootstrap用に記述をするには下記のように書きます。
<?php tkb_wp_link_pages( array(
'before' => '<div class="pagination"><ul>',
'after' => '</ul></div>',
'nextpagelink' => '»',
'previouspagelink' => '«'
) ); ?>
<div class="pagination"><ul> <li class="disabled"><span>«</span></li> <li class="active"><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">»</a></li> </ul></div>
Description
ソースをfunctions.phpに貼り付けてご利用ください。
いちおう本家の wp_link_pages の機能は網羅しているハズなので同じように使えると思います。
link_before / link_afterの位置を<a>タグの外にしている部分がメインの変更点。
link_beforeが<li>の場合のみ、.activeと.disabledにも対応させました。
現在のページは<a>タグではなく<span>で囲んでいます。
Source
function tkb_wp_link_pages($args = '') {
$defaults = array(
'before' => '<ul>', 'after' => '</ul>',
'link_before' => '<li>', 'link_after' => '</li>',
'next_or_number' => 'both', 'nextpagelink' => 'Next',
'previouspagelink' => 'Prev', 'pagelink' => '%',
'echo' => 1
);
$r = wp_parse_args( $args, $defaults );
$r = apply_filters( 'wp_link_pages_args', $r );
extract( $r, EXTR_SKIP );
global $page, $numpages, $multipage, $more, $pagenow;
$output = '';
if ( $multipage ) {
if ( 'number' == $next_or_number ) {
$output .= $before;
for ( $i = 1; $i < ($numpages+1); $i = $i + 1 ) {
$j = str_replace('%',$i,$pagelink);
if ( ($i != $page) || ((!$more) && ($page==1)) ) {
$output .= $link_before;
$output .= _wp_link_page($i);
$output .= $j . '</a>';
} else {
if ( $link_before =='<li>' ) {
$output .= '<li class="active">';
} else { $output .= $link_before; }
$output .= '<span>' . $j . '</span>';
}
$output .= $link_after;
}
$output .= $after;
} elseif ( 'next' == $next_or_number ) {
if ( $more ) {
$output .= $before;
$i = $page - 1;
if ( $i && $more ) {
$output .= $link_before;
$output .= _wp_link_page($i);
$output .= $previouspagelink . '</a>' . $link_after;
}
$i = $page + 1;
if ( $i <= $numpages && $more ) {
$output .= $link_before;
$output .= _wp_link_page($i);
$output .= $nextpagelink . '</a>' . $link_after;
}
$output .= $after;
}
} else {
if ( $more ) {
$output .= $before;
$i = $page - 1;
if ( $i && $more ) {
$output .= $link_before;
$output .= _wp_link_page($i);
$output .= $previouspagelink . '</a>';
} else {
if ( $link_before =='<li>' ) {
$output .= '<li class="disabled">';
} else { $output .= $link_before; }
$output .= '<span>' . $previouspagelink . '</span>';
}
$output .= $link_after;
for ( $i = 1; $i < ($numpages+1); $i = $i + 1 ) {
$j = str_replace('%',$i,$pagelink);
if ( ($i != $page) || ((!$more) && ($page==1)) ) {
$output .= $link_before;
$output .= _wp_link_page($i);
$output .= $j . '</a>';
} else {
if ( $link_before =='<li>' ) {
$output .= '<li class="active">';
} else { $output .= $link_before; }
$output .= '<span>' . $j . '</span>';
}
$output .= $link_after;
}
$i = $page + 1;
if ( $i <= $numpages && $more ) {
$output .= $link_before;
$output .= _wp_link_page($i);
$output .= $nextpagelink . '</a>';
} else {
if ( $link_before =='<li>' ) {
$output .= '<li class="disabled">';
} else { $output .= $link_before; }
$output .= '<span>' . $nextpagelink . '</span>';
}
$output .= $link_after;
$output .= $after;
}
}
}
if ( $echo ) echo $output;
return $output;
}
Notes
ソースを貼り付けた後でコメント行をいっさい書いていないことに気づく。。。
まぁそんな難しいコードではないので大丈夫かな(笑
Bootstrapでサクっと表示させちまおうと思ったら余計に時間がかかりましたとさ。
Related Links – I’m really grateful for everything.
- Bootstrap | Twitter
- Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- Function Reference / wp link pages | WordPress Codex
- Displays page-links for paginated posts.
- テンプレートタグ / wp link pages | WordPress Codex 日本語版
- <!–nextpage–>クイックタグを1つ以上含む分割された投稿でページリンクを表示します。