公開日: 2020/01/24  最終更新日: 2021/02/13

「何千文字書きました!」と、
文字数の多さを競うように主張しているブロガーさんをよく見かけますが
逆にわたしは、どうしても記事が長くなりすぎてしまうのが悩みの種でした。

「次のページへ」ボタンでページを分割する

右のスクロールバーがものすごく小さくなってしまいがちで
長すぎて読みにくくないかなぁ…と思いながら記事をアップしていたのですが

そうか!

ニュースサイトやコラムサイトのように
「続きを読む」リンクを設けて記事を分割すれば良いのか!
と思いつき、導入してみることに。

実際の分割記事サンプル

実装方法をご紹介する前に、
実際に分割してみた記事はこちら↓
よかったらサンプルも兼ねて読んでみて下さいね。

医療職を辞めると出会う3つのタイプとその対策法を、経験者が語ります~価値観の違う人との接触にいかに折り合いをつけるか~

改ページ機能は標準搭載されている

WordPressのGutenbergエディターには
ブロックを追加する時の「レイアウト要素」というカテゴリの中に
「改ページ」というパーツが標準搭載されています。

こういうときWordpressは便利ですね。

ページを区切りたいところで挿入すると、↑のような
——改ページ——という点線が出てきます。
一般的に配布されているテーマであれば、ほとんどの場合はこれで動くはず。

それでできるのかなと思って使ってみると、
どうも反映されない。
コードが何も出力されていないし、エラーすら出ない。

このブログは自作テーマなので、何かの関数が足りていないのかなと
ためしに無料テーマを入れている別ブログで同じように改ページを入れてみると表示される。

ということで、何のコードが足りなくて動かないのか、
またまたコードを解剖して調べてみました!

「wp link pages」を書くだけだった

function.phpの記述が足りないのかなとも思ったけれど
何を足してもうんともすんとも変わらないし
やっぱりエラーすら出ない。

のであればと思い、
改ページがちゃんと表示される無料テーマのほうのsingle.phpを見てみると
ありましたありましたっ。

ちなみにhesitaというのは使っている無料テーマの名前です

記事本文 the_content();の直下にある、wp link pagesというPHPコードを書けば良さそうということで
ためしに自作テーマにコピペしてみると動きました。

該当のコードが足りないだけだった

一つの記事ページを分割するって、なんかもっと
function.phpに動的なコード書いたり、プラグイン入れたりしなきゃないのかなと思っていましたが
そんなことはありませんでした。

解剖してみるほどでもなかった…!

しかし、「リンクページ」って、ページネーションと混同しそうな
紛らわしい名前ですよねぇ。

改ページリンクの実装方法

下記のコード↓を、改ページする可能性のあるPHPテンプレートに貼ります。
ちなみに「改ページ」を使っていない、1ページ完結している記事には
ボタンはなにも出ません
のでご安心を。
コピペ用コードも次のページでご紹介しますね◎

WordPressCodexの公式ページはこちら。
→テンプレートタグ/wp_link_pages

おそらくsingle.phpが多いんじゃないかと思いますが
固定ページもページ分割する可能性がある時はpage.phpにも貼ったり
用途に合わせてくださいね。

(Wordpress Codexサイトより転載)

上の<?php wp_link_pages( $args ); ?>1行だけでも動きますが
CSSなどを付加することを考えると
下の配列にして、divやliなどでマークアップしたほうが後々使いやすいです。

せっかくなので
コピペ用コードは次のページに書きますね。

ブログ・ホームページ作るなら
【エックスサーバー】が断然おすすめ

超大手で安定稼働&明瞭な料金体系で、
運用の煩わしさゼロ!
わたしのクライアントさんにもおすすめしており、
このサイトもエックスサーバーで作っています◎

共感したら「いいね」してね

いいね! (まだ評価がありません)
記事のURLをコピーする

記事一覧に戻る


先頭へ戻る