Comment insérer du code jQuery dans le thème Avada?

Je veux insérer un code jQuery simple dans mon thème WordPress (Avada), quelque chose comme ceci :

$(function() { $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }}); $( "#accordion" ).accordion(); var btn = $('#accordion li a'); var wrapper = $('#accordion li'); $(btn).on('click', function() { $(btn).removeClass('active'); $(btn).parent().find('.addon').removeClass('fadein'); $(this).addClass('active'); $(this).parent().find('.addon').addClass('fadein'); }); });

Dans une page, mais ça ne marche pas.

J’ai essayé d’utiliser différentes classes pour tous les éléments HTML et d’insérer mon code avec un plugin nommé “CSS & Javascript Tool box”, mais cela ne m’a pas aidé.

Tout d’abord, n’utilisez aucun plugin CSS / JS, c’est une très mauvaise idée, car de tels plugins sont généralement la cause de problèmes de sécurité majeurs et ne fournissent aucune bonne maintenabilité.

Voici la bonne façon d’append du Javascript dans WordPress:

Dans votre thème enfant (parce que vous avez créé un thème enfant dans Avada afin de pouvoir le mettre à jour à tout moment, non? :)), ajoutez la fonction suivante dans votre fichier functions.php :

 function my_theme_scripts() { wp_register_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', array('jquery'), '1.11.2', true); wp_enqueue_script('jquery-ui'); wp_register_script('tabs-scripts', get_stylesheet_directory_uri() . '/js/tabs-script.js', array('jquery', 'jquery-ui'), '1.0', true); wp_enqueue_script('tabs-scripts'); wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'); } add_action('wp_enqueue_scripts', 'my_theme_scripts');

Cela indiquera à WordPress d’append la balise de script appropriée pour créer un lien vers tabs-scripts.js situé dans le répertoire de votre thème js au pied de page de chaque page, ainsi que pour charger la dépendance de l’interface utilisateur jQuery. Voir la documentation wp_register_script pour référence.

Ensuite, créez votre fichier tabs-scripts.js dans votre répertoire js et ajoutez le script suivant:

 jQuery(document).ready(function($) { if($('#tabs').length && $('#accordion').length) { $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }}); $( "#accordion" ).accordion(); var btn = $('#accordion li a'); var wrapper = $('#accordion li'); $(btn).on('click', function() { $(btn).removeClass('active'); $(btn).parent().find('.addon').removeClass('fadein'); $(this).addClass('active'); $(this).parent().find('.addon').addClass('fadein'); }); } }

Cela garantira deux choses:

Ce $ est disponible et référence à jQuery
Et les éléments DOM appropriés #tabs et #accordion trouvent dans la page avant d’exécuter le script.

Si cela ne fonctionne pas, vérifiez que le script est ajouté à la page et que le ($('#tabs').length && $('#accordion').length)) est rempli.

Vous utilisez le thème Avada, allez dans options du thème-> Avancé-> Champs de code (suivi, etc.), vous verrez trois zones de texte pour lesquelles vous devez append votre code dans la deuxième zone (Espace avant). Placez le code à l’intérieur des balises. Je joins la capture d’écran. entrez la description de l'image ici

Ajoutez simplement votre code de script à votre fichier functions.php . Cela permet de centraliser votre code de script sans trop de travail. Votre seule condition est que vous ayez défini JQuery avant de consumr le script.

Il y a plusieurs façons de résoudre ce que vous demandez, mais j’ai tendance à vouloir obtenir les informations de la source. J’espère que le lien ci-dessous aidera.

https://codex.wordpress.org/Using_Javascript