私は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」になります。もし違うテーマだったりうまくいかない場合はここを確認してみてください。ちなみにこの見方ですが…
- サイト上で右クリック
- 「検証」をクリック
- 右上の矢印のマークをクリック
- 見たい部分にカーソルを合わせる
矢印は下の画像の赤枠の部分です。
赤枠の中がクラス名になるので、それを使います。
今度は隠す部分になります。タイトルを隠すわけにはいかないので、目次リストだけを開閉できるように。リストの部分は6行目の「p-toc__list」になります。
これで最初はリストが隠れた状態。そして「表示」を押すと目次が現れ「非表示」を押すとまた隠れるようになります。
この仕様にした場合パソコンで見た時に右側に「追尾サイドバー」を設定していると、表示されません。目次が開いている状態だと表示されます。
コードを入力したら「公開」を押し、設定が完了に。これで開閉できるようになっているはずです。
関連記事
あわせて読みたい
0からブログを始める方法を解説！開設から運営まで全てがわかります
初心者向け！ブログの始め方を解説！開設から運営まで全てがわかります。必要最低限の項目を一つづつ紹介。これを見るだけでほとんどの事がわかります。
コメント