テーマ「SWELL」で目次を非表示＝閉じた状態で表示する方法

こんにちは。

先日あるブログの記事を書いている途中に、そのブログはSWELLというテーマを使ってるのですが、デフォでは、目次を開閉する機能がないので、何か方法がないかなと思っていたら、良い方法を見つけました！

ということで、今回は備忘録の意味でも残してみます。

テーマをいじる必要あり！※初心者注意！
コードを2カ所にコピペして保存でOK!
開閉機能もCSSで装備！
SWELLで目次を閉じた状態で始めるには？

テーマをいじる必要あり！※初心者注意！

まず、どんな風に表示されるかを見ていきましょう。

こちらがデフォで、目次を表示させた場合です。

このように、デフォの機能では、目次の下部分を非表示に出来ても、目次の中身が多少は見える設定になってます。

これを以下のように、目次を開くをクリックしなければ、開けないようにしてみましょう。

ただ、こちらの方法は、テーマに追記するタイプなので、初心者の方は、必ずバックアップを取ってからやってください。

どこをいじったのかわからなくなれば、データが消える可能性もあるかもしれません。

テーマをいじるのは、あくまでも自己責任でお願いします。

それでは、前置きが長くなりましたが、やること自体は簡単で、テーマの二カ所にコードをコピペすればOKです。

コードを2カ所にコピペして保存でOK!

まず、目次で開くと閉じるを表示させたいので、以下のコードを、子テーマのfunctions.phpに追記してください。

どこかわからない方は、こちらも参考にしてみてくださいね。

まず、外観→テーマファイルエディター→functions.phpです。

ここの最後尾に、以下のコードを貼り付けます。

コードはこれです。

終わったら、下にある「ファイルを更新」ボタンをクリック忘れずに！

//目次を開く/閉じる
function toc_open_close($the_content) {
	$SETTING = \SWELL_FUNC::get_setting();
	$tocBef = '<span class="p-toc__ttl">' . $SETTING['toc_title'];
	$tocAft = '</span>';
	$add_content1 = '<input type="checkbox" class="toc-chk" id="tocChk">';
	$add_content2 = '<label class="toc-ttl" for="tocChk"></label>';
	$the_content  = str_replace($tocBef.$tocAft, $add_content1.$tocBef.$add_content2.$tocAft, $the_content);
	return $the_content;
}
add_filter('the_content','toc_open_close',13);

今後テーマのアップデートで、使えなくなる機能があるかもしれませんが、2026年1月27日現在では動いています。

開閉機能もCSSで装備！

今度は、CSSの部分に以下のコードをコピペします。

先ほどのfunctions.phpの上にある、style.cssにコピペです。

こちらに、以下のコードをコピペします。

/* 閉じる状態 */
.toc-chk + .p-toc__ttl + ol li,
.toc-chk + .p-toc__ttl + ul li {
	transition: 0.1s;
	height:0px;
	overflow: hidden;
	line-height: 0;
}

/* 開く状態 */
.toc-chk:checked + .p-toc__ttl + ol li,
.toc-chk:checked + .p-toc__ttl + ul li {
	transition: 0.1s;
	height:100%;
	overflow: inherit;
	line-height: 1.5;
}

/* dummyチェックボックス */
.toc-chk {
	display:none;
}
/* 開くor閉じる */
.toc-chk:checked + .p-toc__ttl>.toc-ttl::after {
    content: '[閉じる]';

}
.toc-ttl::after {
    content: '[開く]';
    cursor: pointer;
    margin-left: .5em;
    font-size: .8em;
}

また、ファイルを更新ボタンを忘れずにクリックして、エラーが出なければOKです。

コピペなので、手順通りにやれば、失敗はないと思います。

ちなみに、上記のコードは、最初から閉じた状態で表示させたい場合に使います。

最初から開いた状態にするコードもあると思いますが、そちらはSWELLで設定できる目次の表示を使えばできるので、今回は割愛します。

＞＞＞そらいろログ様に感謝！！