WordPress、Cocoon、目次をサイドバーに追加する

WordPressテーマ「Cocoon」は、その多機能性とシンプルな操作性で多くのユーザーに支持されています。本記事では、Cocoonの便利な「目次機能」について詳しくご紹介します。

目次機能とは？

この機能は、記事内の見出しを自動で検出して目次を生成する仕組みを備えており、訪問者が記事内容を効率的に把握しやすくなる特徴があります。Cocoonを活用して、目次をどのように設定・カスタマイズできるのか、具体的な手順やポイントを解説していきます。これからCocoonを導入する方や目次機能を有効活用したい方はぜひ参考にしてください。

目次を利用するメリットについての説明

ユーザビリティの向上：訪問者は一目で記事の構成を把握し、興味のあるセクションにスムーズにアクセスできる。
SEO効果：目次の使用は検索エンジンにも好意的に評価されやすく、特に長い記事でのランク向上が期待されます。
ページ滞在時間の増加：読者が目次を利用して複数のセクションを閲覧することで、ページ滞在時間が長くなる可能性があります。

目次を有効にする
目次をサイドバーに追加する

目次を有効にする

WordPressの管理画面にログインします。
左側のメニューから「Cocoon設定」をクリックし、「目次」タブを選択します。
「目次の表示」オプションにチェックを入れます。
「変更をまとめて保存」をクリックし保存します。

目次をサイドバーに追加する

このままでも目次は表示されていますが、サイドバーなど別の場所に表示させたい場合は、ショートコードやウィジェットを使用して配置することができます。

ウィジェットにショートコード追加

例えば、cocoonで扱える、[toc]というショートコードを使うと、Cocoonで有効化された目次を記事やウィジェットに表示できます。このように、ショートコードを使うと簡単に特定の機能を任意の場所に配置できます。

WordPress管理画面にログイン
管理画面にログインして、左のメニューから「外観」→「ウィジェット」を選択します。

ウィジェットエリアを選択
サイドバーやフッターなど、目次を表示させたいウィジェットエリアを選択します。

「ショートコード」ウィジェットを追加
ウィジェットエリアに「ショートコード」ウィジェットをドラッグ＆ドロップします。

目次ショートコードを入力
「ショートコード」ウィジェットに[toc]というショートコードコードを入力します。

Cocoonの目次ブロックを利用する

Cocoonには目次を簡単に追加できる「目次ブロック」が用意されており、ショートコードを使わなくても簡単に目次をウィジェットエリアや他の場所に配置できます。以下は、その方法をご紹介します。

WordPress管理画面にログイン：WordPressの管理画面にログインし、左メニューから「外観」→「ウィジェット」を選択します。

ウィジェットエリアを選択：サイドバーやフッターなど、目次を表示したいウィジェットエリアを選択します。

「目次ブロック」を追加
① ウィジェット編集画面で「＋」ボタンをクリックして、新しいブロックを追加します。
② 利用できるウィジェットの中に、Cocoon専用の「目次ブロック」が表示されています。
③ この目次ブロックをクリック、またはドラッグアンドドロップをしてウィジェットエリアに追加します。

ページ内リンクのアニメーション追加

ページ内リンクの役割と利便性

目次のリンクをクリックすると、該当するセクションに一瞬で移動します。ページ内リンクは、記事が長い場合に特定の箇所にすぐにジャンプできる便利な機能です。これにより、読者はスムーズに必要な情報にアクセスできます。

アニメーションでのスムーズなスクロール効果の追加

目次のリンクをクリックした際、瞬時に移動するのではなく、スムーズなスクロールで移動させることで、より自然な操作感を提供できます。これを実現するためには、以下のJavaScriptやjQueryのコードを利用します。

ページ内でのアニメーションは下記の記事も参考にして頂ければと思います。

jQuery(document).ready(function($) {
  $('a[href*="#"]').on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({
          scrollTop: $($(this).attr('href')).offset().top
      }, 500, 'linear');
  });
});

JavaScript