Créer une carte de tous ses articles avec Leaflet et wordpress

Comment créer une carte de tous ses articles avec Leaflet et wordpress

Dans ce tuto, on va voir comment afficher dans un site wordpress, tous ses articles sous forme de marqueurs sur une carte générée grâce à leaflet.

Cette carte pourra être affichée dans n’importe quel type de template, la page d’accueil, la catégorie, archive ou tout autre modèle de page crée en dur.

Disons que nous voulons afficher une carte de pleine largeur sur la page d’accueil.

Charger leaflet sur son wordpress

La première étape consiste à télécharger les fichiers leaflet. On peut se rendre sur le site officiel et télécharger tout le dossier. Une fois extrait, on rentre dans le dossier et on va chercher le fichier leaflet.css et leaflet.js.

On les charge dans notre thème via l’appel aux scripts dans notre fichier functions.php.

function cc_scripts() {
wp_enqueue_style( 'leaflet-style', get_template_directory_uri() . '/css/leaflet.css' );
wp_enqueue_script('leaflet-js',get_template_directory_uri() . '/js/leaflet.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'cc_scripts' );

Choisir un type de carte ou tuile de carte (Map Tile)

Ensuite on peut choisir le type de carte souhaité, et insérer le code pour afficher une carte dans un fichier js à part ou directement dans le fichier home.php.

Le site wiki permet d’avoir une idée du type de carte que l’on souhaite

Le site Leaflet provider demo beaucoup plus parlant, permet de récupérer directement tout le code à insérer dans notre fichier pour appeler un certain type de carte.
Dans la colonne de droite de cette page, on peut cliquer sur les vignettes pour voir en temps réel le rendu de la carte et récupérer ensuite dans l’encart en haut de page le code correspondant. Pour l’exemple, je vais partir sur une tuile de CartoDB

je récupère donc le code suivant :

var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>',
	subdomains: 'abcd',
	maxZoom: 19
});

Dans la doc Leaflet, onglet tutorials, on nous explique comment rapidement afficher une carte.

Créer la carte partie html

Pour cela on doit bien sûr créer une div qui va l’accueillir

<div id="mapid"></div>

Cette div, on doit lui spécifier une largeur et une hauteur afin qu’elle apparaisse

#mapid { height: 180px; }

Pour un affichage en pleine largeur, on peut l’insérer dans une div conteneur, et appliquer une height et width de 100% à l’ensemble des éléments.

Créer la carte partie Js

Si l’on suit le tuto, on doit ensuite créer une instance de la carte grâce au code suivant, à insérer dans son fichier js ou dans le template php wordpress directement entouré des balises <script></script>

var map = L.map('mapid').setView([ 48.856614,  2.352222], 13);

Les chiffres correspondent ici aux latitude, longitude et niveau de zoom. Le conteneur de ma carte aura comme ID ‘mapid‘. Juste en dessous, il faut appeler la tuile qu’on a sélectionné.

jQuery(function($) {
var map = L.map('mapid').setView([ 48.856614,  2.352222], 13);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>',
	subdomains: 'abcd',
	maxZoom: 19,
}).addTo(map);
});

Créer les marqueurs sur notre carte

Maintenant qu’on a notre carte, il faut relier les articles et les transformer en marqueurs, il faut déjà pour cela que l’on ai une longitude latitude pour chacun de nos articles. Il y a plusieurs solutions. Soit on utilise un plugin qui génère dans chaque page d’édition des metabox supplémentaires pour qu’on y insère des coordonnées géographiques. Soit on utilise simplement les custom fields par défaut de wordpress.

Les champs personnalisés ou custom fields

Dans la page d’édition d’un article, il faut remonter tout en haut de la page, et dérouler l’onglet « options d’écran ».

Dans la liste des éléments, il faut cocher la case « champs personnalisés ».

Tout en bas de la page, de nouveaux champs sont apparus. On peut alors en créer deux, un ‘lat’ pour la latitude, et un ‘lng‘ pour la longitude et insérer les valeurs correspondantes.

Le site gps coordinates permet de trouver facilement les coordonnées géographiques d’un point.

Afficher les marqueurs et créer une popup

Ensuite à l’intérieur de la div mapid, on va chercher nos articles à l’aide d’une boucle.
A l’aide des data-attributes, on va préciser que nos marqueurs contiendront les latitudes, longitudes et le titre de l’article.

