Créez facilement un modèle monopage pour WordPress avec Bootstrap

Créer un template monopage pour WordPress

Les sites monopages sont encore à la mode. Voyons comment faire un menu dynamique de site monopage sous WordPress, en prenant pour base le thème Twenty Thirteen et en utilisant les composants Affix et ScrollSpy de Bootstrap.

Site monopage ?

Un site monopage est une manière de présenter du contenu sur une seule page, chaque section étant accessible directement par le menu.

Ce type de design de site est plutôt à la mode en ce moment.

Il soulève des questions en SEO, a priori il ne causerait pas de souci si la construction du contenu ne dépend pas de JavaScript.

L’implémentation que je vous propose respecte bien cette règle.

Le système de monopage peut aussi n’être appliqué qu’à certaines pages d’un site traditionnel, pour proposer aux visiteurs des pages plus longues avec un menu dynamique.

Affix et scrollspy de Bootstrap

Une des particularités de la plupart des sites monopages est de conserver le menu toujours visible (comme sur ce blog par exemple), et d’indiquer au visiteur dans quelle section il se trouve en changeant l’aspect de l’entrée dans le menu.

Pour cela, je vous propose d’utiliser Twitter Bootstrap, notamment les composants Affix et Scrollpy.

Implémentation

Les fonctions

Commençons par inclure Twitter Bootstrap dans le fichier functions.php de votre thème, par exemple :

function enqueueStyles() {
	wp_enqueue_style("bootstrap", get_stylesheet_directory_uri() . "/css/bootstrap/css/bootstrap.min.css");

	wp_enqueue_script('jquery');
	wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', 'jquery' );
}
add_action("wp_enqueue_scripts", "enqueueStyles");

Pour extraire les titres et les inclure dans le menu, il est nécessaire de retravailler le contenu de la page (the_content) avec cette fonction :

/**
 * Extrait tous les titres d'un contenu HTML pour certain niveau (par défaut : h2) et leur ajoute une ancre
 * @param string $html Le contenu HTML, certainement the_content()
 * @param string $tag Le niveau de titre à extraire, par défaut : h2
 * @return array Un tableau contenant :
 *  - à l'index "result": le contenu HTML modifié avec des ancres ajoutées aux titres
 *  - à l'index "ids" : un tableau avec l'ancre pour clef et le contenu du titre en valeur
 */
function setIdToTags($html, $tag = "h2") {
	libxml_use_internal_errors(true);
	$document = new \DOMDocument();
	$document->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
	$setIds = array();
	$tags = $document->getElementsByTagName($tag);
	foreach ($tags as $tag) {
		if (!$tag->hasAttribute("id")) {
			$id = preg_replace("/[^A-Z0-9a-z]/u", '', $tag->nodeValue);
			$tag->setAttribute("id", $id);
			$setIds[$id] = $tag->nodeValue;
		}
	}
	libxml_use_internal_errors();
	$newHtml = $document->saveHTML();
	$newHtml = str_replace("</body></html>", "", substr($newHtml, strpos($newHtml, "<html><body>") + strlen("<html><body>")));
	return array("result" => $newHtml, "ids" => $setIds);
}

Cette fonction prend le contenu en premier paramètre, et le niveau de titre à inclure dans le menu, par défaut <h2>.

Elle retourne le contenu modifié pour ajouter une ancre à chaque titre et un tableau contenant les titres et les ancres qui ont été ajoutées pour générer le menu.

Note à propos des templates

Pour la suite, nous allons créer un template, c’est-à-dire un modèle de page qui pourra être choisi dans l’éditeur de pages de WordPress.

Ici, notre template a besoin d’un en-tête pour afficher le menu dynamique et du corps de la page pour afficher le contenu modifié (avec les ancres définies sur les titres <h2>).

L’en-tête

Commençons par créer l’en-tête. Pour cela, il faut copier le fichier header.php qui vient du thème parent dans le thème enfant, en le renommant par exemple : header-mono-page.php.

Ensuite, il reste à remplacer le menu de navigation avec ce code :

<body <?php body_class(); ?> data-spy="scroll" data-target="#scrollspyMenu" data-offset="100">
	<div id="page" class="hfeed site">
		<header id="masthead" class="site-header" role="banner">
			<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</a>

