• Articles
• admin

Chaque site WordPress est différent. En effet, tout le monde choisit un thème ou un « look and feel » différent pour son site. La création d’un en-tête et d’un menu de navigation supérieur dans WordPress sera un processus légèrement différent pour chaque site.

Ici, j’utilise le framework de thème Genesis pour WordPress parce que je l’adore absolument. Cependant, il y aura des points importants dans cet article qui aideront quiconque avec un site Web WordPress.

Cela fait partie d’une série d’articles et de vidéos où je crée un site web à partir de zéro. J’ai d’abord expliqué comment créer un thème enfant pour le framework Genesis, puis j’ai écrit pour commencer à styliser le thème en ajoutant l’arrière-plan et le logo.

Ajout d’un lien Facebook, d’un lien Twitter et d’autres informations à l’en-tête

Après avoir déjà ajouté le logo en haut à gauche de l’en-tête de notre site, nous allons maintenant ajouter des informations supplémentaires sur le côté droit de notre en-tête. Dans ce cas, nous ajouterons des liens Twitter et Facebook, etc., par le biais d’un widget.

Je dois admettre que je suis devenu un peu fou ces derniers temps, après avoir été un peu dédaigneux d’eux dans le passé. Qu’est-ce qu’un widget ? Eh bien, ce sont des morceaux autonomes d’un site Web que vous pouvez faire glisser et contrôler via une zone de widget facile à utiliser.

L’une des nombreuses beautés de Genesis est sa capacité sans effort à élargir n’importe quelle zone du site Web. Donc:

• Si vous voulez un ordre différent de boîtes sur la barre latérale, vous pouvez le faire en quelques secondes.
• Si vous voulez un article en vedette ici, 5 dernières rubriques de catégorie avec des vignettes sur la page d’accueil, vous pouvez le faire en quelques secondes.
• Si vous souhaitez une barre de recherche, un partage social, un flux Twitter, un calendrier, un nuage de tags, etc., ici, là ou n’importe où, vous pouvez le faire en quelques secondes.

Cette fonctionnalité back-end intuitive et facile à utiliser est particulièrement utile lors de la création de sites Web pour les clients qui souhaitent contrôler toutes les zones d’un site Web mais qui n’ont pas les compétences nécessaires pour le faire.

Quoi qu’il en soit, dans ce cas, nous devons créer notre propre widget personnalisé et nous le faisons en faisant glisser un Widget de texte vers la zone d’en-tête à droite de l’interface des widgets Appearance > dans WordPress.

Et dans ce widget de texte, vous pouvez mettre du HTML. Voici le code HTML que j’ai mis pour ce site particulier. J’ai juste un lien de page Facebook, un lien Twitter et un numéro de téléphone.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

Et voici le CSS pour styliser ce qui précède:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

Voici ce qui apparaît sur le côté droit de la tête à la suite:

Vidéo d’ajout d’informations d’en-tête et de menu de navigation

Dans cette vidéo, je montre comment ajouter le widget à l’en-tête et comment styliser le menu dans Genesis.

Création du menu de navigation supérieur

Les menus de navigation supérieurs (ou « barres de navigation ») étaient le fléau de mon existence, mais maintenant, avec les menus Genesis et WordPress, j’ai développé un système très facile de les créer qui prend des secondes plutôt que des heures.

Genesis a déjà mis en place la possibilité d’avoir un menu de navigation Primaire et Secondaire. Pour cet exemple particulier, je me suis débarrassé du Menu de navigation secondaire en utilisant les paramètres du thème Genesis car le client n’en voulait qu’un.

Dans la vidéo ci-dessus, je montre comment je modifie le CSS pour que le menu ressemble à celui du visuel PSD que j’ai fait.

En utilisant les outils de développement Chrome ou le module complémentaire Firebug pour Firefox, vous pouvez indiquer quels sélecteurs du code HTML sont utilisés dans le CSS pour styliser le menu.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

Comme vous pouvez le voir dans la vidéo ci-dessus, j’ai augmenté le rayon des coins arrondis, ajouté un arrière-plan dégradé et changé la couleur de la bordure du menu. Alors maintenant, le menu ne ressemble pas au gris ennuyeux que vous obtenez avec une installation Vanilla Genesis.

J’ai également ajouté le CSS suivant pour changer la couleur du texte dans le menu en blanc.

#nav li a {color: #fff; }

Il est également possible de modifier le style des liens de page en cours, des liens de survol, des liens de sous-page et des liens de sous-sous-page.

Avec Genesis, vous pouvez facilement avoir des menus déroulants pour les sous-pages (ou les pages enfants), puis des liens volants pour les sous-sous-pages (ou les pages petits-enfants). Vous pouvez les avoir sur les menus de navigation primaire et Secondaire.

Création de pages, de pages enfants et de pages petits-enfants

Voici ma vidéo où j’ajoute de nouvelles pages au menu WordPress afin qu’elles apparaissent dans le menu de navigation sous forme de pages, de pages enfants (sous forme de listes déroulantes) et de pages petits-enfants (sous forme de flyouts).

Vous pouvez choisir une page pour être une page enfant ou petit-enfant sous Parent dans l’éditeur de page. Et lorsque vous regardez les pages (sous Pages > Toutes les pages), les pages enfant et petit-enfant sont en retrait sous leur parent. Cela leur donnera également une URL logique (par exemple, www.site.com/music/jazz/charlie-parker où la page « Charlie Parker » est un enfant de « Jazz » qui est un enfant de « Musique »).

Création d’un menu de navigation avec des listes déroulantes et des volants

Pour que ces pages apparaissent correctement dans le menu de navigation, il vous suffit de les faire glisser et de les déposer dans leurs positions respectives dans les Menus Apparence >. Encore une fois, les pages enfants sont en retrait sous leur parent. N’oubliez pas de donner un nom au menu (comme « barre de navigation », par exemple) et de le définir comme le menu de navigation principal.

Donc, organiser les pages dans la zone de menus Apparence WordPress > comme ceci…

… va créer un menu déroulant avec des envolées comme celle-ci:

Veuillez voir la vidéo ci-dessus pour une démonstration de cela.

Qu’en pensez-vous ?

Que pensez-vous de cette méthode d’édition de l’en-tête et du menu de navigation d’un site Web? Faites-vous cela d’une manière différente?