WordPress(ワードプレス)のサイトで、テーマに目次表示機能があるが、開閉ボタンが付いていない場合のカスタマイズです。
記事に合わせて目次が長くなった時に邪魔になることがあります。そんな時、開閉ボタンがあると便利です。

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

テーマにせっかく目次表示機能があるので、開閉ボタンだけのためにプラグインは入れたくない。
こんなご希望におこたえします。
プラグインなし。jQuery、CSSなどで実現する方法をご紹介します。
目次に開閉ボタンのないWordPressテーマで、開閉ボタンを設置
私が以前使っていたテーマは、目次機能がついているのですが、開閉ボタンはありませんでした。
そこで、開閉ボタン設置のカスタマイズを行いました。
今回は以下の記事を参考にさせていただきました。
今回ご紹介する方法は、どのテーマでも応用できます。
コピペで簡単! 開閉ボタン設置のサンプルコード
コードは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;
}
まとめ
目次は記事の全体像が把握でき、リンクにもなっているので、ユーザビリティを高めてくれます。
しかし、ページの上部にあって、長い記事では広いスペースを占めるので、開閉にできると、邪魔にならず助かります。