Un menu à l’intérieur du page, d’un post ou d’un widget dans WordPress

J’utilise Worpress sur plusieurs projets. Ce CMS a le mérite de disposer d’une grande communauté et du coup on peut quasi arriver à faire ce que l’on veut sans trop mettre les mains dans le code (pour un fainéant comme moi c’est parfait). Le repository des plugins référencés par WordPress est juste immense ! Et je ne parle pas des extensions qui n’y sont pas référencées.

Par exemple, j’utilise sur plusieurs sites un plugin bien pratique (Shortcode Menu) qui permet, grâce à un shortcode, d’intégrer dans une page, dans un post ou dans un widget un menu. Par exemple, imaginons que j’ai créé un menu spécifique “Partners” structuré ainsi :

Grâce à Shortcode Menu il est assez simple d’intégrer un menu dans une page. Rendez-vous dans le back-office de WordPress > Apparence > Shortcode menu et vous pourrez générer un shortcode qui intègre les paramètres que vous souhaitez. Evidemment il est possible d’affiner l’affichage au-delà des options proposées par le plugin via les feuilles de style CSS de votre thème.

Dans mon cas, j’obtiens un shortcode :

[[shortmenu menu="Partners" enhance="true" submenu_color="#000000" submenu_anchor_color="#e0e0e0" submenu_anchor_hover_color="#ffffff" submenu_transparency="0.8" arrow="true" ]]

qui s’affiche ainsi une fois intégré dans la bonne page de mon projet :

Vous pouvez visualiser le résultat ici.

La problématique : le responsive design

Le problème c’est que, même si c’est esthétiquement très réussi (spéciale dédicace à la graphiste qui a bossé sur l’intégration pour ce projet, Gaëlle Maury), ce type de menu déroulant pose un gros problème pour les usages sur tablettes et smartphones.

Autant on trouve plein de solutions assez bien intégrées en mode responsive au niveau des thèmes WordPress, des plugins de menus, autant je n’ai rien trouvé de convainquant qui réponde à ma problématique de départ, à savoir intégrer un menu spécifique dans une ou plusieurs pages au moyen d’un shortcode. Cela ne veut pas dire que ça n’existe pas … mais peut-être juste que je n’ai pas correctement cherché !

Du coup, j’ai décidé de coder rapidement un plugin WordPress qui, au lieu de générer un joli menu avec jQuery comme le fait Shortcode Menu, puisse simplement générer une dropdown box (une liste déroulante) en HTML (comme ici). Avec un menu déroulant simple en HTML, l’accessibilité sur tablette et smartphone ne posera aucun problème.

Mon plugin “Dropdown Shortcode Menu” : installation et utilisation

Dans mes recherches, j’ai vu le travail réalisé autour du plugin Dropdown Menus, qui est utilisable en temps que tel, ou intégré dans un thème. Ce plugin propose d’ajouter une fonction dropdown_menu() en plus de la fonction native de Worpress wp_nav_menu() qui interprètes les mêmes arguments. En utilisant dropdown_menu() en alternative à wp_nav_menu() on peut donc générer un affichage de menu dans une dropdown box HTML.

L’utilisation de cette fonction est assez bien documentée sur la page du plugin Dropdown Menus.

J’ai donc choisi d’intégrer cette fonction dans mon plugin, et je n’ai codé que la partie permettant d’appeler cette fonction depuis un shortcode.

Voici le code pour ceux que cela intéresse :

