【目次のカスタマイズ方法】サイドバー目次にハイライトを追加する方法

まずはウィジェットを開きましょう。

WordPressの管理画面から「外観」→「ウィジェット」と進みます。

続いて、目次を追加していきます。

ウィジェット一覧から「[SWELL]目次」を選択し、「追従サイドバー」にドラッグ&ドロップします。

以上でサイドバーに目次が表示されるようになります。

まずは追加するコードをコピーします。

function swell_toc_highlight() {
  echo <<< EOM
  <script>
  class toc_highlight {
    init(){
      this.elem = document.querySelectorAll('.widget_swell_index a');
      this.elem2 = document.querySelectorAll('.-modal a');
    }
    update(){
      if(this.elem === null) {
        return 0;
      } else {
        for (let i = 0; i < this.elem.length; i++) {
          const y = document.documentElement.clientHeight;
          const a = document.getElementById( this.elem[i].hash.slice(1) ).getBoundingClientRect().top;
          if( y > a ){
            this.elem[i].classList.add("current");this.elem2[i].classList.add("current");
              if ( i>0 ){
                this.elem[0].classList.remove("current");this.elem2[0].classList.remove("current");
                this.elem[i-1].classList.remove("current");this.elem2[i-1].classList.remove("current");
              }
          } else {
            this.elem[i].classList.remove("current");this.elem2[i].classList.remove("current");
          }
        }
      }
    }
  }
  var toc=new toc_highlight();
  window.addEventListener('DOMContentLoaded', function(e){ toc.init(); });
  window.addEventListener('scroll', function(e){ toc.update(); });  
  </script>
  EOM;
  }
add_action( 'wp_print_footer_scripts', 'swell_toc_highlight' );

こちらのコードをコピーしましょう。

右上の「Copy」を押すとクリップボードのコピーされます。

続いて、テーマファイルエディターを開きます。

WordPressの管理画面から「外観」→「テーマファイルエディター」と進みます。

続いて、コピーしたコードをfunctions.phpに貼り付けます。

編集するテーマが「SWELL CHILD」になっていることを確認してから貼り付けましょう。

テーマファイルから「テーマのための関数（functions.php）」を選択し、コードを貼り付けて「ファイルを更新」します。

※コードは26行目以降に貼り付けてください。

まずは、SiteGuardの管理ページアクセス制限を開きます。

WordPressの管理画面から「SiteGuard」→「管理ページのアクセス制限」と進みます。

続いて、制限をOFFに設定します。

画面のように制限を「OFF」に設定し、「変更を保存」をクリックします。

まずは以下のコードをコピーします。

a.p-toc__link.current {
  background-color: #ddffd6 !important;
}

続いて、コピーしたコードをスタイルシートに貼り付けます。

テーマファイルから「スタイルシート（style.css）」を選択し、コードを貼り付けて「ファイルを更新」します。

※コードは15行目以降に貼り付けてください。