WordPress 記事のページを分割する方法
こんにちは、koheiです。
WordPressで記事を書いてる時、記事が長くなると、ページを分割したくなりますよね。
ということで、今日はWordPressでページを分割して投稿する方法を紹介します。
1.記事にnextpageタグを入れる
まず、ページを分割するには、記事中の分割したい箇所に
nextpageタグを記載します。
WordPress記事投稿ページ画面
|
1 |
<!--nextpage--> |
2.ページリンクを表示させる
つづいて、ページリンクを表示させるために、コンテンツを表示しているphpファイルに以下(3行目〜12行目）を記載します。
コンテンツ表示関数のthe_content()の後に記載するとよいでしょう。
※以下は、index.phpのthe_content()の後に記載した例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if (is_single() ): ?> <?php the_content(); ?> <?php // ページングの表示 $args = array( 'before' => '<ul class="link_page_navi">', 'after' => '</ul>', 'link_before' => '<li>', 'link_after' => '</li>' ); wp_link_pages( $args ); ?> <?php else: ?> |
ul要素のクラス名は、link_page_naveにしています。
これは、この後説明するCSSで使用します。
3.CSSで装飾する
ページリンクをCSSで装飾しましょう。
以下にサンプルのCSSコードを記載しています。
色やサイズなどはお好みでカスタマイズしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* 投稿複数ページボタン */ .link_page_navi { padding: 0; max-width: 300px; width: 100%; list-style: none; margin: 0 auto; } .link_page_navi::after { content: ""; display: block; clear: both; } .link_page_navi li:first-child { margin-left: 5px; } .link_page_navi li { float: left; width: 64px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; border: 1px solid #161514; text-align: center; padding: 8px 12px; color: #fff; background-color: #161514; } .link_page_navi a li { border: 1px solid #555; color: #555; background-color: #fff; } .link_page_navi a li:hover { background-color: #161514; color: #fff; opacity: 0.7; } |
4.rel=”next” rel=”prev”タグで重複記事を防ぐ
さて、先ほどまでの手順でページ分割はできますが、ここで一つ問題があります。
複数ページにすると、検索エンジン的には重複ページとみなされ、SEO的に不利になるようです。
重複問題を防ぐには、headタグ内にrel=”next” rel=”prev”タグを記載します。
headタグ内に以下のコードを記載しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $pages = count( explode('<!--nextpage-->', $post->post_content) ) ; ?> <?php if ( $pages > 1 ) { ?> <?php if ( $page == $pages ) { ?> <?php if ( $page == 2 ) { ?> <link rel="prev" href="<?php the_permalink(); ?>"> <?php } else { ?> <link rel="prev" href="<?php the_permalink(); ?><?php echo $page - 1; ?>/"> <?php } ?> <?php } else { ?> <?php if ( $page == 0 ) { ?> <link rel="next" href="<?php the_permalink(); ?><?php echo $page + 2; ?>/"> <?php } else { ?> <?php if ( $page == 2 ) { ?> <link rel="prev" href="<?php the_permalink(); ?>"> <?php } else { ?> <link rel="prev" href="<?php the_permalink(); ?><?php echo $page - 1; ?>/"> <?php } ?> <link rel="next" href="<?php the_permalink(); ?><?php echo $page + 1; ?>/"> <?php } ?> <?php } ?> <?php } ?> |
※5、7、11、14、16、18行目のlinkタグは、WordPressのパーマリンク設定によって、記載方法が若干変わりますので、ご自分の設定に合わせてください。
実装後は、ページのソースを表示して、意図通りのlinkタグが出力されているか確認しておきましょう。
最後に
以上、WordPressの記事ページ分割の方法を紹介しました。
記事が長くなると、ページの読み込み時間も長くなり、可読性も悪いので、
是非ページ分割を活用しましょう！
それでは！
スポンサーリンク
