Блог

У меня есть файл js с именем «main.js» и я поставил его в очередь, используя wp_enqueue_script в function.php файл. Этот файл загружается на мою страницу-{slug}.php, но функции в нем вообще не выполняются.

В function.php файл:

 function df_enqueue_scripts() {

    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array(), '1.0', true );
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/src/library/js/bootstrap.min.js', array( 'jquery' ), '5.6', true );

}

// Register the df_enqueue_scripts with wp_enqueue_scripts hook.
add_action( 'wp_enqueue_scripts', 'df_enqueue_scripts' );
 

страница-{slug}.php файл:

 <?php

get_header();
?>

<button type="button" id="ad-button">Ad</button>
<button type="button" id="mm-button">MM</button>
<button type="button" id="photo-button">Photography</button>
<div id="display-photo"></div>
<div id="display-mm"></div>
<div id="display-ad"></div>

<?php

get_footer();
 

main.js файл:

 $( '#photo-button' ).on( 'click',
function () {
    $( '#display-photo' ).html("Hello <b>world!</b>");
}
);
 

Короче говоря, я пишу все, что в main.js файл, изменения, которых я ожидаю, не происходят или не отражаются на моей странице-{slug}.php файл.

Я думаю, проблема с неправильным использованием jQuery. Вероятно, обертывание функции с помощью jQuery позволяет использовать переменную $ и может решить проблему

 jQuery(function($){
        $( '#photo-button' ).on( 'click',
            function () {
                $( '#display-photo' ).html("Hello <b>world!</b>");
            }
        );
    })
 

Вторая необходимая вещь-установить jQuery в качестве зависимости для
вашего сценария и обновить версию сценария до 1.1.

 wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array( 'jquery' ), '1.1', true );