Carte OSM pleine fenêtre

Selon le thème de votre WordPress la zone réservée à vos articles est plus ou moins large, de toute manière elle est coincée entre l’en-tête et le pied de page . . . cela ne facilite pas la visibilité des cartes !

Il existe la possibilité de ‘remplir’ la fenêtre avec une carte sans utiliser le bouton ‘plein écran’  voici un exemple http://peche-monnaie-locale.fr/_carte/

Pour cela il faut ajouter un modèle de page au thème en cours.
Par défaut les thèmes ont un seul modèle nommé page.php et situé dans le dossier du thème (wp-content/themes/votre theme/ ), nous allons ajouter un modèle  page-map.php. Les premières lignes indiquent à WordPress qu’il s’agit d’un modèle de page.

<?php
/*
Template Name: Page de map
 *
 * The template for displaying map (full frame)
 *
 */
?>

<div id="primary" class="content-area">
  <div id="content" class="site-content" role="main">

   <?php /* The loop */ ?>
     <?php while ( have_posts() ) : the_post(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="entry-content">
          <?php the_content(); ?>
        </div><!-- .entry-content -->
     </article><!-- #post -->
    <?php endwhile; ?>
 </div><!-- #content -->
</div><!-- #primary -->

On créé une page dans laquelle on met simplement le shortcode OSM :

[*osm_map_v3 map_center= »48.8693430679, 2.4129764600″ zoom= »12″ width= »100% » height= »100% » tagged_type= »post » control= « fullscreen »]

modèle de page
et dans les attributs de la page on choisi
‘Page de map’  avant d’enregistrer.

NB Pour modifier la page par la suite il faudra passer par le menu Pages/Toutes les pages trouver la page par son nom et cliquer sur le lien modifier juste en dessous.

Une utilisation possible est d’afficher la carte d’un site dans le contenu d’un autre par exemple en collant le code suivant :

<iframe title="contenu externe" src="http://peche-monnaie-locale.fr/_carte/" width="100%" height="1000" allowfullscreen="allowfullscreen"><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>Your browser does not support iframes.
</iframe>