現在、自分の複数のサイトで使える、目次を表示するプラグインを作ってみようと試行錯誤しているのですが、プラグインのPHPファイルにJqueryをよみこませるところで躓いています。
以下は、目次のjqueryプラグイン、TOCを呼び出すためのtoc.jsの内容です。
javascript
1(function($){ 2 $('#toc').toc({ 3 'selectors': 'h3', 4 'anchorName': function(i, heading, prefix) { 5return prefix+i; 6}, 7}); 8})(jQuery);
これは目次を表示するJavascriptプラグインのTOCを利用するコードなのですが、これだけがサイトに反映されていないという状況です。
Chromeの開発ツールで、Sourcesを見ると、確かに上のコードが記述された.jsファイルが確認できるのですが、動作はしていません。
(前回質問させていただいた内容で、TOCのJqueryファイルは読み込まれている事を確認しました。)
以下は、toc.jsを呼び出しているつもりの、プラグインPHPファイル、my-plugin.phpです。
PHP
1function load_scripts2(){ 2 wp_enqueue_script( 3 'toc2', 4 plugins_url('js/toc.js', __FILE__ ), 5 array( 'toc' ), //jqueryプラグインのtoc.min.jsというファイルを先に読み込ませているつもりです。 6 filemtime( plugin_dir_path( __FILE__ ) . '/js/toc.js' ), 7 false 8 ); 9 } 10 add_action( 'wp_enqueue_scripts', 'load_scripts2' );
確かに呼び出されてはいるのですが、正常に動作せず、実行されていないようです。因みに、以下のように、小テーマのfooter.phpのbodyタグの最後に 記述すると、正しく反映されます。(以下のコードのタグを一つずつ削除して、toc.jsが原因で表示されていないと判断しました。)
HTML
1<div id="toc"></div> <!-- このDIVの中に目次が表示されます。 --> 2<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/toc.min.js" type="text/javascript"></script><!-- この行では、配布されているTOCの、toc.min.jsを読み込んでいます。 --> 3<!-- これより以下が、上のtoc.jsの部分になります。--> 4<script type="text/javascript"> 5(function($){ 6 $('#toc').toc({ 7 'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定 8 'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ 9 return prefix+i; 10 }, 11 }); 12})(jQuery); 13</script>
色んな事を試したのですが、お手上げ状態です。何か少しでも手がかりがありましたら、助言いただけると嬉しいです。よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/12 12:38
2018/07/12 12:41
2018/07/12 13:04