时间戳

首页 > 解决方案 > 当调用 javasript 文件在 Wordpress 中不起作用时

javascript - 当调用 javasript 文件在 Wordpress 中不起作用时

问题描述

我调用了名为“main.js”的 javascript 文件，但它不起作用。我检查了 chrome 中的文件，但它是空的。你能帮我吗，拜托

这是下面的javascript文件

$(document).ready(function(){
    alert('hello');
});

这是函数文件

<?php 
    function add_style(){
        wp_enqueue_style('bootstrap-css', "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");
        wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
        wp_enqueue_style('main-css', get_template_directory_uri() . '/css/main.css');
    }

    function add_script(){
        wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.5.1.min.js');
        wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'));
        wp_enqueue_script('html5shiv', get_template_directory_uri() . '/js/html5shiv.js');
        wp_enqueue_script('html5shiv', get_template_directory_uri() . '/js/html5shiv.js');
        wp_script_add_data('html5shiv', 'conditional', 'lt IE 9');
        wp_enqueue_script('respond', get_template_directory_uri() . '/js/respond.min.js');
        wp_script_add_data('respond', 'conditional', 'lt IE 9');
        wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js');
    }
    function add_navbar(){

        register_nav_menus(array(
            'navbar-menu' => 'navbar menu',
            'footer-menu' => 'footer menu'
        ));
    }
    function bootstrap_menu(){
        wp_nav_menu(array(
            'theme_location' => 'navbar-menu',
            'menu_class' => 'navbar-nav mr-auto'
        ));
    }
    add_action('wp_enqueue_scripts', 'add_style');
    add_action('wp_enqueue_scripts', 'add_script');
    add_action('init', 'add_navbar');

标签： javascriptwordpress

解决方案

  1. 您不需要将 jQuery 加入队列，它已经添加到 WordPress 中。您可以在WordPress 文档中找到 WordPress 中包含的库列表。
  1. $在将 jQuery 与 WordPress 一起使用时，默认情况下不支持。
    您可以使用以下方法之一$与 jQuery一起使用
(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);
})( jQuery );

或者

jQuery(document).ready(function( $ ) {
    // $ Works! You can test it with next line if you like
    // console.log($);
});

推荐阅读