これは知らなかった!WordPressで1つの投稿内でページングが表示できるQuicktagのnextpageとwp_link_pagesの組み合わせがとても便利だった

wp-link-pages

WordCamp Kobe 2013でGOUTENさんがお話された内容のブログ記事を読んでwp_link_pagesというテンプレートタグを初めて知りました。
WordPressのQuicktag<!–nextpage–>と組み合わせると一つの投稿内でページ分割が可能になります。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

固定ページテンプレート「page.php」にテンプレートタグ「wp_link_pages」を追加

今回は固定ページでページング出来るように実装したいので、固定ページのテンプレート page.php にテンプレートタグ wp_link_pages を追加します。

page.php

<?php /** header.phpを読み込みます */ ?>
<?php get_header(); ?>

<!-- #main -->
<div id="main" role="main">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<!-- .post -->
			<article class="post">
				<header class="post-title">
					<h1><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
				</header>
				
				<!-- .post-content -->
				<div class="post-content">
					<?php the_content(); ?>
				</div>
				<!-- /.post-content -->
			</article>
			<!-- /.post -->
						
			<?php
			// ページングの表示
			$args = array(
				'before' => '<ul class="link_page_navi">', 
				'after' => '</ul>', 
				'link_before' => '<li>', 
				'link_after' => '</li>'
			);
			wp_link_pages( $args );
			?>

			<?php endwhile; ?>
	<?php endif; ?>
</div>
<!-- /#main -->

<?php /** sidebar.phpを読み込みます */ ?>
<?php get_sidebar(); ?>

<?php /** footer.phpを読み込みます */ ?>
<?php get_footer(); ?>

挿入部分を抜粋してみます。

<?php
// ページングの表示
$args = array(
	'before' => '<ul class="link_page_navi">', 
	'after' => '</ul>', 
	'link_before' => '<li>', 
	'link_after' => '</li>'
);
wp_link_pages( $args );
?>

オプションなどは以下のリンクをご覧ください。

ギャラリーページのカスタマイズ

ギャラリーページの作成

ギャラリーページの作成
WordPressのギャラリー機能を使用してギャラリーページを固定ページで作成してみました。
ギャラリー機能に関しては以下のリンクも参考にしてみてください。

ギャラリーページ
表示結果はこんな感じ。

固定ページの本文にQuicktag <!--nextpage--> を挿入

<!--&nextpage--&>とギャラリーを追加
固定ページの本文にQuicktag <!--nextpage--> とその後にもう一つギャラリーを挿入してみます。

ページング表示
ページングが表示されましたね:)

2ページ目を選択すると、<!--nextpage--> の後に挿入したギャラリーが表示されます。

出力されたHTML

<ul class="link_page_navi">
	<li>1</li>
	<a href="http://webcake.no003.info/photo/2/"><li>2</li></a>
</ul>

固定ページだけではなく通常の投稿のページでも使えるので是非試してみてください。

参考記事

  

共有やブックマークなど