別のjavascriptファイルmobile-menu.jsをWordpressテーマにロードしようとしています。コンソールを見ると、「jQueryは定義されていません。」と表示されます。スクリプトファイルを正しくキューに入れました。
HTMLファイル:
<a href="#" id="menu-icon"></a> <!--this line wasn't here originally-->
<div id="switchmenu"><!--switchmenu begin-->
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div><!--switchmenu end-->
functions.phpファイル:
function lapetitefrog_scripts() {
wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() );
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );
mobile-menu.jsファイル:
jQuery(document).ready(function($) {
$('#menu-icon').click(function() {
$('#switchmenu').slideToggle("fast");
});
});
スクリプトをキューに入れる前にwp_enqueue_script('jquery');
を追加します。
まず、jqueryファイルがヘッダーに含まれていることを確認し、ファイルにjQueryが必要であることを確認します
wp_enqueue_script(
'lapetitefrog-mobile-menu',
get_template_directory_uri() . '/js/mobile-menu.js',
array('jquery'),
'1.0',
true
);
次に、次のようにjavascriptファイルを開始する必要があります。
(function($) {
$(document).ready(function() {
.......
});
})(jQuery);
OR
// Use jQuery in place of $
jQuery(document).ready(function() {
.....
});
あなたが試すことができます:
最初にJqueryをエンキューします。
wp_enqueue_script('jquery');
そして、3番目の引数にJQuery依存関係で後者のスクリプトをエンキューします。つまり、array('jquery')
はほとんどの人が忘れていることです。
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );
WordpressにはデフォルトでjQueryが付属しています
// Adds jQuery
add_action('init', 'childoftwentyeleven_down');
function childoftwentyeleven_down() {
// register your script location, dependencies and version
wp_register_script('down',
get_stylesheet_directory_uri() . '/js/down.js',
array('jquery') );
// enqueue the script
wp_enqueue_script('down');
}