PHPでJqueryが動作せず困っています。

Question

前提・実現したいこと

WordPressのプラグインを自分で作っているのですが、ヒアドキュメントでJqueryが動作せず困っています。
テーマのfooter.phpに記述すると動作しますが、プラグインに記述して、どのサイトでも動作するようにしたいです。原因を調べていくつかの方法を試してみたのですが、どれも効果がなくお手上げ状態ですので、なにか解決の手がかりを提案していただけると嬉しいです。

発生している問題・エラーメッセージ

目次を表示するTOCというJqueryのプラグインを利用したいと思っていますが、Jqueryが動作していません。

該当のソースコード

一回目のコード

//以下のmokuji関数でHTMLとJqueryを表示させようとしていますが、Jquery以外しかサイトに反映されません。
function mokuji(){
    $mokuji_url = plugins_url();
    $mokuji = <<<MKJ
    <div id="toc"></div>
    <script src="$mokuji_url/my-plugin/js/toc.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    (function($){
      $('#toc').toc({
        'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定
        'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
            return prefix+i;
        },
      });
    })(jQuery);
    </script>
MKJ;
return $mokuji;
}





//以下で投稿のみにもくじを表示しようとしています。位置などはCSSで変更する予定です。
add_action( 'wp_head', 'my_plugin_head' );
function my_plugin_head() {
    if(is_single()){
	$output = "<div class='my_plugin_wrap'>.mokuji().</div>";
    echo $output;
    }
}

二回目のコード

//以下のmokuji関数で目次が書き出される部分のHTMLのみを表示します。
function mokuji(){
    $mokuji_url = plugins_url();
    $mokuji = <<<MKJ
    <div id="toc"></div>
MKJ;
return $mokuji;
}





//以下のjs_code関数とadd_actionでJavascriptの部分をheadに書き出そうとしています。
function js_code() {
?>
        <script type="text/javascript">
        (function($){
            $('#toc').toc({
            'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定
            'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
    return prefix+i;
    },
  });
})(jQuery);
        </script>
<?php
    }
    add_action( 'wp_head', 'js_code', 10 );
?>





//以下のjquery_my_plugin関数で、Jqueryを読み込みしています。
function jquery_my_plugin(){
    wp_register_script( 'toc_script', plugins_url('js/toc.min.js', __FILE__), array('jquery'));
    wp_enqueue_script( 'toc_script' );
}
add_action('wp_head', 'jquery_my_plugin');

プラグインのフォルダの構成

my-plugin
-my-plugin.php
-js
--toc.min.js

以下、追記です。
こちらはfooter.phpの</body>の直前に追加した内容です。これだと正しく目次が表示されます。

<div id="toc"></div>
<script src="https://example.com/wp-content/themes/Example/js/toc.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
  $('#toc').toc({
    'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定
    'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
        return prefix+i;
    },
  });
})(jQuery);
</script>

その後、また新たにいくつかの方法を試しました。まず、Jqueryの読み込みの方法を以下のようにしました。

function load_scripts2(){ 
    wp_enqueue_script(
      'toc2',
      plugins_url('js/toc.js', __FILE__ ),
      array( 'jquery' ),
      filemtime( plugin_dir_path( __FILE__ ) . '/js/toc.js' ),
      false
    );
  }
  add_action( 'wp_enqueue_scripts', 'load_scripts2' );

   function load_scripts(){ 
    wp_enqueue_script(
      'toc',
      plugins_url('js/toc.min.js', __FILE__ ),
      array( 'jquery' ),
      filemtime( plugin_dir_path( __FILE__ ) . '/js/toc.min.js' ),
      false
    );
  }
  add_action( 'wp_enqueue_scripts', 'load_scripts' );

先程同様、開発ツールでも読み込まれていて、見ることができました。ですが、目次は表示されていません。この、footer.phpに書き込むのとPHPに書き込むので、何か違う点はあるのでしょうか？

2018/7/12 17:55　更に追記です。
footer.phpのコードを一つずつ消してどこの部分が読み込まれていないか確認したところ、以下の部分を削除すると表示されず、他の部分を削除しても読み込まれました。

<script type="text/javascript">
(function($){
  $('#toc').toc({
    'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定
    'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
        return prefix+i;
    },
  });
})(jQuery);
</script>

試したこと

最初はヒアドキュメントに全て書き込んでいましたが、これではJqueryが読み込めなかったので、二回目のように分けて読み込みするようにしましたが、結果は変わりませんでした。
同じファイル構成で、小テーマのfooter.phpのbodyの最後に1つ目のヒアドキュメントの内容を記述すると、Jqueryが読み込むことができました。

補足情報

サイドバーに表示するのにアクションフックのwp_headを使うのが適切なのかわからず、、一応サイドバーには枠が表示されているという状況です。何かうまく動作する手がかりなどあれば教えていただけると嬉しいです。よろしくお願い致します。

Answer 1

$mokuji_url/my-plugin/js/toc.min.js

で書かれているパスはユーザーから直接参照できるパスなのでしょうか？
ブラウザ開発ツールでネットワークから
toc.min.jsが200で読まれているか確認してみてください

Comments

[mio_murata]

ご回答ありがとうございます。
200というのがわからないのですが、ブラウザ開発ツールで確認すると、
<script src="https://example.com/wp-content/plugins/my-plugin/js/toc.min.js" type="text/javascript"></script>
このように表示されていて、URLを打ち込むとJSファイルが表示されました。