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にコードを追記しているので、こんな記述になっている。パスの設定を適時変更してほしい。
下のコードはこんな感じ。
JS
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;
});
});
おまけ:Plugin Load Filterプラグインで投稿記事のみ有効にする
SnowMonkey Forms で作ったお問い合わせを配置したページで、エラーが発生したので、固定ページでは、Easy Table of Contents プラグインを読み込ませないように設定した。
設定は、Plugin Load Filterプラグインを利用すると、管理画面から設定できる。