发表新帖
发表新帖

How do I add a simple jQuery script to WordPress?

后端 未结
关注
18 1707
心在旅途
心在旅途 2020-11-22 16:53

I read the Codex and a few blog posts about using jQuery in WordPress, and its very frustrating. I\'ve got as far as loading jQuery in functions.php file, but a

相关标签:
18条回答
  • 滥情空心
    2020-11-22 17:43

    Beside putting the script in through functions you can "just" include a link ( a link rel tag that is) in the header, the footer, in any template, where ever.

    No. You should never just add a link to an external script like this in WordPress. Enqueuing them through the functions.php file ensures that scripts are loaded in the correct order.

    Failure to enqueue them may result in your script not working, although it is written correctly.

    0 讨论(0)
  • 说谎
    2020-11-22 17:44

    I know what you mean about the tutorials. Here's how I do it:

    First you need to write your script. In your theme folder create a folder called something like 'js'. Create a file in that folder for your javascript. E.g. your-script.js. Add your jQuery script to that file (you don't need <script> tags in a .js file).

    Here is an example of how your jQuery script (in wp-content/themes/your-theme/js/your-scrript.js) might look:

    jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

    Notice that I use jQuery and not $ at the start of the function.

    Ok, now open your theme's functions.php file. You'll want to use the wp_enqueue_script() function so that you can add your script whilst also telling WordPress that it relies on jQuery. Here's how to do that:

    add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

    Assuming that your theme has wp_head and wp_footer in the right places, this should work. Let me know if you need any more help.

    WordPress questions can be asked over at WordPress Answers.

    0 讨论(0)
  • 日久生厌
    2020-11-22 17:47

    Answer from here: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

    Despite the fact WordPress has been around for a while, and the method of adding scripts to themes and plugins has been the same for years, there is still some confusion around how exactly you’re supposed to add scripts. So let’s clear it up.

    Since jQuery is still the most commonly used Javascript framework, let’s take a look at how you can add a simple script to your theme or plugin.

    jQuery’s Compatibility Mode

    Before we start attaching scripts to WordPress, let’s look at jQuery’s compatibility mode. WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.

    What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. Take a look at the code below to see what I mean:

    0 讨论(0)
  • 死守一世寂寞
    2020-11-22 17:48

    **#Method 1:**Try to put your jquery code in a separate js file.

    Now register that script in functions.php file.

    function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

    Now you are done.

    Registering script in functions has it benefits as it comes in <head> section when page loads thus it is a part of header.php always. So you don't have to repeat your code each time you write a new html content.

    #Method 2: put the script code inside the page body under <script> tag. Then you don't have to register it in functions.

    0 讨论(0)
  • 北恋
    2020-11-22 17:48

    As you mentioned, the simple way inside functions.php without using enqueue is this one:

    add_action('wp_footer', 'customJsScript');
function customJsScript() {
  echo '
  <script>
  jQuery(function(){
    console.log("test");
  });
  </script>
  ';
}

    As you see, you use the wp_footer action to inject the code.

    But you may prefer to put directly the code inside header.php or footer.php if is a code that will be inserted all-over WordPress

    0 讨论(0)
  • 抹茶落季
    2020-11-22 17:51

    You can use WordPress predefined function to add script file to WordPress plugin.

    wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

    Look at the post which helps you to understand that how easily you can implement jQuery and CSS in WordPress plugin.

    0 讨论(0)
 看不清?
提交回复
热议问题