All geek questions in one place

Include jQuery in a Wordpress template

I have a custom slide show that I used jQuery for development. It works fine on my local machine, but when I try to transfer it to the wordpress server, it just won't work ...

This is how I link javascript files:

<?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/jQuery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/JQueryUI.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/slider.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/gallery.js"></script>

And I also checked that javascript is working (e.g. as a warning). But everything related to jQuery does not work.

Help is desperately needed. Any hints or links to relevant tutorials will do. Thanks in advance!

+4
source share
2 answers

You should use wp_enqueue_script() in your functions.php file, not header.php . (and you add jQuery twice)

functions.php:

 function my_scripts_method() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/js/JQueryUI.js', ); wp_enqueue_script( 'slider', get_template_directory_uri() . '/js/slider.js' ); wp_enqueue_script( 'gallery', get_template_directory_uri() . '/js/gallery.js' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

You should also notice that WordPress enqueues jQuery is in noConflict mode , so you will need noConflict wrappers to use $ :

 jQuery(document).ready(function($) { // your code here });

Then you just call wp_head() and WordPress will automatically add these javascripts to your page.

+6
source

As you can see here: / wp head function reference , in the example In the twenty tag, they added Note:

 /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */

it just says that you need to put the wp_head(); function wp_head(); just for closing <head></head> .

try putting this line:

 <?php wp_head(); ?>

as the last line before closing <head> on your site.

and another problem that I saw is that you forgot to end php lines with ;

it is very important!

with the code you provided here, change it like this:

 <?php wp_enqueue_script("jquery"); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jQuery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/JQueryUI.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slider.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/gallery.js"></script> <?php wp_head(); ?>
+1
source

Source: https://habr.com/ru/post/1484995/

More articles:


All Articles