WordPressサイトで目次（Table of Contents）を自動生成するために、JavaScriptファイルであるtoc.jsを使用することが一般的です。しかし、toc.jsが正しく動作しない場合があります。その主な原因として、jQueryが正しく読み込まれていないことが考えられます。ここでは、この問題を解決する方法について解説します。
なぜjQueryの読み込み順序が重要なのか？
toc.jsは、jQueryライブラリに依存しているため、jQueryが先に読み込まれていないとエラーが発生し、正常に動作しません。jQueryは$やjQueryというシンボルを使用するため、これが利用可能な状態でなければtoc.jsは動作しないことになります。
解決方法：jQueryの読み込みを確認する
- WordPressテーマの
header.phpやfunctions.phpファイルを開き、jQueryが正しく読み込まれているか確認します。 - 読み込み順序を確認し、
toc.jsの前にjQueryが読み込まれるように設定します。 - jQueryを読み込むには、
functions.php内でwp_enqueue_script関数を使用します。例えば、以下のように記述します：
function enqueue_custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('toc-js', get_template_directory_uri() . '/js/toc.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
このコードでは、toc.jsの依存関係としてjQueryを指定しているため、必ず先にjQueryが読み込まれます。
トラブルシューティング：確認方法
開発者ツールを使用して、jQueryとtoc.jsの読み込み順を確認することもできます。Consoleタブでエラーが表示されていないかチェックし、jQuery is not definedといったエラーがあれば読み込み順を再確認しましょう。