Easy Table of Contents のスムーススクロールがうまく動かないのを治す手順

2024年1月11日

大東信仁（ものくろ）

WordPressノウハウ

WordPressのEasy Table of Contentsプラグインを使い、画面の右上に目次のタブを設置した。

ただ、問題は、スムーススクロールのJSがうまく機能しないトラブルに出会った。

それを治す手順は以下の通り。

アンカーリンクを連番に変更
JavaScriptのエラー対策のJavaScriptを読み込ませる
おまけ：固定ページでは動かす必要がない場合は、Plugin Load Filterプラグインで投稿記事のみプラグインを有効にする

アンカーリンクを連番に変更

Easy Table of Contentsプラグインが見出しごとに作るアンカーリンクは、見出しの日本語を利用する。おそらく英語圏だとアルファベットで問題ないのだろうけど、日本語の見出しだと、当然、日本語のリンクになるので、これを連番に変更する。

変更するには、functions.phpに以下のコードを追加するとOKだ。

add_filter('ez_toc_url_anchor_target', 'toc_anchor_change', 10, 2);

$my_toc_no = 0;

function toc_anchor_change($return, $heading ) {
	global $my_toc_no;
	$my_toc_no = $my_toc_no + 1;
	return "toc___".$my_toc_no;
}

参考記事はこちら

JavaScriptのエラー対策のJavaScriptを読み込ませる

アンカーリンクを連番に変えても、スムーススクロールがうまく動かない。で、色々と試行錯誤している中で、下の記事で紹介されているJavaScriptのコードを読ませたら、動くようになった。結果論だけど。

functions.phpに以下のコードを追加して、JSフォルダに配置した、コードを読み込ませる。

/**
 * Directory url of this plugin
 *
 * @var string
 */
define( 'MY_SNOW_MONKEY_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );

/**
 * Directory path of this plugin
 *
 * @var string
 */
define( 'MY_SNOW_MONKEY_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );

add_action('wp_enqueue_scripts', 'link_offset_enqueue_style_script');
function link_offset_enqueue_style_script()
{
	/* js読み込み これはEZ TOC 対策  */
	wp_enqueue_script(
		'msm_scripts',
		MY_SNOW_MONKEY_URL . '/js/link_offset.js',
		['jquery'],
		filemtime(MY_SNOW_MONKEY_PATH . '/js/link_offset.js'),
		true
	);
}

なお、MY_SNOW_MONKEY_URL と MY_SNOW_MONKEY_PATH の部分は、WordPressのテーマSnowMonkeyを愛用しており、my-snowmonkey.phpにコードを追記しているので、こんな記述になっている。パスの設定を適時変更してほしい。

下のコードはこんな感じ。

link_offset.js

jQuery(function($){
    var windowWidth = $(window).width();
    var headerHight = 100; 
    jQuery('a[href^=#]').click(function() {
    var speed = 1000;
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top-headerHight;
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
   });
});