【Cocoonカスタマイズ】ページの先頭にページネーション、ページ送りナビを追加する方法

はじめに
ページネーションを追加する場合
ページ送りナビを追加する場合
- 完成イメージ
- 実装手順
さいごに

はじめに

以下の質問に回答します。

前後のページに移動するボタン（正式名称を知りません...）の位置についての質問です。ウェブサイトにアクセスしてくれた方が一番下まで画面をスクロールしなくても目的のページにジャンプできるよう、フロントページのインデックスの最下部にあるこのボ...

記事の上部にもページャーを設置したい

いつもお世話になっております。体験記系のブログを書いていているのですが、ページネーションで分割した2ページ目からサイトを訪れてくれる方が多くいます。先に話の落ちを見せてしまうことになりますので、記事の上部にもページャーを設置したいのです...

ページネーションを追加する場合

インデックスページの先頭にページネーションを追加します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

/**
 * ページネーションを表示
 *
 * @return void
 */
if (!function_exists('top_pagenation')) :
function top_pagenation() {
  if (is_front_page_type_index() || is_front_page_type_tab_index() || !is_front_top_page()) {
    cocoon_template_part('tmp/pagination');
  }
}
endif;


// テンプレート（アーカイブタイトル）の直前に追加
add_action('cocoon_part_before__tmp/list-title', function ($name, $args) {
  if (!is_home()) {
    top_pagenation();
  }
}, 10, 2);

// テンプレート（エントリーカード一覧）の直前に追加
add_action('cocoon_part_before__tmp/list', function ($name, $args) {
  if (is_home()) {
    top_pagenation();
  }
}, 10, 2);

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

#main > .pagination-next:first-of-type,
#main > .breadcrumb + .pagination-next {
  display: none !important;
}

補足

前述のコードは、Cocoon設定→投稿→パンくずリストの配置「メインカラムトップ」にしている場合でも、「メインカラムボトム」に合わせパンくずリストの直下にページネーションを表示するためのものです。

なお、単にページの先頭に表示させるだけなら、以下のコードで実装できます。

add_action('cocoon_part_before__tmp/list', function ($name, $args) {
  if (!is_front_page_type_index() && !is_front_page_type_tab_index() && is_front_top_page()) {
    return;
  }

  cocoon_template_part('tmp/pagination');
}, 10, 2);

ページ送りナビを追加する場合

投稿ページの先頭にページ送りナビを追加します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_action('cocoon_part_before__tmp/content', function ($name, $args) {
  if (!is_single()) {
    return;
  }

  cocoon_template_part('tmp/pager-post-navi');
}, 10, 2);

さいごに

今回紹介した方法を使えば、一覧ページや投稿ページの上部といった読者の目に入りやすい位置へ、ページネーションを追加できます。

特に記事一覧のボリュームが多いブログやメディアでは、ユーザーがわざわざページ最下部までスクロールしなくても次のコンテンツへ移動できるようになるため、サイト内の回遊率の向上や離脱率の低下に大きく貢献します。