MENU
ふぃる
会社員として働きながら、ブログを始めたい人に向けて記事を書いています。映画ブログもやってます。

サイトで使用中のテーマ
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WordPressのテーマはSWELLがおすすめ

WordPressで目次を開閉する方法!SWELLなど目次を閉じる場合に

私はSWELLというテーマを使っており、凄く気にいっているのですが、目次が開閉できない仕様になっています。

記事の性質上、どうしても目次を開閉したかったので、他のサイトを参考にしながらカスタマイズしてみました。その方法を紹介したいと思います。

目次

目次の開閉方法

なぜ開閉にしたかったのか?私の書いている映画ブログで「年間のランキング記事」があるのですが、目次が開いている状態だといきなりネタバレになり、ブログを最後まで読んでもらえないと思ったからです。

かといって目次を表示しないのも不親切。という事で開閉できればなと思った訳です。

ここからはSWELLを使って解説。

開閉方法は簡単です。管理画面の「外観」から「カスタマイズ」を選択。その中にある「高度な設定」をクリックします。

左下にあるbodyタグ終了直前に出力するコードに以下のコードをコピペします。

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

こちらのサイトを参考にさせてもらいました。

SWELLでは目次のタイトルの部分がコードの4行目に書いてある「p-toc__ttl」になります。もし違うテーマだったりうまくいかない場合はここを確認してみてください。ちなみにこの見方ですが…

  1. サイト上で右クリック
  2. 「検証」をクリック
  3. 右上の矢印のマークをクリック
  4. 見たい部分にカーソルを合わせる

矢印は下の画像の赤枠の部分です。

赤枠の中がクラス名になるので、それを使います。

今度は隠す部分になります。タイトルを隠すわけにはいかないので、目次リストだけを開閉できるように。リストの部分は6行目の「p-toc__list」になります。

これで最初はリストが隠れた状態。そして「表示」を押すと目次が現れ「非表示」を押すとまた隠れるようになります。

この仕様にした場合パソコンで見た時に右側に「追尾サイドバー」を設定していると、表示されません。目次が開いている状態だと表示されます。

これはスマホにもある画面右側にある三本線を押しても同じです。

コードを入力したら「公開」を押し、設定が完了に。これで開閉できるようになっているはずです。

関連記事

よかったらシェアしてね!

コメント

コメントする

目次
閉じる