Un menu custom pour WordPress

Tout a commencé il y a quelques jours. Je souhaitais intégrer un petit effet au survol d’un menu : changement de couleur et d’images avec une progession dans l’effet. Sauf que les transitions d’image c’est pas encore tout à fait ça en terme de rendu et notamment de celui que je voulais…

Voila un CodePen illustratif de ce que je voulais avoir en terme de rendu : http://codepen.io/anon/pen/pyvpYG

S’est donc posée la question de savoir comment modifier le rendu html des menus générés par WordPress. Car comme vous le voyez je souhaite intégrer un petit bout de svg à la suite du lien du menu. (Notez que j’aurais aussi pu me passer du span)

<span class="point">
<svg width="5px" height="5px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="full-circle" cx="5" cy="5" r="5"></circle>
</svg>
</span>

J’ai commencé à creuser un peu le codex et je suis tombé sur quelques fonctions intéressantes, car non faire ce type de modification en javascript est tout sauf une bonne idée (j’y reviendrai un jour).

wp_nav_menu() et wp_get_nav_menu_items()

J’ai vite écarté la première qui ne fait qu’afficher en standard le menu. La seconde permet de rapatrier les éléments d’un menu puis de les traiter pour gérer leur affichage.
Du coup, voila le bout de php que j’ai intégré dans mon fichier functions.php

// j'ai enregistré mon custom menu pour pouvoir interragir avec derrière
function register_my_menu() {
register_nav_menu('menu-principal',__( 'menu-principal' ));
}
add_action( 'init', 'register_my_menu' );

function custom_menu() {
$menu_name = 'menu-principal'; // specify custom menu slug
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {

global $post;
$thePostID = $post->ID;
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);

$menu_list = '<nav class="main-menu clearfix" id="menu" role="navigation">' ."\n";
$menu_list .= '<ul>' ."\n";

foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$id = $menu_item->object_id;

if ($thePostID == $id) {
$menu_list .= '<li class="current-menu-item"><a href="'. $url .'">'. $title .'</a><span class="point"><svg width="5px" height="5px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle id="full-circle" cx="5" cy="5" r="5"></circle></svg></span></li>' ."\n";
}
else {
$menu_list .= '<li><a href="'. $url .'">'. $title .'</a><span class="point"><svg width="5px" height="5px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle id="full-circle" cx="5" cy="5" r="5"></circle></svg></span></li>' ."\n";
}
}
$menu_list .= '</ul>' ."\n";
$menu_list .= '</nav>' ."\n";
}
else {
// decommenter pour le débug
//$menu_list = '' . $menu_name . ' n\'existe pas' ;
}
echo $menu_list;
}

Vous notez certainement les lignes suivantes :

global $post;
$thePostID = $post->ID;

Ce petit bout de code me permet de checker, si l’élément de menu qu’on affiche est celui sur lequel on se trouve ce qui me permet ensuite d’affecter une classe dédiée pour pouvoir matérialiser le fait que l’élément de menu concerné est l’élément actif.

Pour utiliser mon menu, je l’ai simplement ajouté dans mon fichier header.php de la façon suivante :

<?php if (function_exists(custom_menu())) custom_menu(); ?>

Edit du 14 avril 2016, j’ai depuis fait des modifs sur le code initial de mon projet wordpress et ce qui précède n’est valable que pour le cas ou vous avez une page d’accueil custom telle que définie dans Réglages > Lecture .

 

Laisser une réponse

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

*

*