web-dev-qa-db-ja.com

フッターにJavaScriptをロードする際の問題

私は私が以下のスクリプトをロードしたところに小さなプラグインを書きました

wp_enqueue_script('jquery', plugins_url('/js/jquery.min.js', __FILE__),'','1.7',true);
wp_enqueue_script('new-cycle', plugins_url('/js/cycle.js', __FILE__),array( 'jquery' ),'1.0',true);
wp_enqueue_script('new-jcarousellite', plugins_url('/js/jcarousellite.js', __FILE__),array( 'jquery' ),'1.0',true);
wp_enqueue_script('new-fancybox', plugins_url('/js/fancybox.js', __FILE__),array( 'jquery' ),'1.0',true);

そして私は（オプションとpost_metaテーブルからロードされたパラメータ/オプションで）サイクルとファンシーボックス機能を呼び出すためのJavaScriptコードも持っています

function front_js(){ ?>   
<script>
    $(document).ready(function(){
      $(".video-popup").fancybox();
      $(".video_msgs").cycle({speed:'<?php echo get_option("cycle_speed");?>'});
    });
    </script>
<?php }

このコードはadd_action('wp_footer', 'front_js');を使ってフッターに追加されます

今私のJavascriptコードはすべての必要なスクリプトの前にロードされます。

<script>
$(document).ready(function(){
  $(".video-popup").fancybox();
  $(".video_msgs").cycle();
});
</script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/twentyfifteen/js/functions.js?ver=20141212'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/cycle.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/jcarousellite.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/fancybox.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/counter.js?ver=1.0'></script>

そしてエラー$('...').fancybox()は関数ではない

この関数が書かれているfancybox.jsファイルの前にコードがロードされているからだと思います。 print_scripts関数を使おうとしましたが、これを使用しないことをお勧めします。また、wp_enqueue_scriptはカスタムJavaScriptコードではなくファイルでのみ機能します。

必要なファイルをロードした後にカスタムコードをロードする方法、またはこの種の問題を解決する方法はありますか。

すべてのファイルをヘッダーにロードすればうまくいきますが、ページロード時間が長くなり、これもまた良い方法ではありません。

pluginsjqueryjavascriptwp-enqueue-scriptfooter
1
Vikram Singh

add_action('wp_footer', 'front_js', 99);を使用してフッターにコードを追加してみてください。99は関数が実行される順序を指定します。今すぐそれはあなたのスクリプトがロードされた後に実行されるべきです。

1
Stefan

コードを機能させてwp_footerにフックする代わりに。

別のJSファイルをプラグインフォルダに格納し、それを他のスクリプトと同じようにキューに入れることができます。

OR

<?php
function front_js() {
  if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script type="text/javascript">

$(document).ready(function(){
      $(".video-popup").fancybox();
      $(".video_msgs").cycle();
    });

</script>
<?php
  }
}
add_action( 'wp_footer', 'front_js' );
?>
0
Abhishek Deshpande