前提・実現したいこと
WordPressのプラグインを自分で作っているのですが、ヒアドキュメントでJqueryが動作せず困っています。
テーマのfooter.phpに記述すると動作しますが、プラグインに記述して、どのサイトでも動作するようにしたいです。原因を調べていくつかの方法を試してみたのですが、どれも効果がなくお手上げ状態ですので、なにか解決の手がかりを提案していただけると嬉しいです。
発生している問題・エラーメッセージ
目次を表示するTOCというJqueryのプラグインを利用したいと思っていますが、Jqueryが動作していません。
該当のソースコード
一回目のコード
php
1//以下のmokuji関数でHTMLとJqueryを表示させようとしていますが、Jquery以外しかサイトに反映されません。 2function mokuji(){ 3 $mokuji_url = plugins_url(); 4 $mokuji = <<<MKJ 5 <div id="toc"></div> 6 <script src="$mokuji_url/my-plugin/js/toc.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 (function($){ 9 $('#toc').toc({ 10 'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定 11 'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ 12 return prefix+i; 13 }, 14 }); 15 })(jQuery); 16 </script> 17MKJ; 18return $mokuji; 19} 20 21 22 23 24 25//以下で投稿のみにもくじを表示しようとしています。位置などはCSSで変更する予定です。 26add_action( 'wp_head', 'my_plugin_head' ); 27function my_plugin_head() { 28 if(is_single()){ 29 $output = "<div class='my_plugin_wrap'>.mokuji().</div>"; 30 echo $output; 31 } 32}
二回目のコード
php
1//以下のmokuji関数で目次が書き出される部分のHTMLのみを表示します。 2function mokuji(){ 3 $mokuji_url = plugins_url(); 4 $mokuji = <<<MKJ 5 <div id="toc"></div> 6MKJ; 7return $mokuji; 8} 9 10 11 12 13 14//以下のjs_code関数とadd_actionでJavascriptの部分をheadに書き出そうとしています。 15function js_code() { 16?> 17 <script type="text/javascript"> 18 (function($){ 19 $('#toc').toc({ 20 'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定 21 'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ 22 return prefix+i; 23 }, 24 }); 25})(jQuery); 26 </script> 27<?php 28 } 29 add_action( 'wp_head', 'js_code', 10 ); 30?> 31 32 33 34 35 36//以下のjquery_my_plugin関数で、Jqueryを読み込みしています。 37function jquery_my_plugin(){ 38 wp_register_script( 'toc_script', plugins_url('js/toc.min.js', __FILE__), array('jquery')); 39 wp_enqueue_script( 'toc_script' ); 40} 41add_action('wp_head', 'jquery_my_plugin');
プラグインのフォルダの構成
my-plugin -my-plugin.php -js --toc.min.js
以下、追記です。
こちらはfooter.phpの</body>の直前に追加した内容です。これだと正しく目次が表示されます。
php
1<div id="toc"></div> 2<script src="https://example.com/wp-content/themes/Example/js/toc.min.js" type="text/javascript"></script> 3<script type="text/javascript"> 4(function($){ 5 $('#toc').toc({ 6 'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定 7 'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ 8 return prefix+i; 9 }, 10 }); 11})(jQuery); 12</script>
その後、また新たにいくつかの方法を試しました。まず、Jqueryの読み込みの方法を以下のようにしました。
PHP
1function load_scripts2(){ 2 wp_enqueue_script( 3 'toc2', 4 plugins_url('js/toc.js', __FILE__ ), 5 array( 'jquery' ), 6 filemtime( plugin_dir_path( __FILE__ ) . '/js/toc.js' ), 7 false 8 ); 9 } 10 add_action( 'wp_enqueue_scripts', 'load_scripts2' ); 11 12 function load_scripts(){ 13 wp_enqueue_script( 14 'toc', 15 plugins_url('js/toc.min.js', __FILE__ ), 16 array( 'jquery' ), 17 filemtime( plugin_dir_path( __FILE__ ) . '/js/toc.min.js' ), 18 false 19 ); 20 } 21 add_action( 'wp_enqueue_scripts', 'load_scripts' );
先程同様、開発ツールでも読み込まれていて、見ることができました。ですが、目次は表示されていません。この、footer.phpに書き込むのとPHPに書き込むので、何か違う点はあるのでしょうか?
2018/7/12 17:55 更に追記です。
footer.phpのコードを一つずつ消してどこの部分が読み込まれていないか確認したところ、以下の部分を削除すると表示されず、他の部分を削除しても読み込まれました。
PHP
1<script type="text/javascript"> 2(function($){ 3 $('#toc').toc({ 4 'selectors': 'h3', //目次として表示する要素のCSSセレクターを指定 5 'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ 6 return prefix+i; 7 }, 8 }); 9})(jQuery); 10</script>
試したこと
最初はヒアドキュメントに全て書き込んでいましたが、これではJqueryが読み込めなかったので、二回目のように分けて読み込みするようにしましたが、結果は変わりませんでした。
同じファイル構成で、小テーマのfooter.phpのbodyの最後に1つ目のヒアドキュメントの内容を記述すると、Jqueryが読み込むことができました。
補足情報
サイドバーに表示するのにアクションフックのwp_headを使うのが適切なのかわからず、、一応サイドバーには枠が表示されているという状況です。何かうまく動作する手がかりなどあれば教えていただけると嬉しいです。よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/12 03:49