コレは便利だ!Cocoonで目次を開閉可能にするカスタマイズ(アニメーション可能)【WordPress】

Cocoonカスタマイズ

こんにちは、バーチャルブロガー・さいとう(@S41T0H)です。

世界一最高な無料WordPressテーマこと、わいひらさん作成の「Cocoon(コクーン)」

目次表示がプラグイン不要という素晴らしさ。いますぐ乗り換えたくなりますね。

しかしこの目次、「開閉ボタン」がついてないんです。ちょっともったいない。

追記:バージョン0.5.4から公式で対応できるようになりました。

Cocoon 0.5.4公開。目次の表示切替機能を追加、他。
Cocoon 0.5.4のアップデート情報。

というわけで今回はCocoonの目次を開閉可能にするカスタマイズを紹介します。

アニメーション機能も付けられますよ。

↓サンプルです

スポンサーリンク

Cocoonの目次を開閉可能にするカスタマイズ方法。

さっそくサンプルコードだ!

今回はjQueryを使用して実装していきます。切り替えボタンを表示するHTMLの追記もjQueryを使用しますのでラクチンですね。

以降、jQueryおよびCSSカスタマイズ例は全て小テーマのjavascript.jsおよびstyle.cssに追記していきます。

CocoonのjQueryやCSSをカスタマイズするには「外観」→「テーマの編集」から必ず「小テーマ(Cocoon Child)」の「javascript.js」および「スタイルシート(style.css)」に追記しましょう。

変更が反映されない場合はCtrl+F5ページキャッシュを削除してくださいね。

サーバーキャッシュ系のプラグイン(LiteSpeed Cacheなど)を使用している場合はキャッシュをパージすることもお忘れなく。

コピペでOK!Cocoonの目次をアニメーション付きで開閉可能にするjQuery

こちらがjQueryです。必ず小テーマの「javascript.js」にコピペしてくださいね。

javascript.js


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

はい。これでできました。カンタンですね。

開閉ボタンもjQueryで表示させているのでちょっと遅れて表示されてしまうのが少し難点でしょうか。

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

細かい速度設定をしたい場合は「.slideToggle(200)」などのように数字で指定することもできますヨ。

アニメーションさせたくない場合は「.slideToggle()」としてください。

これだけだと寂しいので、CSSで表示を整えていきます。

CSSデザインの例

style.css

.toc{
  margin: 1em auto; /* 目次を中央寄せ */
}

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

僕はこんな感じに設定してみました。

このへんはお好みで。

「デフォルトでは目次を非表示にしたいなぁ」という方はコチラ。

記事が長くなりすぎると目次だけで画面一杯になってしまうことも。

それがイヤな方はデフォルトで非表示にしてみましょう。

javascript.js


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

上のコードは、2行目の「opened」を「closed」に、3行目の「非表示」を「表示」に変えただけです。

そしてCSSは下記のようにします。
style.css

.toc-list{
  display: none;
}

ブログ論:記事に目次は必要か?

というわけで技術的に目次ボタンは実装可能になりましたが、はたしてそもそも目次って必要でしょうか?

今をときめくブロガークロネさんのブログにステキな記事がありましたので、こちらが参考になると思います。

ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう!|クロネのブログ講座
この記事では、ブログ記事の「目次」について、必要なのか? それとも不要なのか?について私の考え方を書いています。 「目次

目次をh2タグまでにする、というのはたしかに……。と思いました。

僕自身はブログを読む時に目次で概観を把握しておきたいので、目次必要論者です(笑)。

いずれCocoonの目次h2まで表示させるカスタマイズ方法も書きたいな~と思います←書きました

【Cocoon】目次をh2タグまでの表示にするCSSカスタマイズ【WordPress】
目次の深度調整については、公式で対応されました。 今回は小ネタです。 こちらの記事を参考に、「Cocoon(コクーン)」での目次の表示をh2タグまでにするカスタマイズ方法です。 「目次は設置したいけど長くなってしまうのはイヤ…」と...

いかがでしたでしょうか。

僕はjQueryについては素人ですので下記ページを参考にさせて頂きました。ありがとうございました。

jQueryをWordPressで使う場合の読み込み方と使い方
jQueryのプラグインなどを入れてみてサンプル通りのコードを貼り付けたのに動かない!って事がよくあります。jQueryをWordPressで使いたいのに動かない場合、大抵はjQuery構文の$が使えないのが原因です。
jQueryで開閉メニュー&ボタンのテキストを切り替える
開閉メニューのサンプルコードは、よく目にしますが、”ボタンのテキストを切り替える機能が付いた”サンプルコードは…
超簡単jQuery!toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法 | 東京上野のWeb制作会社LIG
「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle/fadeToggle/toggleClass」をご紹介します。これらを知っておくと、アコーディオンメニュー、タブ、上からスラスラ出てくるメニューを実装できます。

執筆時点で最新のCocoon 0.5.7.1で動作確認していますが、今後のアップデートで使用できなくなる可能性もなくはないのでご了承ください。というか公式でいつか実装されそうですね。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています!
今後の記事執筆の励みになります!を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

 

コメント