WPの

~ワードプレス関連~

Table of Contents Plus の目次スクロールで固定ヘッダーに被る時の対処法

      2020/04/25

Table of Contents Plusと固定ヘッダーの両方を利用した時に生じるズレを解消させるには

WordPressプラグインのTable of Contents Plusは目次をクリックすると、その見出しまでスクロールしますが、固定ヘッダー(スティッキーヘッダー)を採用している場合、ページ内アンカー位置に固定ヘッダーが被さり、見出しが見えなくなります。
Table of Contents Plusのjavascriptを書き換えると簡単に修正できます。
Table of Contents Plus設定の
「スムーズ・スクロール効果を有効化」アンカーリンクにジャンプではなくスクロールする
が有効である必要があります。
その箇所は以下の通り。

WordPressインストールディレクトリ\wp-content\plugins\table-of-contents-plus

のフォルダをGET(ダウンロード)し、ローカルに保存します。
table-of-contents-plusフォルダ直下のfront.min.jsを書き換えます。
記述の下の方にあるこのような箇所。

smooth_scroll_offset:t("#wpadminbar").length>0&&t("#wpadminbar").is(":visible")?-30:0,

「 -30:0 」の-30は管理バーが表示されている時には、その高さ分マイナスしています。
0は管理バーが非表示の時の位置調整する為のピクセル数です。
つまり、固定ヘッダーがある場合には、さらにその分の高さを減算します。
固定ヘッダーの高さが仮に50の時には、

smooth_scroll_offset:t("#wpadminbar").length>0&&t("#wpadminbar").is(":visible")?-80:-50,

こうなります。
書き換えたら、保存してアップロードして下さい。

Table of Contents Plusのアップデートの際には上書きされてしまう可能性があるので注意が必要です。

 - 無料プラグイン