web-dev-qa-db-fra.com

Intégrer OpenStreetMap sur WordPress

Je veux mettre une carte (en utilisant OpenStreetMap et OpenLayers) sur une page WordPress. Je ne souhaite pas utiliser de plug-in, car je souhaite effectuer certaines opérations spécifiques avec la carte et je souhaite donc rester le plus flexible possible. J'ai suivi ce tutoriel: http://wiki.openstreetmap.org/wiki/Wordpress#Manually_embedding_osm_maps

Cependant, rien ne se passe sur la page, elle apparaît vide (seul le nom de la page, façonné avec le thème que j'utilise (vingt-quatorze ans, un classique, idéal pour les tests)). Le code fonctionne sur un site Web local.

Voici mon script (contenu dans map_test.js):

map = new OpenLayers.Map('basicMap');

var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326");
// Transform from WGS 1984
var toProjection   = new OpenLayers.Projection("EPSG:900913");
// to Spherical Mercator Projection
var centerPosition = new OpenLayers.LonLat(-85.00,38.00).transform( fromProjection, toProjection);
var zoom = 5;

map.addLayer(mapnik);
map.setCenter(centerPosition, zoom);

Voici le morceau de code header.php qui devait être modifié:

<head>
    [...]
    <script src="../../plugins/Fidu-interactive-map/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script type="text/javascript" src="../../plugins/Fidu-interactive-map/js/map_test.js"></script>
    <?php wp_head(); ?>
</head>

La page WordPress est vide, elle ne contient que ce code:

<div id="basicMap"><p>OSM map</p></div>

Je pense que mon problème peut être dû au chemin que j'ai spécifié dans le fichier header.php. En effet, les fichiers JavaScript sont contenus dans un plugin, qui est activé. J'ai commencé par le répertoire wp-content/themes/vingt-quatorze pour spécifier mon chemin, parce que header.php est là, mais je me suis peut-être trompé.

Est-ce que quelqu'un a une idée de mon problème et comment le résoudre? Merci !

postspagesjavascript
1
Reyedy

Ok, j'ai finalement réussi à le faire fonctionner, ma carte s'affiche maintenant, grâce à vous, mes amis. Ce que j'ai fait c'est:

  • J'ai changé le chemin d'accès au chemin absolu des scripts. En effet, utiliser une URL relative était une mauvaise idée.

  • J'ai changé mon script, qui ressemble maintenant à ça:

    document.addEventListener("DOMContentLoaded", function()
{
    map_init();
}, false);

var map;

function map_init(){
    map = new OpenLayers.Map('basicMap');

    var mapnik = new OpenLayers.Layer.OSM();
    var fromProjection = new OpenLayers.Projection("EPSG:4326");
    // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913");
    // to Spherical Mercator Projection
    var centerPosition = new OpenLayers.LonLat(-85.00,38.00).transform( fromProjection, toProjection);
    var zoom = 5;

    map.addLayer(mapnik);
    map.setCenter(centerPosition, zoom);
}

  • J'ai enlevé le que j'avais déclaré dans l'en-tête, parce que c'était devenu inutile. En effet, dans le fichier php de mon plugin, j'ai mis les deux scripts et cela fonctionne, car l'un d'entre eux capture l'ouverture de la page.

  • J'appelle maintenant le fichier php où mes scripts sont déclarés en utilisant un shortcode sur ma page.

Cependant, j'ai essayé de mettre en file d'attente les scripts et de les supprimer de ma page php, mais cela ne fonctionne pas. Je ne suis pas familier avec cette technique, y a-t-il quelque chose que je dois faire? Voici le morceau de code:

function add_scripts(){
    wp_register_script('map_init', '/wp-content/plugins/Fidu-interactive-map/js/map_init.js');
    wp_register_script('OpenLayers', '/wp-content/plugins/Fidu-interactive-map/OpenLayers-2.13.1/OpenLayers.js');
    wp_enqueue_script('map_init');
    wp_enqueue_script('OpenLayers');
}
add_action('wp_enqueue_scripts', 'add_scripts');
0
Reyedy