wordpressの記事を複数ページに分割する方法

いまさら感ありすぎですけど、長い記事とかを複数ページに分ける方法をご紹介したいと思います。とは言うものの、いろんなブログで紹介されているので、自分はデザインの変更方法とかにスポットを当てようと思います。

ページの分け方

やり方はとっても簡単。ページを分けたいところで以下のタグを追加すればOK。

<!--nextpage-->

1	<!--nextpage-->

※HTML(Text)モードで記載してください。

使用するテンプレート(single.php)とかの「<!–?php the_content(); ?–>」の中に以下のタグを記載しておく必要がある。

<!--?php wp_link_pages(); ?-->

1	<!--?php wp_link_pages(); ?-->

こんな感じで表示されました↓↓

簡単すぎて何も言えませんね。Wordpress便利過ぎます。ただ、デザインが殺風景なので、このデザインを変更してもうちょっとお洒落な感じにしたいと思います。

※Wordpress Codexにも詳細が書かれていました。チェックしてみてください。 http://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

※Wordpressのサポートページにもありました↓↓
https://en.support.wordpress.com/splitting-content/nextpage/

ページャーのデザインを変える方法

ページャーのレイアウトを変えていこうと思います。以下のソースはページャーのソース↓↓

<div class="page-links">
<span class="page-links-title">Pages:</span>
<span>1</span>
<a href="http://grooving-earth.com/famous-shopping-website-in-australia/2/?preview=true&amp;preview_id=4792&amp;preview_nonce=7d77a1f8b1">
<span>2</span>
</a>
</div>

<span class="page-links-title">Pages:</span>

</a>

</div>

※上記は「wp-includes/post-template.php」にある関数を読み込んでいる。

上記のソースを変えたいので、「functions.php」ファイルに以下を追加↓↓

function custom_wp_link_pages() {
 
$defaults = array(
 'before' => '<div class="pagesprit"><div class="page-numbers">',
 'after' => '</div>',
 'link_before' => '',
 'link_after' => '',
 'next_or_number' => 'number',
 'separator' => ' ',
 'nextpagelink' => __( 'Next page' ),
 'previouspagelink' => __( 'Previous page' ),
 'pagelink' => '<span class="numbers">%</span>',
 'echo' => 1
 );
 return $defaults;
}
add_filter( 'wp_link_pages_args', 'custom_wp_link_pages');

function custom_wp_link_pages() {

$defaults = array(

'before' => '<div class="pagesprit"><div class="page-numbers">',

'after' => '</div>',

'link_before' => '',

'link_after' => '',

'next_or_number' => 'number',

'separator' => ' ',

'nextpagelink' => __( 'Next page' ),

'previouspagelink' => __( 'Previous page' ),

'pagelink' => '<span class="numbers">%</span>',

'echo' => 1

);

return $defaults;

}

add_filter( 'wp_link_pages_args', 'custom_wp_link_pages');

すると、ページャーのソースは以下のように変更される↓↓

<div class="pagesprit">
<div class="page-numbers">
<span class="numbers">1</span>
<a href="http://grooving-earth.com/famous-shopping-website-in-australia/2/?preview=true&amp;preview_id=4792&amp;preview_nonce=3596324300">
<span class="numbers">2</span>
</a>
</div>
</div>

</a>

</div>

これにスタイルを当てていけばOK。cssは以下のように設定した↓↓

.pagesprit {
clear: both;
}
.page-numbers a {
display:inline-block;
text-decoration:none;
background-color: #ebebeb;
color: #979797;
}
.page-numbers a:hover {
color:#fff;
background-color: #e74c3c !important;
}
.numbers {
display: inline-block;
padding: 7px 14px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}