【コピペでできる】SWELLのカスタマイズー目次を閉じる(開閉する)

2024年1月17日

当ページのリンクには広告が含まれています。

人気テーマ「SWELL」は、組み込まれている機能だけでもかなり自分好みのデザインにできます。
ただ、人気のテーマゆえに、似たようなデザインになりがち…
そんな時に、独自のデザインを取り入れられるのがCSSでのカスタマイズです。

今回は、CSSを使って、目次に開閉機能をつけるカスタマイズを紹介していきます。

SWELLのテーマを使用する前はCocoonテーマでいろいろ遊んでいた筆者が、コピペで可能なカスタマイズ例を紹介していきますので、ぜひ参考にしてみてください。

カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。

＼おしゃれで使いやすい／

SWELL公式サイト

SWELLのCSSコードの貼り方

SWELLをCSSでカスタマイズする場合、コードを記述する場所が3パターンあります。

管理画面内のカスタマイズにある追加CSS
テーマファイルエディタのstyle.css
記事の編集画面下部「カスタムCSS ＆ JS」

まずはこれらコード記述場所についての違いを解説していきます。

1｜カスタマイズ「追加CSS」

サイト全体に反映させたい場合は、ここにCSSコードを貼るのが一般的です。

左メニュー → 外観 → カスタマイズ → 追加CSS

と進むと、コード記述箇所があらわれます。

ここに記述すれば、横の画面にリアルタイムでデザインが反映されますので、とても便利です。

全ページに反映させるCSSコードを書くときは、まず「追加CSS項目」を活用してください。ただしここに記述すると、サイトのソースコードを見られたときに追加した分のCSSが丸見えになるというデメリットはあります。

だからといって特別に困ったことがあるわけではありませんが、あまり人から見られたくない場合などは、後述する「style.css」に書くと良いでしょう。

2｜テーマエディタのstyle.css

SWELLのテーマファイルに、直接CSSを記述することもできます。

外観 → テーマファイルエディター → スタイルシート（style.css）

と進むと、下記のような画面へ。
ここに記述すると、全ページで読み込まれます。

ここに書くと、ソースコードを見られたときにも表向きは見えないメリットがあります。style.cssを覗かれれば見られますが、それはもう仕方のないことです。

まずはカスタマイザーの追加CSS項目に書いて動作をチェックして、問題なさそうなコードはstyle.cssに移すような使い方が良いかと思います。

この方法でカスタマイズをする場合は、必ず子テーマを使用してください。
親テーマのstyle.cssを使ってしまうとテーマのアップデートがあった際にファイルが上書きされてしまうため、加えた変更点がリセットされてしまいます。

3｜SWELL編集画面下部「カスタムCSS ＆ JS」

SWELLには、各投稿ページや固定ページ編集画面の下部にCSSコードを入力する項目が用意されています。

ここの「CSS用コード」欄に貼ったCSSコードは、その記事だけに反映されます。
そのページにだけ反映させたいCSSは、この部分に記述すれば他のページでは読み込まれませんので、個別で書くと良いでしょう。

目次が開閉するようにカスタマイズ

それでは、目次をカスタマイズしていきます。

CSSを追加する

追加するコードは以下となります。

/* 閉じる状態 */
.toc-chk + .p-toc__ttl + ol li,
.toc-chk + .p-toc__ttl + ul li {
	display: none;
}

/* 開く状態 */
.toc-chk:checked + .p-toc__ttl + ol li,
.toc-chk:checked + .p-toc__ttl + ul li {
	display: block;
}

/* dummyチェックボックス */
.toc-chk {
	display:none;
}

/* 開く・閉じる */
.toc-chk:checked + .p-toc__ttl>.toc-ttl::after {
    content: '[閉じる]';
}
.toc-ttl::after {
    content: '[開く]';
    cursor: pointer;
    margin-left: .5em;
    font-size: .8em;
}

functions.phpにコードを追加する

今回のカスタマイズでは、functions.phpにもコードを追加する必要があります。

追加する場所は、上で説明をしました②のstyle.cssに追加をする方法のように、

外観 → テーマファイルエディター → テーマのための関数（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);

これで、目次開閉（閉じた状態）の設定完了です。

上の画像のように目次が閉じられているか確認してみてください。

開いている状態を初期状態にする

上のカスタマイズでは、目次が閉まっている状態が初期状態となりますが、開いている状態を初期状態にすることもできます。

その場合は、上で紹介したコードの代わりに下記コードを追加します。

//目次を開く/閉じる
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" checked>';
	$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);

微妙な違いでわかりにくいのですが、６行目の最後にcheckedを追加したことにより、「開いている状態が初期状態ですよ」という指示が加わりました。

まとめ

コード改変は、WordPressの中でも中〜上級者向けの部分かもしれません。

焦らずゆっくりと、自分好みのページを作っていきましょう。

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