スポンサーリンク

【WordPress】目次に開閉ボタンのないテーマに開閉ボタンを設置

目次に会へボタン設置WordPress
2020.08.01

WordPress（ワードプレス）のサイトで、テーマに目次表示機能があるが、開閉ボタンが付いていない場合のカスタマイズです。

記事に合わせて目次が長くなった時に邪魔になることがあります。そんな時、開閉ボタンがあると便利です。

テーマに目次表示機能が付いているが、「開閉ボタン」がないので、付けたい。

テーマにせっかく目次表示機能があるので、開閉ボタンだけのためにプラグインは入れたくない。

こんなご希望におこたえします。

プラグインなし。jQuery、CSSなどで実現する方法をご紹介します。

目次に開閉ボタンのないWordPressテーマで、開閉ボタンを設置

私が以前使っていたテーマは、目次機能がついているのですが、開閉ボタンはありませんでした。
そこで、開閉ボタン設置のカスタマイズを行いました。

今回は以下の記事を参考にさせていただきました。

コレは便利だ！Cocoonで目次を開閉可能にするカスタマイズ（アニメーション可能）【WordPress】
WordPressの無料テーマ「Cocoon」の記事目次を開閉可能にするカスタマイズ方法を紹介しています。サンプルコードのコピペだけでカンタンに実装できます。また、開閉時のアニメーションをつける方法もあわせて紹介しています。コピペするだけですぐCocoonに「アコーディオン開閉する目次」を設置できますよ。
s41t0h.jp

今回ご紹介する方法は、どのテーマでも応用できます。

コピペで簡単！　開閉ボタン設置のサンプルコード

コードはWordPressテーマ「Snow Monkey」の例です。

まず、目次のタイトルと目次の内容（リスト）を囲んでいる、見出しタグやdiveタグ、ulタグなどに付与されているクラスやidを調べます。

以下の画像はSnowMonkeyの例です。

目次の非表示ボタン設置

jQuery

以下のサンプルコードで、赤字部分をお使いのテーマに合わせて変更してください。

  • 3行目の .wpco__titleは、目次タイトル（「目次」）を囲む<div>タグに付与されたクラス
  • 5行目の .contents-outlineは、目次の内容（リスト）を囲む<div>タグに付与されたクラス

JQuery

jQuery(function($){
  var flg = 'closed'; //デフォルトの設定：表示='opened'、非表示='closed'
　$('.wpco__title').append('<span class="toc-toggle-label">[<a class="toc-toggle-link">表示</a>]<span>'); //デフォルトの開閉リンク文字列
  $('.toc-toggle-link').on('click', function() {
    $('.contents-outline').slideToggle('fast');
    if(flg == 'closed'){
      $(this).text('非表示'); //表示状態のリンク文字列
      flg = 'opened';
    }else{
      $(this).text('表示'); //非表示の状態のリンク文字列
      flg = 'closed';
    }
  });
});

5行目の「.slideToggle(‘fast’)」の「fast」を「slow」にすれば速度を変更することができます。

このコードを記載したファイルを、toc.jsなどの名前で保存して、子テーマのJSフォルダにアップロードします。
SnowMonkeyの場合は、themes/snow-monkey-child-master/assets/jsにアップロードします。

js ファイルを読み込むためのコード

function.phpに記載します。
5行目のjsファイルの場所 /assets/js/toc.js　をお使いの子テーマに合わせて変更します。

PHP

add_action( 'wp_enqueue_scripts', function() {
    // jQueryを実行させるコードを記述するための js ファイル
    wp_enqueue_script(
        get_stylesheet(),
        get_theme_file_uri( '/assets/js/toc.js' ),
        [ get_template() ],
        false,
        true
    );
} );

CSSでデザインを調整

「表示」「非表示」の文字部分のデザインを調整します。
お好みで変更してください。

style.css

.toc-toggle-label{
  font-size: 90%;
  margin: 0 5px;
  cursor: pointer;
}

デフォルトで目次を非表示にする場合

先の例では、デフォルトで目次は開いた状態となっています。
邪魔になるので、ページを開いた時、非表示にしたいという場合のサンプルコードです。

2行目の「opened」を「closed」に、3行目の「非表示」を「表示」に変えます。

jQuery

jQuery(function($){
  var flg = 'closed'; //デフォルトの設定：表示='opened'、非表示='closed'
　$('.wpco__title').append('<span class="toc-toggle-label">[<a class="toc-toggle-link">表示</a>]<span>'); //デフォルトの開閉リンク文字列
  $('.toc-toggle-link').on('click', function() {
    $('.contents-outline').slideToggle('fast');
    if(flg == 'closed'){
      $(this).text('非表示'); //表示状態のリンク文字列
      flg = 'opened';
    }else{
      $(this).text('表示'); //非表示の状態のリンク文字列
      flg = 'closed';
    }
  });
});

それから、CSSは以下のようにします。

style.css

.contents-outline{
  display: none;
}

まとめ

目次は記事の全体像が把握でき、リンクにもなっているので、ユーザビリティを高めてくれます。
しかし、ページの上部にあって、長い記事では広いスペースを占めるので、開閉にできると、邪魔にならず助かります。

タイトルとURLをコピーしました