SWELLの目次に『開く・閉じる』を追加するカスタマイズ
SWELLにはテーマの機能として目次を表示することができます。
目次の機能はPHPではなく、ページ読み込み後に実行されるJavascriptで実現されています。Javascriptで実装したのはSnowMonkeyの方が早いと思いますので、SWELLも参考にしたのかもしれません。
Javascriptで目次を実装するメリットは、
- ①実装が簡単
- ②サイトの表示速度が速くなる
ことだと思います。
SWELLの場合は何でもキャッシュして高速化しているので、目次もPHPで作成して、キャッシュしてしまえばいいハズですが、なぜかそうなっていません。
Javascriptで実装された目次のデメリットは、
- ①CLS悪化の要因にもなります
- ②Javascriptにエラーがあると目次が表示されなくなります。
です。
SWELLの目次は続きを読むという仕組みで目次が多い記事でも目次がページを埋めないような機能がありますが、CLSの悪化は改善されません。
この記事では、目次の続きを読むではなく、CLSが悪化しないように目次を開閉するカスタマイズをご紹介します。
- SWELLの目次でCLSを悪化させない方法
- SWELLの目次をコピペだけで開閉するカスタマイズ
- スマホとPCで目次の開閉を切り替えるカスタマイズ
SWELLの目次でCLS悪化を避けるには？
SWELLの目次はJavascriptですから、目次を作成するタイミングはユーザーにページを表示した後です。
その影響で、アイキャッチが無い記事や、いきなりH2から始まるような記事の場合はCLSが悪化するケースがあるでしょう。
ページを読み込むまで目次の表示サイズが決まらないのですから原理的にCLS悪化は避けられません。
それを避けるには、ページ読み込み前に目次のサイズが決まるPHPの目次に置き換えるか、目次をファーストビューから追い出してCLSの悪化を隠すのが一般的です。
でも、Javascriptで目次を作成していてもプレースホルダのサイズは記事によらず固定ですから、最初から目次を非表示にして開閉できるようにすればCLSの悪化は避けられそうです。
SWELLの目次に開閉ボタンを追加するカスタマイズ
SWELLの目次に開閉ボタンを追加するカスタマイズを検索すると、異なるサイトで同じ内容のカスタマイズの内容ばかり出てきます。
オリジナルは、こちらの記事ではないかと思います。
// 目次を開く/閉じる機能を追加するための関数
function toc_open_close($the_content) {
// SWELL_FUNC::get_setting() で設定情報を取得
$SETTING = \SWELL_FUNC::get_setting();
// 目次の開始部分のHTMLを生成
$tocBef = '<span class="p-toc__ttl">' . $SETTING['toc_title'];
// 目次の終了部分のHTMLを生成
$tocAft = '</span>';
// 追加するコンテンツ1: チェックボックスを生成
$add_content1 = '<input type="checkbox" class="toc-chk" id="tocChk">';
// 追加するコンテンツ2: ラベルを生成
$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;
}
// 'the_content' フィルターに toc_open_close 関数を追加
add_filter('the_content','toc_open_close',13);
このコードは、WordPressの the_content フィルターフックを使用して、投稿やページの本文コンテンツに変更を加えています。主な機能は次のとおりです：
SWELL_FUNC::get_setting()を使用して、テーマやプラグインの設定情報を取得しています。これは、SWELLというテーマやプラグインに関連する設定情報を取得するためのものです。- 目次の開始部分と終了部分のHTMLを生成し、それぞれ
$tocBefと$tocAftに代入しています。 $add_content1と$add_content2には、目次を開く/閉じるためのチェックボックスとラベルのHTMLが格納されています。str_replace関数を使用して、本文コンテンツ内の目次の開始部分と終了部分を検索し、それを新しいコンテンツで置き換えています。これにより、目次の前にチェックボックスとラベルが挿入されることになります。- 最後に、変更後の本文コンテンツを返しています。
このコードの目的は、WordPressのページや投稿に表示される目次に、開閉機能を追加することです。ユーザーが目次をクリックすると、ページ内の見出しの一覧が表示されたり非表示になったりする仕組みが想定されています。
/* 閉じる状態 */
.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;
}目次を閉じている時の空白を消す
オリジナルのカスタマイズでは、目次を閉じている時に、変な余白が残ってしまうので、気持ち悪いです。
目次を閉じている時の不要なマージンを消したCSSが以下となります。
/* 閉じる状態 */
.toc-chk:not(:checked) + .p-toc__ttl + ol li,
.toc-chk:not(:checked) + .p-toc__ttl + ul li {
transition: 0.1s;
height:0px;
overflow: hidden;
line-height: 0;
margin:0;
}
.p-toc.-border .toc-chk:not(:checked)+.p-toc__ttl {
margin-bottom: 0em;
}
/* 開く状態 */
.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;
}PCのみ目次を開閉させるカスタマイズ
PCはサイドバーに追従目次があるのが一般的です。
記事の先頭に目次があるのは冗長だし、クリックされにくい現実もあります。
Snow Monkeyの公式サイトのように、記事内には目次を表示させていないサイトも結構あると思います。
スマホの時は目次の開閉のカスタマイズをせずに、PCの時のみ目次を開閉させるCSSをご紹介します。
/* dummyチェックボックス */
.toc-chk {
display:none;
}
@media (min-width: 960px){
/* 閉じる状態 */
.toc-chk:not(:checked) + .p-toc__ttl + ol li,
.toc-chk:not(:checked) + .p-toc__ttl + ul li {
transition: 0.1s;
height:0px;
overflow: hidden;
line-height: 0;
margin:0;
}
.p-toc.-border .toc-chk:not(:checked)+.p-toc__ttl {
margin-bottom: 0em;
}
/* 開く状態 */
.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;
}
/* 開くor閉じる */
.toc-chk:checked + .p-toc__ttl>.toc-ttl::after {
content: '[閉じる]';
}
.toc-ttl::after {
content: '[開く]';
cursor: pointer;
margin-left: .5em;
font-size: .8em;
}
}目次の開閉は必要なのか？
目次の開閉機能って、見出しが長くなった時に初めて気になる機能だと思います。
見出しの数が多くて、本文の先頭でスペースを取りすぎて見にくいな？と思ったりするのがきっかけだと思います。
利用者の立場で考えれば、目的をもって情報を探しに来る場合、目次を見て情報を探します。それ以外の場合は目次は見ません。
そう考えるならば、目次は最初は閉じていて必要な人だけ見れればいいように思います。
スマホの場合は、いちいち開くボタンをクリックするのは面倒なので、最初から開ている方がよいと思います。
まとめ
目次を最初から閉じておきたいという要望は旧SWELLフォーラムで出ていたようです。
そのあたりを受けてか、目次の開閉のカスタマイズ記事は検索すると出てきますが、不思議なことにその記事を書いているサイトの目次には開閉機能のカスタマイズは行われていません。
目次の開閉はカスタマイズしてみたけど、不要だったというのが大方の意見なのでしょうね。
ただ、Javascriptで実装された目次はCLS悪化の懸念が常にありますので、最初から閉じている目次にカスタマイズして高さを固定することでCLS悪化を避けられるようになります。
SWELLの目次はCLS悪化の懸念がある！という場合は今回の記事を参考にしてみてください。
コメント