<div id="mapid" class="desktop_visible">
<?php  $the_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1));
if ( $the_query ->have_posts() ) : 
while ( $the_query->have_posts() ) : $the_query->the_post();
$lat = get_post_meta( $post->ID, 'lat', true );
$lng = get_post_meta( $post->ID, 'lng', true );
<div class="marker"  data-url="<?php the_permalink(); ?>"  data-title='<h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>' data-lat="<?php echo $lat; ?>" 
data-lng="<?php echo $lng; ?>">
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>

Une fois la boucle créée, on peut les afficher sur la carte via notre fichier js. A la suite de l’instanciation de la carte, on place le code suivant :

  $('.marker').each(function() {
   var lat = $(this).attr('data-lat');
   var lng = $(this).attr('data-lng');
   var name = $(this).attr('data-title');
   var marker = new L.marker([ lat, lng ]).bindPopup( name ).addTo( map );
   });

On obtient quelque chose de très laid, mais qui fonctionne. Au clic sur un marqueur, la fonction bindPopup() nous permet d’afficher la popup. A l’intérieur on y met notre titre, la variable ‘name’ qu’on a récupéré via le data-attribute ‘title’.

Ajouter l’image à la une

Si l’on veut ajouter le thumbnail : dans la div.marker, il suffit de rajouter un data attribute comme suit:

data-thumbnail='<?php the_post_thumbnail("last_post");?>'

et dans le js

 $('.marker').each(function() {
   var lat = $(this).attr('data-lat');
   var lng = $(this).attr('data-lng');
   var name = $(this).attr('data-title');
   var image =$(this).attr('data-thumbnail');
   var marker = new L.marker([ lat, lng ]).bindPopup( '<div class="thumbnail">' + image +'</div>' + '<h1>' + name + '</h1>').addTo( map );
   });

On obtient alors l’apparence suivante:

A soi bien sûr de modifier le css de la popup à sa guise.

Ajouter l’extrait de l’article

Si l’on veut ajouter l’extrait de l’article,, toujours dans la div.marker, on rajoute là encore un data- attribue ;

data-excerpt="<p><?php echo esc_attr(get_the_excerpt() );?></p>"

et dans le js:

  $('.marker').each(function() {
   var lat = $(this).attr('data-lat');
   var lng = $(this).attr('data-lng');
   var name = $(this).attr('data-title');
   var image =$(this).attr('data-thumbnail');
   var excerpt =$(this).attr('data-excerpt');
   var marker = new L.marker([ lat, lng ]).bindPopup( '<div class="thumbnail">' + image +'</div>' + name +  '<div class="excerpt">'+ excerpt + '</div>').addTo( map );
   });

Le résultat commence à prendre forme

un peu de style

Voici les classes css à travailler pour améliorer le rendu

	.leaflet-popup-content-wrapper,
	.leaflet-popup-content{
	    width:560px !important;
	    max-width: 853px !important;
	    margin:0 !important;
	    padding:0 !important;
	    border-radius:0 !important;
	     -webkit-border-radius: 0 !important;
	   -moz-border-radius: 0 !important;
	    border-radius: 0 !important;
			    
			    height:100%;
		}

	.leaflet-popup-content figure, 
	.leaflet-popup-content .wp-block-embed-youtube{
		line-height:0 !important;

		}
	.leaflet-popup-content p,
	.leaflet-popup-content h3 a{
		padding: 0 10px;
	}

	.leaflet-container a.leaflet-popup-close-button{
		padding: 0 !important ;
		border-radius:50% !important;
		background-color:#fff !important;
	    padding: 8px 0px 0 0 !important;
	    width: 30px !important;
	    height: 30px !important;
	}

On obtient alors quelque chose de plus lisible

Afficher l’extrait de Yoast seo

Si on veut afficher l’extrait du plugin Yoast SEO, renseigné dans le champ prévu à cet effet dans la page d’édition de l ‘article, on peut l’appeler de la manière suivante  : juste au dessus de la div.marker, on définit la variable

$excerpt = get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true);

et à l’intérieur de la div marker, à la suite de tous les data-attributes, on ajoute celui pour l’extrait

data-excerpt='<p><?php echo esc_html($excerpt);?></p>'