WordPressには、記事を分割して表示する機能があります。1つのページで表示させるには長過ぎるといった場合に、2ページ目、3ページ目といった感じでページャーを設置することでページを分割します。
ページを分割させる方法
記事を分割して表示させるには、「wp_link_pages」というテンプレートタグを利用します。
<?php wp_link_pages(); ?>このような形式で、single.php内にタグを設置することでページを分割して表示させることができます。
ページャーのデザインを変更したい場合
上記のような記述をした場合は、単純にテキストリンクが表示されるだけのページャーになります。デフォルトのままでよければ問題ないのですが、サイトに合わせてデザインを変えたい場合もあります。そのようなときは、オプションを使うことで、自由にデザインを変更することができます。
オプションの使い方
引数に文字列か配列を指定することで、オプションを使うことができます。
文字列を使用する場合
文字列を指定してオプションを使う場合は、引数に「オプション名=値」の形式で記述します。
<?php wp_link_pages( 'before=<div class="pagenation-link">&after=</div>' ); ?>配列を使用する場合
配列を指定してオプションを使う場合は、引数に配列名を指定します。
<?php
$args = array(
  'before' => '<div class="pagenation-link">',
  'after' => '</div>',
);
wp_link_pages($args); ?>wp_link_pagesに関するオプションは、以下のようなものがあります。
| オプション | 意味 | 
|---|---|
| before | ページネーションの前に表示する文字。デフォルトは<p>Pages:が挿入される | 
| after | ページネーションの後に表示する文字。デフォルトは </p>が挿入される | 
| link_before | 各リンクの前のテキスト。デフォルトは空文字 | 
| link_after | 各リンクの後のテキスト。デフォルトは空文字 | 
| next_or_number | ページ番号を使用するかどうか。デフォルトは「number」 | 
| nextpagelink | 次ページへのテキストリンク。デフォルトは「次ページ」 | 
| previouspagelink | 前ページへのテキストリンク。デフォルトは「前ページ」 | 
| separator | ページ番号の間にテキストを挿入。デフォルトは1文字分のスペース | 
あとは、スタイルシートで装飾してあげれば、好きなようにデザインを変更することができます。
実際にページャーを使う場合は、投稿画面で分割したい箇所に「next」というタグを挿入することで、ページを分割して表示することができます。

 背景画像をレスポンシブWebデザインに対応させる
背景画像をレスポンシブWebデザインに対応させる 【CSS】calc()を使った可変レイアウト
【CSS】calc()を使った可変レイアウト CSSで横スクロールナビゲーションを実装する方法
CSSで横スクロールナビゲーションを実装する方法 レスポンシブデザインで中央揃えに表示する方法
レスポンシブデザインで中央揃えに表示する方法 【画像なし】CSSだけでテキストを加工する方法
【画像なし】CSSだけでテキストを加工する方法 画像の高さを固定して横幅だけ伸縮させる方法
画像の高さを固定して横幅だけ伸縮させる方法