WordPressテーマ「スワロー」に目次を追加しよう！【プラグイン不要】

こんにちは、かがみです。

昨日（2月1日）Googleアドセンスに申し込みをしまして、その直後に日課の筋トレを始めたんですが、審査結果が気になって気になって集中できませんでした笑

まぁ、結果は最長で2週間くらいかかったという話も聞くので、ここは気長にカスタマイズや記事を書いてブログ運営を楽しんでいきたいと思います。

ところで、かがみ？このブログ、記事に目次がないことに気が付いちゃった……

うん、目次は必要だね！

目次があると最初に記事の内容がパっと見で分かるのと、あとで見返すときに目的の場所にすぐ飛べて便利なので、いずれは入れないとって思ってました。

ただ、僕が使っているWordPressテーマ「スワロー」には、見たところ標準で目次のショートコードが搭載されていません。

ちょっと調べたら以下のようなプラグインがあるので簡単に追加することはできそうです。

主な目次プラグイン

・Easy Table of Contents
・Table of Contents Plus

でも、プラグインはたくさん入れるとサイトが重くなってしまい、Googleからの評価も悪くなってしまうらしいので、今回は目次を自作してみようと思います！

この記事で紹介するコードは、WordPressテーマ「スワロー」で正常な動作を確認しています。
別のテーマで使用される際は、念のためバックアップを取ってからご利用ください。

CONTENTS［ hide ］

01｜目次をHTMLとCSSで作成しよう
・HTMLの作成
・CSSで見た目を整える
・JavaScriptで目次を開閉できるようにする
02｜最後に

目次をHTMLとCSSで作成しよう

それでは早速、目次の見た目をHTMLとCSSでコーディングしていくのですが、その前に子テーマの導入をおすすめします！

今から説明するCSSやJavaScriptを親テーマに直接追加すると、親テーマがアップデートされた時に追加した内容が消えてしまうんです。

そこで子テーマを導入すると、親テーマのアップデートの影響を受けないので、安心してカスタマイズすることができます。

詳しくは下記の記事も併せてご覧ください。

>>WordPressに子テーマを追加してCSSでカスタマイズしてみよう！

>>WordPressの子テーマからJavaScriptファイルを読み込む方法

HTMLの作成

まず大枠、タイトルとhideの文字を書きます。
hideのaタグのhrefは#のままで大丈夫です！


	
		<div class="contents-list">
		  <p class="title">
		    CONTENTS［ <a href="#" class="toggleBtn">hide</a> ］
		  </p>
		</div>

次に、クリックして目的の見出しまで飛べるようにページ内リンクの部分を追加します。
<ul class=”list”>～</ul>で囲った部分ですね。


	
		<div class="contents-list">
		  <p class="title">
		    CONTENTS［ <a href="#" class="toggleBtn">hide</a> ］
		  </p>
		  <ul class="list">
		    <li><a href="#contents-1">01｜ H2見出し</a></li>
		      <li class="indent"><a href="#contents-2">・H3見出し</a></li>
		      <li class="indent"><a href="#contents-3">・H3見出し</a></li>
		    <li><a href="#contents-4">02｜ H2見出し</a></li>
		      <li class="indent"><a href="#contents-5">・H3見出し</a></li>
		      <li class="indent"><a href="#contents-6">・H3見出し</a></li>
		    <li><a href="#contents-7">03｜ まとめ</a></li>
		  </ul>
		</div>
		
		<h2><a id="contents-1">H2見出し</a></h2>
		<h3><a id="contents-2">H3見出し</a></h3>

ページ内リンクは上の赤色と水色の行のように、目次リンクのhrefと飛び先のidをそれぞれ同じ名前にしてください。こうすることでその場所までページ内リンクで飛ぶことができます。

CSSで見た目を整える

HTMLができたので、次はCSSで見た目を整えていきましょう！
当ブログで使用している目次と同じデザインのCSSになります。

CSSを編集する際は、念のためバックアップを取ることをおすすめします！
また、親テーマのCSSを編集すると、テーマの更新があった際にカスタマイズしたCSSが消えてしまうので、「スワロー」では子テーマの使用が推奨されています。


	
		.contents-list {
		    width: 100%;
		    padding: 25px;
		    background: #FFF; ※背景の色
		    border: 1px solid #ccc; ※枠線の色
		}

		.contents-list a {
		    color: #5cbfc3; ※リンクの色
		    text-decoration: none;
		    transition: all 500ms ease-out;
		}

		.contents-list a:hover {
		    color: #c1f3f5; ※リンクにホバーした時の色
		    text-decoration: underline;
		}

		.contents-list .title {
		    margin: 0 0 25px;
		    padding: 0;
		    font-size: 18px;
		    line-height: 1;
		    text-align: center;
		}

		.contents-list.hide .title {
		    margin: 0;
		}

		.contents-list ul.list {
		    margin: 0;
		    padding: 0;
		    list-style-type: none;
		    transition: all 300ms ease-out;
		}

		.contents-list.show ul.list {
		    height: auto;
		    opacity: 1;
		}

		.contents-list.hide ul.list {
		    height: 0;
		    opacity: 0;
		    overflow: hidden;
		}

		.contents-list ul.list li {
		    margin: 0 0 20px;
		    padding: 0;
		    font-size: 18px;
		    line-height: 1;
		}

		.contents-list ul.list li:last-child {
		    margin: 0;
		}

		.contents-list ul.list li.indent {
		    padding: 0 0 0 30px;
		    font-size: 16px;
		}

		.contents-list ul.list li:before {
		    display: none;
		}

※印で書いた箇所のカラーを変更すれば、好みのカラーにすることができるのでお試しください＾＾

また最後の赤字で書いた.contents-list ul.list li:beforeのセレクタですが、「スワロー」だと何故かリストの横に●が自動で入ってしまうので、display: noneで要素を消しています。
※「スワロー」以外のテーマでは必要ないかもしれません。

さて、これで下のような目次のデザインが完成しました。
これでとりあえずはページ内リンクを設定すれば目次として使うことができます♪

CONTENTS［ hide ］

しかしこのままでは［ hide ］で目次を閉じることができません。
ここは動的な処理が必要になりますので、JavaScriptでプログラミングしていきます。

JavaScriptで目次を開閉できるようにする

下記がプログラミングしたソースコードになります。


	
		const contentsList = function () {
		
		    const body = document.querySelector( 'body' ),
		          container = document.querySelector( '.contents-list' );
		
		    if ( body.classList.contains( 'single' ) === true && container !== null ) {
		
		        const btn = document.querySelector( '.toggleBtn' ),
		              list = document.querySelector( '.contents-list ul.list' );
		        let listH = list.clientHeight;
		
		        btn.addEventListener( 'click', function ( e ) {
		
		            e.preventDefault();
		            container.classList.remove( 'show' );
		            container.classList.remove( 'hide' );
		            if( listH === 0 ) {
		                container.classList.add( 'show' );
		                btn.textContent = 'hide';
		            } else {
		                container.classList.add( 'hide' );
		                btn.textContent = 'show';
		            }
		            listH = list.clientHeight;
		
		        }, false );
		    }
		};
		contentsList();

このコードでは、［ hide ］ボタンを押したとき大枠の.contents-listに（hideクラス）を付与し、heightを0にすることで目次を閉じる、ということをやっています。
また開閉の際は［ hide ］⇔［ show ］にテキストを書き換えています。

ということで、完成しました！
実際の動作は、ページTOPの目次をご確認ください♪

やっぱり、目次があると使いやすい～！