いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【WordPress】「PAGE BREAK」で1ページを複数ページのように表示するメモ(´・ω・`)

こんばんわ!あけましておめでとうございます(遅ェ・・!)
ゆでです(*´ω`*)<妖怪ウォッチみましたー!フユニャン!ジバニャン!ニャーン!
面白かったですww

さってさて、ものすごくどうでもいいメモをメモします(`・ω・´)ゞ

1記事(投稿・ページ)を複数のページにしているサイトみかけたりしますよね。
WordPressにはデフォルトでその機能が備わっています。

テーマによっては入っていない場合がありますので、その場合はエイヤ!といれれば使用できます(*´∀`*)

ただ、入っていなかったことがあったためのメモです(笑)

記事(投稿・ページ)を複数のページにするための「改ページ(PAGE BREAK)」を使用できるようにする

phpに「wp_link_pages」を追加

投稿ならsingle.php、固定ページならpage.phpなど本文(the_content)があるphpに下記追加します。

<?php wp_link_pages(); ?> 
  • wp_link_pagesはループ内にいれる(´・ω・`)
  • 引数に色々指定ができます
  • 本文the_content)の上下に入れてはさむこともOK

サンプル↓)

<?php wp_link_pages('before=<div class="pagelink">ページ:&after=</div>&next_or_number=number&pagelink=<span>%</span>'); ?>

記事詳細で「改ページ(PAGE BREAK)」を入れて複数にする

pagebreak_img01 のボタン(WP Ver.4.1、TinyMCE Advanced Ver.4.1.7)でサクッと改ページ入れると

pagebreak_img02

↑が入る(ソースだと<!–nextpage–>っていうのが入る)

つまり、 

1ページ目の内容<!–nextpage–>2ページ目の内容<!–nextpage–>3ページ目の・・

って感じでいれていく(`・ω・´)ゞ<以上!カンタンw

ついでにスタイルも入れる

ソースは自由にタグやらクラスやらを入れられるので、カスタムができます!

さっきの「サンプル」にCSSを追加したとして、こんな感じになる↓

pagebreak_img03

上記ソースはこんなかんじです

<div class="pagelink">
ページ:<span>1</span>
<a href="URL"><span>2</span></a>
<a href="URL"><span>3</span></a>
</div>
  • 参考までにCSS(雑なので万が一使用する場合は変更してください(*´∀`*))
.pagelink > span {
 display: inline-block;
 padding: 5px 10px;
 margin: 0 2px 0 0;
 border:1px solid #ddd;
 text-align: center;
}
.pagelink > a {
 display: inline-block;
 padding: 5px 10px;
 margin: 0 2px 0 0;
 border:1px solid #41a69c;
 text-align: center;
 background-color: #41a69c;
 color: white;
}
.pagelink > a:hover {
 border-color: #33827A;
 background-color: #33827A;
}