スライダーの最後にカテゴリページへの誘導リンクを設置する方法【Cocoon対応】

新着記事をスライド表示していると、ついつい最新記事だけに注目が集まりがちです。
しかし、スライダーの最後にカテゴリページへの誘導リンクを設置することで、訪問者のサイト内回遊を促進できます。この記事では、そのメリットとCocoonテーマでの設置方法を解説します。

CONTENTS

なぜカテゴリページへの誘導が重要なのか？
スライダー最後に誘導リンクを設置する効果
Cocoonでの具体的な設定例

なぜカテゴリページへの誘導が重要なのか？

関連記事をまとめて見せられるため、訪問者の興味を維持しやすい。
サイト内の回遊率が上がることで、滞在時間が増えSEOにも好影響。
カテゴリページ自体の評価が高まることで、検索順位アップも期待できる。

スライダー最後に誘導リンクを設置する効果

訪問者が次に読むコンテンツを迷わず選べるようになる。
「もっと見る」や「カテゴリ一覧へ」といった誘導でクリック率がアップ。
サイト全体の印象が整い、親切なサイト設計として評価される。

Cocoonでの具体的な設定例

１．横並びのサムネイルの最後に追加する画像を作成します。（画像ではなく、テキストにリンクさせる形なら必要ありません。）私は下記の画像を500×500pxのwebpファイルで作成しました。

２．新着記事を表示させるページ（私の場合はHOME（固定ページ））のカスタムHTMLブロックに書きのコードを貼ります。ページ内に１か所置けば、記述したカテゴリの順番にリンク先がセットされます。

<script>
// スライダー内に「もっと見る」カードを追加する
document.addEventListener('DOMContentLoaded', function () {
  const wrappers = document.querySelectorAll('.swiper-wrapper');

  // もっと見るカードにリンクさせたいカテゴリページURL（必要に応じて変更）
  const links = [
    "/category/カテゴリ名1/",
    "/category/カテゴリ名2/",
    "/category/カテゴリ名3/"
  ];

  wrappers.forEach(function (wrapper, index) {
    const linkHref = links[index] || "#";

    // すでに「もっと見る」カードが追加されている場合はスキップ
    if (wrapper.querySelector('.more-entry-card')) return;

    // 追加するスライド要素のHTML構築
    const slide = document.createElement('span');
    slide.className = 'new-entry-card-link widget-entry-card-link a-wrap swiper-slide';

    slide.innerHTML = `
      <a href="${linkHref}">
        <div class="post more-entry-card new-entry-card widget-entry-card e-card cf">
          <figure class="new-entry-card-thumb widget-entry-card-thumb card-thumb">
            <!-- 「もっと見る」カードに表示するサムネイル画像のURLを指定 -->
            <img src="作成した画像のURL" alt="もっと見る" width="320" height="180">
            <span class="cat-label cat-label-more"></span>
          </figure>
          <div class="new-entry-card-content widget-entry-card-content card-content">
            <div class="new-entry-card-title widget-entry-card-title card-title">
              <!-- カードタイトルは空でもOK。必要ならここに文字列を追加 -->
            </div>
          </div>
        </div>
      </a>
    `;

    // スライダーにカードを追加
    wrapper.appendChild(slide);
  });
});
</script>

※このコードは特定のテーマ（例：Cocoon）および環境で動作確認を行ったものです。
お使いの環境やバージョンによっては正しく動作しない場合があります。
ご利用の際は自己責任にてお願いします。