【Simplicity2】nextpageで記事を分割したときのページ送りに「次のページを読む」ボタンを追加する方法!

この記事をシェアする

2016-08-20 11.27.51 2

WordPressで投稿記事が長文になった場合、「nextpage」タグを入れると記事を簡単に分割することができます。今回はその分割した際に表示される、ページ送りボタンをカスタマイズしました。

スポンサーリンク
Google AdSense 336×280

nextpageで投稿記事を分割する

まずはじめに、ブログ投稿記事を複数のページへ分割する方法です。WordPressでは、テキスト入力モードで以下のタグを挿入すると記事を分割することができます。

nextpageを挿入したところで改ページされ、記事にはページ送りボタンが表示されます。僕と同じ「Simplicity2」のバージョン2.2.0gを利用していれば、以下のような表示になります。

2016-08-20 11.31.44 2

Simplicityらしくシンプルな表示で、余計な装飾もありません。

このデザインに特に不満はありませんが、記事内でもう少し目立たせたかったので、今回はその上段に「次のページを読む」というボタンを追加しました。

PHPとCSSをカスタマイズしてボタンを追加!

nextpageを使った際に表示されるページ送りボタンは、Simplicity2の場合「pager-page-links.php」と「style.css」で構成されています。

色や大きさだけの変更であればCSSをカスタマイズすれば事足りますが、今回のようにボタンを追加したりなどのデザイン変更はphpファイルをカスタマイズする必要があります。

「pager-page-links.php」と「style.css」を子テーマに用意

実際にカスタマイズする前に、まずは必要なファイルを子テーマに用意します。「pager-page-links.php」と「style.css」をそれぞれ子テーマに用意しましょう。pager-page-links.phpは親テーマ内のものをそのままコピペすればokです。

利用しているSimplicity2のpager-page-links.php内には、デフォルトでは以下のコードが入力されています。

これはwp_link_pagesというWordPressのテンプレートタグです。詳しい説明は省きますが、このコードがnextpageでページを分割した際の表示を構成しています。詳しくはコチラを参考にしてください。

今回はこのコードを以下のように変更しました。

カスタマイズ後の「pager-page-links.php」内

wp_link_pagesというWordPressのテンプレートタグを上段にもう一つ追加し、内容も少し変更しました。下段の内容ははじめから入っていたコードのままです。

コード構成としては、上段が「次のページを読む」ボタン、下段がSimplicity2標準の「ページ送り」ボタンになります。利用する際は、上記コードを子テーマ内の「pager-page-links.php」へそのままコピペしてもらえればokです。

続いてCSSでデザインをカスタマイズします。

style.cssをカスタマイズ

カスタマイズしたpager-page-links.phpで出力されるページ送りボタンは、新たに追加した上段部分は「next-page-link」クラスのdivタグ、下段の部分は「page-link」クラスのdivタグで構成されています。

Simplicity2標準のページ送りボタン(下段部分)はあまり変更せず、上段に追加した「次のページを読む」ボタンのカスタマイズを主に行いました。

カスタマイズ後の「style.css」内

こちらも利用する際はそのままコピペしてもらえればokです。上段部分中心にカスタマイズしました。下段部分はpaddingなどを若干修正しましたが、デフォルトから大きな変更はありません。

以上でカスタマイズ終了です!

「次のページを読む」ボタン完成!

完成した「次のページを読む」ボタンがこちら。

2016-08-20 11.27.51 3

Simplicity2標準のページ送りボタンのすぐ上に、「次のページを読む」というボタン追加しました。横幅いっぱいに表示させており、スマホでも同様に表示されます。記事内最終ページでは、このボタンは表示されません。

ボタンを2段構成にして、目的通りに記事内で少し目立つようになりました。

スポンサーリンク
Google AdSense 336×280