記事を複数ページに分けるページ送りを導入する

ブログの運営にAFFINGER5 EXを使っている。

つい最近まではAFFINGER5 WINGだったのだが、一生懸命コードをいじってみても記事のカードデザインでの表示が上手くいかないので折れた。そんなまでして導入したのに実は上手くいっていない。まぁ、その話はまた今度にしよう。

この記事はプログラミング完全初心者のサイト管理者があれこれ調べながらサイトの改造をした内容を記録するためのもの。Wordpressテーマにアフィンガーを使っている前提なので必ずしも汎用的な内容ではない点に注意してほしい。

メインのサイトでは一部の記事で閲覧に会員登録を求める仕様にしている。ある一定より先の内容を読みたければ事前に登録した内容でログインしてね、というよくあるあれだ。

このログインのシステム自体はいくつかの方法を検討したが、最終的にプラグインで実現することにした。このプラグインの導入についてはまた別の機会に紹介したい。今回はこのログインシステムの採用にあわせてページネーションを取り入れることにしたので、そのページネーションのやり方について書いておく。

ページネーションとは

ページネーションとは、ページ送りのこと。ナショナルジオグラフィックなど日経関連のサイトに多く導入されている印象がある、記事を複数ページに分けて掲載し、記事の下の方にページ番号とそのリンクと一緒に「次ページ」というページ送りボタンを設置することをいう。Affingerでもカテゴリー一覧のページなどではこのページネーションが自動的に設置されているので、すでにある程度の数の記事を書いている状態であればすぐにでもご自分のサイトでどんなものが確認してもらえると思う。

ちなみにこういう外観。表示デザイン自体はCSSをいじれば変えられる模様。

ページネーションの設置方法

ページネーション自体はWordpressで標準で実装されているので、使用に際しては特にどこかしらのファイルのコードをいじらなければならない、ということはない。

強いていえば、ブロックエディターではより簡単に設置できるようになっているらしいのに対して、我々Affingerユーザーの大半が使っているであろう旧エディターではボタン一つで「はい、挿入！」とはならない、ということくらいだろうか。とはいっても特に難しい操作は必要ないのでそこまで手間のかかる作業、というわけでもないので安心して欲しい。

記事中にページネーションを設置したい場合には、設置したい場所に

<!–nextpage–>

というタグを挿入してやればいい。これだけで実際の記事を表示させればその場所に「次ページ」というボタンが表示され、ページ送りが実装される。

記事の執筆上はページが分かれることはないので、一気に長い記事をまとめて書き上げてしまい、その後にページネーションを設置して内容ごとに表示を分ける使い方などもおすすめだ。なおこのことから分かる通り、サイト上での表示は複数のページに分かれてはいても、Wordpress上の記事はあくまでも1記事。なので各ページごとにタイトルやカテゴリー、タグなどは変えられない点には注意が必要だ。

また記事の目次を自動挿入するのに「Table of Contents Plus (TOC+) 」のプラグインを使っている場合にはすべての目次がまとめて表示されず、上記のタグを挿入したところで表示が分割されるようになる。すべての目次をまとめて表示させたいのであれば、テキストベースで用意するなりの対応が必要となる。

なお上記のコードの挿入に際しても一つだけ注意点があり、上記のタグはビジュアルエディターモードでは機能しない。prism.jsを使ってコードを表示したいときと同様に、テキストエディタモード内で作業を行う必要があることに気を付けて欲しい。

AFFINGER5 | 記事の文章内にコードをきれいに埋め込む方法

今回、こうしたサイト改造の文章を書くにあたって、必要となったことがある。それが、ブログの文章中にコードをきれいに埋め込む方法。調べてみたら、code syntax コードシンタックスとか単純にシンタッ ...

続きを見る

ちなみに一部のサイトにはこのタグをわざわざテキストエディタモードで手打ちしなくてもビジュアルエディターモード内でのキーボードショートカットで挿入可能、と書かれていたが、今の最新バージョンのWordpressでは残念ながらそのような方法はなくなってしまっているようだ。

https://wordpress.com/ja/support/wordpress-editor/blocks/page-break-block/

https://wordpress.com/ja/support/wordpress-editor/blocks/page-break-block/2/

ページの定型をいじっている時の注意点

以上でページネーションを導入する方法自体は完了。この記事も終わり、と行きたいところだが、もう一つだけ注意点があるのでその点を最後に記載しておく。

このサイトでもやっていることなのだが、single-type1.phpやsingle-type2.phpのページ表示用のフォーマットの一部を改変して自動で記事や広告などが表示されるように自作のショーコードを入れている場合があるだろう。この時にショートコードの挿入場所によっては今回のページネーションの表示と相性が悪い場合がある。

今回紹介しているページネーションのページ送り用ボタンの表示場所はsingle-type1.phpやsingle-type2.phpのコードの中で明確に指定されている。それが以下の

<!-- コピー禁止エリアここまで -->
<!--?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?-->
<!--?php get_template_part( 'st-kai-page' ); //改ページ ?-->
<!--?php get_template_part( 'st-ad-on' ); //広告 ?-->

にある

<!--?php get_template_part( 'st-kai-page' ); //改ページ ?-->

のところだ。

つまり仮に次のように自作のショートコードをsingle-type1.phpやsingle-type2.php内に設置していると、記事へのいいねを促すボックスやSNS用のボタンの下にページネーションが表示されるようになってしまい読者にとってあまり優しくない表示がなされるようになってしまう。

<!-- コピー禁止エリアここまで -->
<!--?php get_template_part( 'like_follow_box' ); //この記事が気に入ったらいいねしよう ?-->
<!--?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?-->
<!--?php get_template_part( 'st-kai-page' ); //改ページ ?-->
<!--?php get_template_part( 'st-ad-on' ); //広告 ?-->

対策としては改ページ、つまりページネーションを表示するためのコードを別の場所に移すなり、自作のショートコードを読み込むためのコードを改ページ用のコードよりも下に挿入するなりすればいいだろう。