<?php
/*
Plugin Name: Dropdow-Menu-Shortcode
Plugin URI: https://github.com/yvangodard/Dropdown-Menu-Shortcode
Description: Shortcode pour réaliser une dropdown box à partir d'un menu. Consultez l'aide sur https://github.com/yvangodard/Dropdown-Menu-Shortcode.
Version: 1.0
Author: Yvan GODARD
Author URI: http://www.yvangodard.me
Licence: CC BY-NC-SA 4.0 http://creativecommons.org/licenses/by-nc-sa/4.0/
*/
/*  Copyright 2014 Yvan GODARD(godardyvan@gmail.com)
    This program is free software; you can redistribute it and/or modify
    it under the terms of Creative Commons BY-NC-SA 4.0 licence
    http://creativecommons.org/licenses/by-nc-sa/4.0/
    THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, 
    INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS 
    FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, 
    INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
    PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) 
    HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 
    (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, 
    EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

if ( ! function_exists( 'dropdown_menu' ) )
	include( 'dropdown-menus/dropdown-menus.php' );

if(!class_exists('dropdowmenu_shortcode'))
{
	class dropdowmenu_shortcode
	{
		function __construct()
		{
			add_shortcode('dropmenu', array($this,'display_dropdown_menu'));
		}
		
		function display_dropdown_menu($attr)
		{
			extract( shortcode_atts( array(
				'class' => '',
				'menu' => '',
				'onelevel' => '0',
				'depthlimit' => '0',
				'addtitle' => '',
				'indent' => '',
			), $attr ) );

			if($depthlimit != '0')
				$depth = $depthlimit;
			elseif($onelevel == '1')
				$depth = -1;
			else
				$depth = 0;
				
			if($class != '')
				$menu_class .= $class;
			else
				$menu_class = 'dropdown_menu';

			if($addtitle != '')
				$dropdown_title = $addtitle;
			else
				$dropdown_title = '';

			if($indent != '')
				$indent_string = $indent;
			else
				$indent_string = '- ';
			
			$defaults = array(
				'theme_location'  => '',
				'menu'            => $menu,
				'container'       => 'div',
				'container_class' => 'dropdown_menu_container',
				'container_id'    => '',
				'menu_class'      => $menu_class,
				'menu_id'         => '',
				'echo'            => false,
				'fallback_cb'     => 'wp_page_menu',
				'before'          => '',
				'after'           => '',
				'link_before'     => '',
				'link_after'      => '',
				'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
				'depth'           => $depth,
				'walker'          => '',
				'dropdown_title'  => $dropdown_title,
				'indent_string'   => $indent_string,
			);
			return dropdown_menu( $defaults );
		}
	}
}

if(class_exists('dropdowmenu_shortcode'))
{
	$dropdowmenu_shortcode = new dropdowmenu_shortcode;
}

?>

dropdown-menu-shortcode.phpview raw view file on GitHub

Installation

Pour l’installation, rien de plus simple :

Téléchargez le ZIP de ce plugin
Rendez-vous dans votre back-office Worpress > Extensions > Ajouter
Cliquez sur l’entrée de menu “Envoyer” qui permet d’installer une extension depuis un fichier à uploader
Sélectionnez le fichier ZIP que vous avez téléchargé à l’étape 1
Uploadez-le
Activez le plugin

Et c’est fait !

Utilisation

Pour le moment, je n’ai pas créé de page d’aide ou d’assistant pour générer le shortcode, mais c’est assez simple.

Le shortcode doit être formaté ainsi :

[[dropmenu menu="Nom du Menu" class="maclasse" onelevel=0 depthlimit=2 indent=">> "]]

Où les attributs supportés sont les suivants :

menu → Nom du Menu (seul paramètre obligatoire pour fonctionner).
class → Classe
onelevel → 0 ou 1 (Si 1, l’arborescene du menu ne sera pas conservée, si 0 l’arborescence est conservée. Par défaut, si ce paramètre n’est pas utilisé l’option sera 0)
depthlimit → Niveau de profondeur du menu à conserver (par défaut 0, c’est à dire aucune limite)
addtitle → Titre ajouté en haut du menu déroulant (uniquement si besoin)
indent → Caractères ajoutés pour les sous menus (par defaut ‘- ‘)

Sur ce blog, si j’utilise le shortcode suivant :

[[dropmenu menu="menu principal" indent="> " addtitle="Sélectionnez une page"]]

j’obtiens donc le résultat suivant :

[dropmenu menu=”menu principal” indent=”> ” addtitle=”Sélectionnez une page”]

Aller plus loin dans l’optique responsive, en alternant entre un menu JQuery et une liste déroulante

Nous avons donc deux possibilités :

utiliser le plugin Shortcode Menu pour intégrer un menu jQuery dans une page, un post, un widget,
utilise mon plugin Shortcode Menu Dropdown pour intégrer un menu au format menu déroulant dans une page, un post, un widget.

J’ai souhaité aller plus loin, en intégrant dans ma page les deux et en utilisant les possibilités offertes par CSS.

L’idée, dans ce cas, est d’afficher le menu jQuery pour les affichages supérieurs à 800 pixels et d’afficher le menu déroulant simple en HTML sur les navigateurs inférieurs à 800 pixels. J’applique donc dans ma feuille de style CSS les conditions suivantes sur le container du menu jQuery (<div class="menu_partners_container">) et le container du menu déroulant ('<div class="dropdown_menu_container">) :

@media screen and (max-width: 800px) {
.menu_partners_container {
display: none!important;}
}
@media screen and (min-width: 801px) {
.dropdown_menu_container {
display: none!important;}
}

C’est assez artisanal, mais ça fonctionne, tout en laissant la possibilité d’intégrer de nouveaux menus dans de nouvelles pages.

Vous pouvez regarder le résultat ici, en faisant varier la taille de votre navigateur internet :

La contrainte est évidemment de devoir intégrer deux shortcodes dans votre page.

Pour y remédier, j’ai proposé à l’équipe qui développe le plugin Shortcode Menu d’ajouter une option permettant d’afficher alternativement avec ce seul plugin le menu jQuery ou mon menu déroulant. Cela rendrait responsive leur extension et cela ne nécessite pas de gros aménagements dans leur code …

A suivre sur ce blog si cette collaboration débouche !

Un plugin WordPress pour créer une dropdown box depuis un menu