<?php
$page = get_queried_object();
global $the_content;
$the_content = $page->post_content;
$the_content = apply_filters("the_content", $the_content );
$newResult = setIdToTags($the_content);
$h2s = $newResult["ids"];
$the_content = $newResult["result"];
?>

			<div id="navbar" class="navbar" data-spy="affix" data-offset-top="175">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
					<div class="nav-menu" id="scrollspyMenu">
						<ul class="nav">
							<li>
								<a href="../">Accueil</a>
							</li>
							<?php
								foreach ($h2s as $id => $title) {
							?>
							<li>
								<a href="#<?php echo $id; ?>"><?php echo $title; ?></a>
							</li>
							<?php
								}
							?>
						</ul>
					</div>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->

Tout d’abord, la fonction setIdToTags() est appelée avec le contenu de la page. Le contenu modifié avec les ancres définies sur les titres est gardé de côté pour plus tard.

Le menu de navigation est assez proche de l’original, à quelques différences près :

  • les entrées du menu viennent du résultat de la fonction setIdToTags
  • les fonctionnalités de scrollSpy et Affix sont ajoutées

Notez également l’ajout d’un lien vers la page d’accueil du blog qui sera toujours présent.

Le contenu de la page

Passons au contenu de la page. Copiez cette fois le fichier page.php du thème parent, en tant que template-mono-page.php dans le thème enfant.

Modifiez son en-tête pour déclarer à WordPress qu’il s’agit d’un template et quel fichier header utiliser :

/**
Template name: Mono page
Copié depuis page.php de Twenty Thirteen
 */

get_header("mono-page"); ?>

Ensuite, il ne reste plus qu’à remplacer le contenu par celui modifié, contenant les ancres vers les titres :

					<div class="entry-content">
						<?php echo $the_content; ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

Le CSS

Enfin, un peu de décoration à ajouter dans style.css :

#scrollspyMenu li.active a {
	border-bottom: blue 3px solid;
}
.navbar.affix {
	z-index: 999999999;
	top: 0px;
}

La bordure inférieure de l’entrée dans le menu correspondant à la section en cours de lecture devient bleue, et le menu, au moment du scroll, reste attaché en haut de la page, avec un z-index assez grand pour éviter les problèmes de chevauchement.

Mise en oeuvre

Maintenant que notre modèle est prêt, voyons comment l’utiliser.

Création d’une page avec le modèle monopage

Il suffit de créer une nouvelle page dans l’interface de WordPress, en sélectionnant bien le nouveau modèle dans les attributs de la page :

Créer un template monopage pour WordPress : choix du modèle
Le choix du modèle

Rédaction

Ensuite, rédigez la page avec du contenu de qualité, mais ça, vous savez.

Placez des titres <h2>, ce sont eux qui vont peupler le menu automatiquement.

Créer un template monopage pour WordPress : rédaction de la page
Rédaction de la page

Le résultat

Et voilà le résultat :

Créer un template monopage pour WordPress : le résultat
Le résultat
Jusque là, aucune grosse différence, à part que les liens du menu correspondent au titres <h2> présents sur la page.

Créer un template monopage pour WordPress : l'affix et le scrollSpy en action
L’affix et le scrollSpy en action
En descendant un peu sur la page, le menu se positionne automatiquement grâce au composant affix de Bootstrap, et l’entrée correspondante (ici Lorem Ipsum) est soulignée avec ScrollSpy.

Le mot de la fin

J’imagine que les sites entièrement monopages vont devenir de moins en moins fréquents, comme la mode, par nature, est en train de changer, mais ajouter ce système sur certaines pages d’un site traditionnel peut être un plus en matière d’ergonomie.

Enfin, ici j’utilise le thème Twenty Thirteen, mais le code peut être appliqué à la plupart des thèmes WordPress, avec un peu d’adaptation.

Cet article vous a été utile ? Partage it !

4 réflexions au sujet de « Créez facilement un modèle monopage pour WordPress avec Bootstrap »

    1. Bonjour Li-An,
      Comme la page d’un site monopage est une seule et même page, elle doit charger tout son contenu… comme une page.
      David

    1. Exact 🙂
      En fait cette structure n’est pas valable pour tous les sites, mais elle peut être utile pour certaines longues pages d’un site traditionnel, pour faire un sommaire amélioré par exemple.
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.