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

wp-link-pages

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

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

固定ページテンプレート「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="https://webcake.stars.ne.jp/2/"><li>2</li></a>
</ul>

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

参考記事

  

共有やブックマークなど

コメントは受け付けていません。