Comment faire pour insérer un code jQuery dans Avada thème?

Je veux insérer un simple jQuery 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 il ne fonctionne pas.

J'ai essayé d'utiliser les différentes classes à tous les éléments HTML pour insérer mon code avec un plugin nommé "CSS & Javascript boîte à outils", mais il n'a pas aidé.

avez-vous remplacer le signe '$' à 'jQuery'?
ajouter à wp_footer et remplacer $ avec jQuery s'il vous plaît et plus loin à lire ici:codex.wordpress.org/Plugin_API/Action_Reference/wp_footer
Exactement comment avez-vous insérer votre JS "dans une page"? Avez-vous ajouté dans une balise script à l'intérieur de la page de modèle?
Je trid remplacer $ par JQuery, mais ça ne fonctionne pas 🙁
J'ai utilisé un nom de plugin CSS & outils Javascript

OriginalL'auteur sahnas | 2016-05-17

  1. 6

    D'abord ne pas utiliser de CSS/JS du plugin, c'est une terrible idée que ces plugins sont généralement la raison pour laquelle les grandes questions de sécurité et ne fournit pas de bon de maintenabilité.

    Ici est la bonne façon d'ajouter du Javascript dans WordPress :

    Dans votre thème enfant (parce que vous avez créé un thème enfant à Avada afin d'être en mesure de le mettre à jour à tout moment, le droit? 🙂 ), ajoutez la fonction suivante dans votre functions.php fichier:

    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 indique à WordPress pour ajouter le script approprié balise de lien à tabs-scripts.js situé dans votre thème js répertoire dans le pied de page de chaque page, et de charger le jQuery UI dépendance. Voir wp_register_script de la documentation de référence.

    Ensuite, créez votre tabs-scripts.js fichier dans votre répertoire /js et ajouter 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 permettra de s'assurer de deux choses:

    • Que $ est disponible et la référence à jQuery
    • Et approprié des éléments du DOM #tabs et #accordion sont 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 remplie.

    Merci beaucoup !! J'ai un thème Enfant oui 😉 je viens de tester vos conseils et le script n'est pas ajouté dans la page. savez-vous où puis-je mettre le fichier dans le FTP ? Merci
    Votre fichier js doit être en wp-content/themes/<your-child-theme>/js/, et vous devriez ajouter la fonction wp-content/themes/<your-child-theme>/functions.php. Si vous avez ce droit et cela ne fonctionne toujours pas, vérifiez si votre thème footer.php fichier contient un appel à wp_footer() fonction.
    - Je vérifier l'footer.php et j'ai trouvé ceci : <?php wp_footer(); // Echo les scripts ajoutés à la "avant </body>" dans les Options du Thème echo Avada()->paramètres->get( 'space_body' ); ?> Mais je ne peux pas trouvé le tabs-script.js dans la page
    Avez-vous ajouté le code exact, j'ai collé dans functions.php? Vous avez besoin de la fonction + le add_action appel.
    Oui je le fais exactement comme vous l'expliquer

    OriginalL'auteur vard

  2. 13

    Vous utilisez Avada thème, allez dans les options du thème->Avance>les Champs Code (Suivi etc.), vous verrez trois zones de texte, vous devez ajouter votre code dans la deuxième zone (Espace avant ).
    Placer le code à l'intérieur des balises. Je joins la capture d'écran.Comment faire pour insérer un code jQuery dans Avada thème?

    Thx pour notre aide, mais j'ai essayer cette entre <script> mais il ne faut pas travailler du tout. Le code est ajouté dans la page, mais ne fonctionne pas.
    voyez-vous une erreur, essayez de faire inspecter l'élément, voir si vous obtenez une erreur
    aussi rendre le document prêt jQuery(document).ready(function($)
    Merci ! J'ai cette erreur : (index):218 Uncaught TypeError: jQuery(...).les onglets n'est pas une fonction
    .onglets jQuery UI fonction, s'il vous Plaît si l'INTERFACE utilisateur de jQuery script est chargé ou non, si non, merci d'ajouter jQuery UI fichier. vous pouvez obtenir plus d'informations sur les onglets ici jqueryui.com/tabs

    OriginalL'auteur Deepti chipdey

  3. 0

    Simplement ajouter le code de votre script à votre functions.php fichier. Ce qu'il fait est de centraliser le code de votre script sans beaucoup de travail. Votre seule exigence est que vous avez JQuery défini avant de consommer le script.

    Il existe de nombreuses façons de résoudre ce que vous demandez, mais j'ai tendance à pencher vers l'obtention de l'information à partir de la source. Le lien ci-dessous aidera, je l'espère.

    https://codex.wordpress.org/Using_Javascript

    Vous devriez éviter de mettre votre code JS directement dans vos templates comme il n'est pas facilement maintenable - tous les JS doit être mis en file d'attente afin de fournir de la version et de la dépendance de contrôle. Ceci est très important en terme de performance, en tant que fichier distinct peut être mis en cache, minifiés... Voir il Est mieux de mettre le code JS sur le fichier html ou dans un fichier externe?
    Toutes mes excuses, je voulais dire functions.php.
    Merci ! J'ai essayé le Function.php mais il ne marche pas

    OriginalL'auteur