在WordPress中找不到jQuery文件

Question

I linked jquery file in functions.php, but doesn't work Here is code in functions.php

add_action("wp_footer","js_scripts");
function js_scripts()
{
    wp_enqueue_script("jquery",get_template_directory_uri()."/jquery.js");
    wp_enqueue_script("f",get_template_directory_uri()."/f.js");
}

Here is code in f.js

$(document).ready(function(){
    alert("ready good");
});

Answer 1

You need to make sure you have uploaded your f.js file in /wp-content/themes/youractivetheme/f.js

And also don't need to upload jquery.js because it already inherits and include from wp-includes.

You can use this method instead of get_template_directory_uri()

get_stylesheet_directory_uri();

Or

function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/f.js', array( 'jquery' ) ); } 
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method', 100 );

you add like this and define priority hight so it would be load at last.

Answer 2

Firstly, ensure you have WordPress loading onto your template.

In your head file, ensure you have this loaded in not in functions file

<?php wp_enqueue_script("jquery"); ?>

Next, WordPress has to use noConflict mode or use the base jQuery call instead of $.

Source

Answer 3

There are few problems with your code...

First of all , you should not enqueue scripts using wp_footer hook. It's way to late.

wp_footer is an action hook that is run during wp_footer() function call. And printing footer scripts is an action assigned to that hook. It means that to print any scripts in there, you have to enqueue them before they should get printed.

The good practice is to enqueue scripts using wp_enqueue_scripts hook. And if you want to enqueue it for footer, then there's a param telling WP if given script should be placed in header or footer. So after changing this, your code would look like this:

function js_scripts() {
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/jquery.js', array(), null, true );
    wp_enqueue_script( 'f', get_template_directory_uri() . '/f.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'js_scripts' );

Another thing is that WordPress already has its own jQuery file and you should always use that one. All themes and plugins assume that this is the version of jQuery that is used on the site - so enqueueing your own jQuery file may cause a lot of conflicts. And you don't have to enqueue it - all you need to do is to use script dependency mechanism:

function js_scripts() {
    wp_enqueue_script( 'f', get_template_directory_uri() . '/f.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'js_scripts' );

And last thing ... WordPress uses jQuery in no conflict mode. It means that you can't use $ in your scripts, because no such global variable is defined. You have to use jQuery instead. You may make your life easier by wrapping all your code with a function. So your JS file should look like this:

jQuery(function ($) {
    // you can use $ inside this function

    $(document).ready(function(){
        alert("ready good");
    });
});

Answer 4

Jquery is already in your WordPress, you just enqueue it into your file. The way you can use it as given below :

function theme_enqueue_scripts() {
wp_enqueue_script( 'f-script', get_stylesheet_directory_uri() . '/f.js', array( 'jquery' ) ); } 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts', 10 );

So the f.js file will enqueue the jquery before it loads as 'jquery' has given as dependency of that handle.

Hope it will work for you.