Si WooCommerce est souvent utilisé via un thème spécialisé, il est aussi possible d’installer ce plugin e-commerce sur n’importe quel thème WordPress, gratuit, premium ou sur mesure, lors d’une création de boutique en ligne. Mais vous voudrez alors sûrement créer un menu client distinct, permettant à vos clients d’accéder à leur page de compte, au panier, ou d’effectuer une recherche de produits. Ce petit tuto WooCommerce vous montre comment faire.
En tant que webmaster freelance, j’ai récemment eu à réaliser un thème WooCommerce sur mesure ainsi qu’un menu dédié, j’en profite pour vous faire bénéficier ici d’un retour d’expérience. 😉
Pour rester le plus simple et standard possible, je me base ici sur le thème Twentyseventeen de WordPress, vous pouvez bien sûr adapter le code au vôtre et il vaut mieux créer un thème enfant avant de commencer.
Bien sûr, pensez à installer WooCommerce et, par principe, à rendre votre thème compatible avec le plugin. Voici le contenu du fichier functions.php pour débuter ce tutoriel :
<?php
/**
* Woocommerce compatibility
*/
function jst_woocomm_wrapper_start()
{
echo '<section id="jst-woocom-main" class="wrap">';
}
function jst_woocom_wrapper_end()
{
echo '</section>';
}
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
add_action( 'woocommerce_before_main_content', 'jst_woocomm_wrapper_start', 10 );
add_action( 'woocommerce_after_main_content', 'jst_woocom_wrapper_end', 10 );
/**
* Child Theme Scripts
*/
function jstchildtheme_enqueue_scripts()
{
wp_enqueue_style(
'jstchildtheme-parent',
get_template_directory_uri().'/style.css',
array(),
filemtime( get_template_directory().'/style.css' ),
'all'
);
}
add_action( 'wp_enqueue_scripts', 'jstchildtheme_enqueue_scripts' );
N.B. : J’utilise la classe “wrap“ qui sert à définir le conteneur dans le CSS de Twentyseventeen.
Enregistrer un menu pour vos clients WooCommerce
Commençons par créer un menu WordPress en mettant ce bout de code dans le fichier functions.php du thème :
/**
* Theme Setup
*/
function jst_after_setup_theme(){
register_nav_menu( "clients_menu", __( "Clients Menu", "woocommerce" ) );
}
add_action( "after_setup_theme", "jst_after_setup_theme" );
Nous avons maintenant un identifiant pour notre menu WooCommerce (“clients_menu“) ainsi qu’un nom d’emplacement (“Clients Menu“).
Nous allons créer une instance de ce menu depuis l’interface d’administration de WordPress.
Depuis le menu “Apparences“ -> “Menus“, créez un menu “Clients Menu“ et assignez-le à l’emplacement du même nom.
Notre menu WooCommerce existe désormais, nous allons maintenant réaliser son balisage HTML, et ajouter, en même temps, le widget de panier WooCommerce.
Structure HTML du nouveau menu WooCommerce
La barre du menu principal du thème parent étant positionnée de façon absolue, je vous propose d’insérer notre menu client dans la même barre du menu supérieur. Nous allons donc copier le fichier header.php depuis le dossier “twentyseventeen“ et le coller à la racine du répertoire de notre thème enfant pour y rechercher l’endroit où il est appelé, et y ajouter notre snippet.
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top"><?!-- barre navigation menu principal Twentyseventeen -->
<?php if( has_nav_menu( "clients_menu", "jst" ) ): ?>
<?div class="navbar navbar-top"><!-- barre navigation nouveau menu WooCommerce -->
<?div class="wrap navbar-top-wrap">
<?div class="navbar-nav navbar-nav-top-right">
<??php get_template_part( "template-parts/navigation/client", "menu" ); ?>
<?div class="jst-woocommerce-cart-container">
Nous allons maintenant créer l’arborescence des dossiers template-parts/navigation/ à la racine du thème enfant pour y placer un fichier client-menu.php :
<nav id="top-user-navigation" class="top-social-navigation" role="navigation">
<div class="navbar-container">
<?php
wp_nav_menu( array(
'theme_location' => 'clients_menu',
'menu_class' => 'clients_menu'
) );
?>
</div>
</nav>
Ce code appelle le menu créé dans notre fichier functions.php (qui à ce stade est encore vide de tout item) ainsi que la fonction jst_header_cart(), qu’il nous faut créer afin d’afficher le widget panier WooCommerce.
Nous utiliserons ensuite un filtre WordPress pour créer un menu sous forme d’icônes Font Awesome, proposant un lien vers la page de compte utilisateur, un lien de déconnexion (si le client est connecté), un lien affichant l’icône de panier (et le nombre de produits s’y trouvant) permettant de visualiser notre widget panier, ainsi qu’un champ de recherche de produits pour notre boutique WooCommerce.panier WooCommerce dans le menu
Affichage du widget « panier » dans le menu WooCommerce
Pour afficher le panier de WooCommerce, rien de plus simple, nous utilisons la fonction WordPress the_widget() (permettant d’afficher le rendu de n’importe quel widget), en en profitant pour afficher un résumé du dit panier (sous-total et nombre de produits) en en-tête.
Commençons dons par coder une fonction affichant le résumé (encore une fois dans le fichier functions.php) :
/**
* Résumé du panier Woocommerce
*/
if( ! function_exists( 'jst_cart_summary' ) )
{
function jst_cart_summary()
{
$cart_link = '<div class="jst-cart-header">' .
'<span class="amount">' .wp_kses_data( WC()->cart->get_cart_subtotal() ). '</span>' .
'<span class="">' . wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'jst' ), WC()->cart->get_cart_contents_count() ) ) . '</span>' .
'</div>';
echo $cart_link;
}
}
wp_kses_dada() permet d’assainir le code HTML généré et WC() nous procure une instance de l’objet WooCommerce pour accéder à ses fonctions internes.
Ensuite, nous récupérons le sous_total avec WC()->cart->get_cart_subtotal() et le nombre de produits dans le panier avec WC()->cart->get_cart_contents_count().
Nous pouvons donc maintenant écrire notre fonction jst_header_cart() pour afficher notre widget panier et son en-tête :
/**
* Panier menu
*/
if( ! function_exists( 'jst_header_cart' ) )
{
function jst_header_cart()
{
if( class_exists( 'woocommerce' ) )
{
?>
<ul class="site-header-cart menu" id="site-header-cart">
<li><?php jst_cart_summary(); ?></li>
<li><?php the_widget( 'WC_Widget_Cart', 'title=' ); ?></li>
</ul>
<?php
}
}
}
L’affichage de notre panier avec son résumé est maintenant terminé, nous pouvons créer les liens de notre menu WooCommerce.
Création dynamique du menu client WooCommerce
Pour manipuler notre menu client, nous allons utiliser le filtre “wp_nav_menu_items“ qui permet de manipuler et retourner les informations relatives à un menu WordPress.
add_filter( 'wp_nav_menu_items', 'jst_clients_nav_menu_items', 10, 2 ) ;
Dans notre fonction de rappel (le callback), nous testons l’emplacement du menu appelé pour être sûr d’ajouter nos éléments au bon endroit :
/**
* Dynamic Menu Managment
*/
function jst_clients_nav_menu_items( $html_items, $args ){
if( 'clients_menu' == $args->theme_location ){
// Si le menu appelé est notre menu clients
// nous pouvons ajouter nos éléments
}
return $html_items;
}
add_filter( 'wp_nav_menu_items', 'jst_clients_nav_menu_items', 10, 2 ) ;
Ce callback nous fournit les items de liste de menus existants avec $html_items (dans notre cas, aucun) ainsi que les informations des menus traités par notre filtre avec $args. Lorsque le menu passant par notre fonction correspond à notre menu client WooCommerce, nous intervenons 😉
Liens et informations du panier WooCommerce
Comme nous l’avons vu, WooCommerce procure quelques « fonctions raccourcis » pour récupérer les informations dont nous avons besoin, notamment, le nombre de produits ajoutés au panier avec :
$cart_contents_count = WC()->cart->get_cart_contents_count();
N.B. : Nous pouvons aussi récupérer l’instance de cette classe avec global $woocommerce.
Le coût total du panier :
$cart_total = WC()->cart->get_cart_total();
Les identifiants (ID) des pages utilisées par WooCommerce sont accessibles avec la fonction wc_get_page_id( « nom_de_la_page » ) et la fonction native de WordPress get_permalink( $id ).
Retrouvons les URL des pages « Panier » et « Mon compte » :
$lien_panier = get_permalink( wc_get_page_id( 'cart' ) );
$lien_utilisateurs = get_permalink( wc_get_page_id( 'myaccount' ) );
N.B. on peut aussi utiliser la fonction « raccourci » WooCommerce pour retrouver l’URL de la page panier :
$lien_panier = WC()->cart->get_cart_url();
Ok, nous avons tout ce qu’il nous faut, commençons par créer l’item de menu pour le panier :
$cart_link = <<<EOD
<li class="jst-menu-item-cart menu-item">
<a class="jst-menu-cart-link" href="$lien_panier">
<i class="fa fa-shopping-cart fa-lg">
</i><span class="jst_wc_cart_contents_count">$cart_contents_count</span>
</a>
</li>
EOD;
Nous avons utilisé ici la police Font Awesome pour nos icônes de panier, vous devrez la charger depuis leur CDN ou la télécharger directement au niveau du thème pour l’utiliser.
Nous allons vérifier que l’utilisateur est bien connecté pour n’ajouter le lien de déconnexion au menu que lorsque cela est nécessaire :
$logout_link = is_user_logged_in() ?
'<li class="menu-item"><a href="' .wp_logout_url( home_url( '/' ) ) . '">Déconnexion</a></li>' :
'';
Nous pouvons construire à présent nos liens « compte client » et « déconnexion » :
$user_item = <<<EOD
<li class="jst-menu-item-user menu-item menu-item-has-children">
<a class="jst-menu-user-link">
<i class="fa fa-male fa-lg"></i>
</a>
<ul class="sub-menu">
<li class="menu-item"><a href="$lien_utilisateurs">Mon compte</a></li>
$logout_link
</ul>
</li>
EOD;
Enfin, nous pouvons écrire l’item de menu affichant notre formulaire de recherche de produits WooCommerce :
$search_form = '<li class="menu-item_search-form">' . jst_header_search_form() . '</li>';
Pour styliser notre formulaire à notre convenance, nous allons le recréer de toutes pièces. Nous externalisons donc sa création dans une fonction jst_header_search_form().
Création d’un mini-formulaire de recherche
Nous allons créer un mini-formulaire de recherche à insérer dans notre menu.
Nous allons diriger l’action du formulaire vers la page d’accueil pour qu’il soit intercepté par WordPress et garantir que la recherche effectuée après soumission ne corresponde qu’aux produits :
/**
* Menu Product Search Form
*/
if( ! function_exists( 'jst_header_search_form' ) )
{
function jst_header_search_form()
{
$action = home_url( '/' );
$search_query = get_search_query();
$search_form = <<<EOD
<form action="$action" id="header-product-search-form" class="search-form jst-search-form" method="GET">
<label>
<span class="screen-reader-text">Rechercher</span>
<input type="search" class="search_field" name="s" value="$search_query" placeholder="Recherche produits …"/>
</label>
<input type="hidden" name="post_type" value="product" />
<button type="submit" class="search-submit"><i class="fa fa-search fa-lg"></i></button>
</form>
EOD;
return $search_form;
}
}
Le champ important est ici <input type=“hidden“ name=“post_type“ content=“product“ />, qui permet de spécifier que nous faisons une recherche sur les produits WooCommerce uniquement, et de garantir que le résultat sera rendu par le template d’archives WooCommerce, donc de bénéficier d’une présentation de type « page de boutique ».
Cette fonction utilise le balisage fourni par le template product-searchform.php. J’en profite au passage pour, là encore, préstyliser le bouton de formulaire avec une icône vectorielle.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
Il ne nous reste plus qu’à ajouter et retourner ces éléments aux items récupérés par la fonction :
$html_items.= $user_item . $cart_link . $search_form;
Voici le code code complet de notre fonction :
/**
* Dynamic Menu Managment
*/
function jst_clients_nav_menu_items( $html_items, $args ){
if( 'clients_menu' == $args->theme_location ){
$cart_total = WC()->cart->get_cart_total();
$cart_contents_count = WC()->cart->get_cart_contents_count();
$lien_panier = get_permalink( wc_get_page_id( 'cart' ) );
$lien_utilisateurs = get_permalink( wc_get_page_id( 'myaccount' ) );
$cart_link = <<<EOD
<li class="jst-menu-item-cart menu-item">
<a class="jst-menu-cart-link" href="$lien_panier">
<i class="fa fa-shopping-cart fa-lg"></i><span class="jst_wc_cart_contents_count">$cart_contents_count</span>
</a>
</li>
EOD;
$logout_link = is_user_logged_in() ?
'<li class="menu-item"><a href="' .wp_logout_url( home_url( '/' ) ) . '">Déconnexion</a></li>' :
'';
$user_item = <<<EOD
<li class="jst-menu-item-user menu-item menu-item-has-children">
<a class="jst-menu-user-link">
<i class="fa fa-male fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu">
<li class="menu-item"><a href="$lien_utilisateurs">Mon compte</a></li>
$logout_link
</ul>
</li>
EOD;
$search_form = '<li class="menu-item_search-form"<' . jst_header_search_form() . '</li<';
$html_items.= $user_item . $cart_link . $search_form;
}
return $html_items;
}
add_filter( 'wp_nav_menu_items', 'jst_clients_nav_menu_items', 10, 2 ) ;
Intégration de la bibliothèque Font Awesome
Notre stylisation repose pour beaucoup sur Font Awesome. Il est donc temps de récupérer l’URL CDN de la bibliothèque sur le site de Font Awesome et de l’appeler depuis notre fonction jstchildtheme_enqueue_scripts() :
/**
* Font-Awesome
*/
wp_enqueue_style(
'font-awesome',
'https://use.fontawesome.com/ba469fe6d5.css',
array(),
'',
'all'
);
N.B. : La solution que je vous propose ici est de charger la bibliothèque via son URL. Vous devrez donc vous inscrire sur le site de Font Awesome pour ensuite ouvrir un compte sur leur CDN. Vous pourrez alors choisir de récupérer le fichier au format CSS et obtenir une URL possédant un identifiant unique.
Notre menu est désormais pleinement fonctionnel, mais il lui manque une mise à jour automatique des informations WooCommerce lors d’un ajout ou d’une suppression de produits.
Mise à jour du nombre de produits
WooCommerce nous propose un hook Woocommerce spécial pour mettre à jour un balisage HTML arbitraire avec n’importe quel élément du panier, « woocommerce_add_to_cart_fragments ».
La fonction de rappel de ce filtre permet d’ajouter des fragments HTML à actualiser via un tableau associatif passé en argument, WooCommerce fait le reste.
Il suffit d’ajouter à ce tableau une clé faisant référence au sélecteur ciblé, dans un format semblable au selecteurs JavaScript utilisés par « jQuery », ayant comme valeur notre balisage HTML mis à jour :
/**
* Woocommerce Menu AJAX Fragments Managment
*/
function jst_header_cart_fragments( $fragments )
{
$fragments[ 'span.jst_wc_cart_contents_count' ] = '<span class="jst_wc_cart_contents_count">'.'('.WC()->cart->get_cart_contents_count().')'.'</span>';
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'jst_header_cart_fragments', 10 );
Et voilà notre item de menu mis à jour avec Ajax à chaque ajout ou suppression de produit au panier WooCommerce 😉
N.B. : La documentation officielle de WooCommerce nous propose de passer par une temporisation de sortie pour créer notre balisage avec ob_start() et ob_end_flush(), à vous de voir, les 2 solutions fonctionnent.
Notre menu et notre widget ont besoin d’être stylisés et dotés de quelques fonctionnalités clientes, nous allons donc définir quelques règles de style dans le fichier style.css de notre thème enfant :
Stylisation CSS du menu client WooCommerce
La plupart de ces règles CSS étant basiques, je ne vous explique ici que les plus importantes.
Création d’un fond noir :
.navbar-top {
background: #000000;
color: #fff;
}
Alignement à droite de notre menu WooCommerce :
ul.clients_menu {
margin-bottom : 0;
padding : 2em 0;
width: 100%;
text-align: right !important;
z-index: 200;
}
Flottement des items de menu :
ul.clients_menu > li {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
Marges et couleur des liens (blanc) :
ul.clients_menu li a {
padding-right: 1.5em;
color: #e0e0e0;
}
ul.clients_menu li a:hover {
color: #fff;
}
Positionnement des sous-menus :
ul.clients_menu ul.sub-menu {
position: absolute;
display : none ;
margin-left: -30px;
margin-left: -3rem;
text-align: center;
z-index: 500;
background: rgba(0, 0, 0, .8);
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0;
border-radius: 0 0 3px 3px;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
Affichage du sous-menu au survol de la souris :
ul.clients_menu:hover ul.sub-menu {
display : bock ;
}
Largeur maximale du sous-menu :
.clients_menu ul.sub-menu li {
min-width: 100px;
min-width: 10rem;
}
Style des liens de sous-menu :
.clients_menu ul.sub-menu li a {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
padding: 1em 1.75em;
color: #fff;
border: none !important;
}
.clients_menu ul.sub-menu li:hover a{
background: #fff;
color : #000;
}
Mise en forme du mini formulaire de recherche de produits
Alignement du champ text et du bouton de soumission du menu WooCommerce :
.clients_menu .search-form {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
.clients_menu .search-form input.search_field,
.clients_menu .search-form label,
.clients_menu .search-form .search-submit {
display: inline-block !important;
position: static !important;
}
.clients_menu .search-form label {
margin-bottom: 0;
}
Style du champ de recherche search :
.clients_menu .search-form input.search_field {
display: none;
width: 155px;
font-family: "Libre Franklin", sans-serif;
font-size: .875em !important;
padding: .3em .375em !important;
border: none;
}
N.B. : La police de caractères « Libre Franklin » est utilisée par défaut sur le thème Twentyseventeen, vous pourrez choisir celle qui correspond le mieux au votre.
Nous pouvons terminer par le bouton de soumission du formulaire :
.clients_menu .search-form .search-submit {
display: inline-block;
padding: 0 !important;
border: none;
width: 25px;
height: 25px;
vertical-align: bottom;
background: none;
cursor: pointer;
}
N.B. : Pensez à ajuster les dimensions du bouton en addintionnant la hauteur et le padding vertical du champ de recherche.
Stylisation du widget panier du menu Woocommmerce
Ces règles CSS devraient être modifiées pour répondre plus précisément à vos besoins :
.jst-woocommerce-cart-container, .jst-woocommerce-cart-container > a {
position: absolute;
right: 0;
top: 100%;
display: block;
padding: 1em;
max-width: 350px;
z-index: 100;
background: rgba(255, 255, 255, 0.9);
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0;
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 1px 1px #ddd;
color: #555;
font-weight: 700;
font-size: .875em;
}
Définition des marges
.jst-woocommerce-cart-container .site-header-cart {
margin-bottom: 0;
}
.jst-woocommerce-cart-container .widget {
padding-bottom: 0;
}
.site-header-cart .jst-cart-header .amount {
margin-right: 1em;
}
Nous allons donner au bouton de suppression de produits un positionnement absolu, les items de liste du sous-menu du panier ont donc un positionnement relatif :
.jst-woocommerce-cart-container ul.cart_list li, .jst-woocommerce-cart-container ul.product_list_widget li {
position: relative;
padding: 1em 0 4px 2em;
margin: 0;
}
.site-header-cart li + li {
margin-top: 1.5em;
}
Définition de styles a minima pour le bouton de suppression et les liens des produits WooCommerce :
.jst-woocommerce-cart-container a.remove {
position: absolute;
top: 0;
left: 0;
margin: 1em 0 !important;
color: #f16437 !important;
text-decoration: none;
font-size: 1.5em;
height: 1em;
width: 1em;
text-align: center;
line-height: 1;
border-radius: 100%;
border: 0;
}
.jst-woocommerce-cart-container a,
.jst-woocommerce-cart-container .quantity {
display: block;
color: #555;
font-weight: 700;
}
La vignette du produit doit flotter à droite et conserver une dimension raisonnable :
.jst-woocommerce-cart-container ul.cart_list li img {
display: inline-block;
float: right;
width: 32px;
height: auto;
margin: 4px 0 0 4px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
box-shadow: 0 0 1px #ddd;
}
Enfin, nous donnons aux liens « Commande » et « Voir le panier » une apparence de bouton :
.jst-woocommerce-cart-container p.buttons {
margin-bottom: .5em;
}
.jst-woocommerce-cart-container p.buttons a {
display: inline-block;
margin-right: 5px;
padding: .618em 1em;
cursor: pointer;
text-decoration: none;
border-radius: 3px;
background-color: #ccc;
background-image: none;
box-shadow: none;
text-shadow: none;
}
Pour finir, nous masquons par défaut le champ de recherche et le widget de panier :
html.js .jst-woocommerce-cart-container, html.js .jst-search-form input.search_field {
display: none;
}
Tout est prêt pour animer tout cela avec quelques scripts.
Animation Javascript du menu WooCommerce
Dans functions.php, vous allez appeler le fichier de scripts de nous allons créer :
/**
* Child Theme Scripts
*/
function jstchildtheme_enqueue_scripts()
{
// ...
wp_enqueue_script(
'jst-woocommerce-menu-scpts',
get_stylesheet_directory_uri().'/js/jst-woocommerce-menu-scpts.js',
array( 'jquery' ),
filemtime( get_stylesheet_directory().'/js/jst-woocommerce-menu-scpts.js' ),
true
);
}
Nous devons créer le fichier Javascript « jst-woocommerce-menu-scpts.js » dans un répertoire « js », à la racine du thème enfant pour y placer le code suivant :
(function($){
$(document).ready(function(){
// ici viendra le code de nos animations
});
})(jQuery);
Si votre thème ne prend pas en charge l’animation du menu déroulant malgré notre balisage, vous pourrez l’ajouter vous-même :
$('li.menu-item-has-children').hover(
function(){
$('ul.sub-menu', this).stop(true, true).slideUp(0).slideDown(450);
},
function(){
$('ul.sub-menu', this).stop(true, true).fadeOut(450);
}
);
Nous allons prendre en charge de l’affichage de notre widget panier WooCommerce grâce à la fonction slideToggle() de jQuery :
var $cartContainer = $( '.jst-woocommerce-cart-container' );
$( '.jst-menu-cart-link' ).click(function(e){
e.preventDefault();
$cartContainer.slideToggle( 250 );
return false;
});
Pour terminer, nous allons nous servir du bouton de soumission pour afficher ou masquer le champ texte (recherche) au clic. La soumission du formulaire de recherche de produits se fera avec la touche “Enter“ :
var inputOn = false, $searchField = $( 'input.search_field' );
var ua = navigator.userAgent, evt = ( ua.match(/iPad/i) || ua.match(/iPhone/) ) ? 'touchstart' : 'click';
$( '.search-submit' ).on( evt, function(e){
e.preventDefault();
if( ! inputOn ){
$searchField.fadeIn();
}else{
$searchField.fadeOut();
}
inputOn = ! inputOn;
return false;
});
$searchField.keyup(function(e){
if( 13 == e.which ){
$('#header-product-search-form').submit();
}
});
ET voilà le résulat final de notre menu client WooCommerce !
Un menu WooCommerce adapté à vos besoins
Voilà, vous savez maintenant construire votre propre menu WooCommerce, vous pourrez donc adapter sa structure HTML, ses comportements JavaScript et ses règles de style CSS en fonction de votre site ou de vos envies.
À titre d’exemple vous pouvez placer votre menu dans une barre indépendante, utiliser une autre classe CSS que “wrap“ pour son conteneur central, choisir un menu sur fond blanc, minifier vos fichiers pour les optimiser,etc.
À bientôt 😉
Parlons directement de votre projet
06.12.06.36.06
[/jst_a]