IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

WordPress : insertion script jQuery


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Octobre 2011
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Octobre 2011
    Messages : 24
    Points : 16
    Points
    16
    Par défaut WordPress : insertion script jQuery
    Bonjour,

    Je souhaiterais ajouté un script jQuery dans une page wordpress qui permet de faire un lien déroulant.

    Voici se que j'ai fais

    - Dans le header.php du thème j'ai rajouté ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    - Dans le fichier style.css j'ai rajouté ceci
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    a {display: block;}
    .art{ display:none;}
    .close {color:red;}
    p {text-align: center;}

    - Dans le fichier header.php du thème j'ai rajouté après cette ligne wp_enqueue_script mon js

    Se qui donne
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <?php wp_enqueue_script('jquery'); ?>
    <script type="text/javascript" src="../js/liens-accordeon.js"></script>

    - Dans le fichier liens-accordeon.js on a ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(function(){
        $('.open').on('click', function(e){
            e.preventDefault();
            $(this).next('.art').show(500);
        	$(this).hide();	
       	    })
        $('.close').on('click', function(e){
            e.preventDefault();
            $(this).closest('.art').hide(500).prev('.open').show();
     
       	    })
    })
    - Dans ma page j'ai inséré ceci
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <a href="" class="open">01 - Personnages</a>
     
        <div class="art">
            <p >Contenu de l'article</p>
            <a href="" class="close">Fermer</a>
        </div>
    <!--
    	Séparateur article
    -->
     
    <a href="" class="open">02 - Costumes</a>
     
        <div class="art">
            <p >Contenu de l'article</p>
            <a href="" class="close">Fermer</a>
        </div>

    Les deux liens 01 - Personnages et 02 Costume apparaisse bien mais quand je clic dessus " Contenu de l'article " n'apparait pas.

    Que dois-je faire?

    Je vous en remercie d'avance.
    Cordialement.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    As tu regardé dans la console ?

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- A moins que ton thème date de Mathusalem, WP utilise déjà jQuery !
    (Il suffit de vérifier le code généré : "CTRL"+"U")

    2- Sauf erreur, pour éviter les conflits (no-conflict), il ne faut pas utiliser $(...) mais jQuery(...).

    3- as-tu fait une recherche avant de poster ?


  4. #4
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Octobre 2011
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Octobre 2011
    Messages : 24
    Points : 16
    Points
    16
    Par défaut
    Bonjour merci de vos réponse.

    As tu regardé dans la console ?
    C'est à dire à quel niveau.

    A moins que ton thème date de Mathusalem
    Mon thème date de 2017 (acheté) et les mises à jours du thème est OK

    as-tu fait une recherche avant de poster ?
    Oui bien sure et ce sur n'importe quel forum quand j'ai un soucis. Mais tous les résultats (une vingtaine) sont différent et je ne sais pas qui croire et cela est pas facile à comprendre.

    Je ne cache pas que je débute en wordpress, mais comme on dis y a un début à tous

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    F12 affiche la console ...
    regarde si il y a des messages d'erreur

  6. #6
    Invité
    Invité(e)
    Par défaut
    Sais-tu au moins cliquer sur un lien ?
    Car j'en ai mis un dans mon précédent message...

    Et j'ai montré comment afficher le code HTML généré.

  7. #7
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Octobre 2011
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Octobre 2011
    Messages : 24
    Points : 16
    Points
    16
    Par défaut
    Dans la console en faisant F12 j'ai ceci
    TypeError : $(...).accordion is not a function[En savoir plus] test:17:21
    <anonyme> : http://10.63.5.253/test/:17:21
    j : https://ajax.googleapis.com/ajax/lib...min.js:2:27239
    fireWith : https://ajax.googleapis.com/ajax/lib...min.js:2:28057
    ready : https://ajax.googleapis.com/ajax/lib...min.js:2:29889
    J : https://ajax.googleapis.com/ajax/lib...min.js:2:30255

    Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/d...es#no-api-keys util.js:225:33
    Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/d...r-not-required

    Sais-tu au moins cliquer sur un lien ?
    Oui quand même

    Mais je ne comprend pas tous, désolé mais je suis pas un expert chacun son niveau.

    Cordialement.

  8. #8
    Invité
    Invité(e)
    Par défaut
    Au lieu de réponse inutilement aux questions rhétoriques, fais ce qu'on te conseille, et/ou ce qui est indiqué dans la doc.
    Dernière modification par Invité ; 20/11/2018 à 17h22.

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    Au vu du message d'erreur ton plugin n'est pas chargé ...
    tu as regardé dans l'onglet réseau...

  10. #10
    Invité
    Invité(e)
    Par défaut
    J'ai donné la réponse ici :

    Citation Envoyé par jreaux62 Voir le message
    2- Sauf erreur, pour éviter les conflits (no-conflict), il ne faut pas utiliser $(...) mais jQuery(...).
    Avec WordPress, il faut utiliser la notation jQuery(...).

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    @jreaux
    Ben non j'ai pas la raie torique ^^

Discussions similaires

  1. [phpBB] Insertion du résultat d'un template phpBB dans un autre
    Par schnito dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 22
    Dernier message: 05/03/2009, 11h05
  2. Réponses: 2
    Dernier message: 13/06/2007, 17h42
  3. afficher un résultat nul en SQL ?
    Par KEROZEN dans le forum Langage SQL
    Réponses: 1
    Dernier message: 14/09/2006, 13h15
  4. requête sql : caractères accentués et résultat nul
    Par mappy dans le forum Requêtes et SQL.
    Réponses: 4
    Dernier message: 28/08/2006, 12h27
  5. [FileWriter] insertion des résultats null dans le fichier plat
    Par Pakkaï dans le forum Entrée/Sortie
    Réponses: 5
    Dernier message: 28/08/2006, 11h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo