Intégrer un code javascript sur wordpress

Tigriyo Messages postés 95 Statut Membre -  
Tigriyo Messages postés 95 Statut Membre -
Bonjour,

Je souhaiterais intégrer une carte cliquable grâce à Jquery sur mon site wordpress version 3.6.1. J'ai développé cette carte en interne et elle fonctionne parfaitement. Cependant, quand je transfère mon code sur une page wodpress, la fonction jquery qui me permet de cliquer sur une zone ne marche plus...

Voici le code qui est sensé faire la fonction "mouseover"/"mouseout" 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Quelqu'un saurait-il comment intégrer ce code javascript sur wordpress ? ou si j'ai besoin d'une extension particulière ?

Merci beaucoup d'avance!


A voir également:

2 réponses

Réponse 1 / 2
Angelneonizz Messages postés 820 Statut Membre 137
 
Bonjour,

perso pour faciliter l'intégration des mes scripts j'utilise les modèles de page.

En fait je crée une page php et j'ajouter un commentaire en première ligne de la page : 


<?php
/*
Template Name: Nom du modèle
*/
?>

un tuto : https://wpchannel.com/wordpress/tutoriels-wordpress/creer-modele-page-wordpress
0
Réponse 2 / 2
Tigriyo Messages postés 95 Statut Membre 15
 
merci pour les (toujours très bons) tutos de wpchannel, je n'avais jamais vu celui là : )
mais j'ai eu beau tourner l'idée dans tout les sens, je ne vois pas trop comment créer une page modèle faciliterai l'intégration de mes scripts ... j'ai effectivement fait une page php, intégrer mon code, mais le pb reste le même...
Si jamais quelqu'un repère une erreur dans mon code, je le copie/colle ci dessous (sans les cordonnées et quelques zones pour alléger) : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <style type="text/css">
   #content{
     width: 769px;
     margin: 0 auto;
     text align: center;
   }
   
   #bg_map{
    width: 769px;
    height: 598px;
    background: url(http://www.auvmvaldumonde.com/wordpress/wp-content/themes/graphene/images/img/000.gif) no-repeat top left;
  </style>
</head>
<body>
 <div id="content">
  <div id="bg_map">
   <img src="http://www.auvmvaldumonde.com/wordpress/wp-content/themes/graphene/images/img/000.gif" border="0" height="598" width="769" usemap="#map" id="img"/>
   <map name="map">
    <area shape="poly" coords="151,...289" alt="http://www.auvmvaldumonde.com/wordpress/wp-content/themes/graphene/images/img/01" title="Zone d'Arcueil" href="#arcueil"><area shape="poly" coords="116,...279" alt="http://www.auvmvaldumonde.com/wordpress/wp-content/themes/graphene/images/img/02" title="Zone de Fresnes" href="#fresnes">
    </map>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
 $(function(){
  $("area").mouseover(function(){
     var link= $(this).attr("alt");
     $("#img").attr("src",link+".png");
  }).mouseout(function(){
      $("#img").attr("src","http://www.auvmvaldumonde.com/wordpress/wp-content/themes/graphene/images/img/000.gif");
  });
 });

</script>
</body></html>
0