Transformer une page html/css en un site wordpress IV : le menu

Transformer une page html/css en un site wordpress IV : le menu

Dans l’article précédent, nous avons vu comment modifier le footer d’une page html pour le transférer sur un site wordpress. Ici nous allons plus spécifiquement parler du menu.

Dans ma page d’exemple html de base, il y a une balise « <aside> » qui nous interesse particulièrement : elle contient un menu de navigation rangé sous la forme <nav> <ul> <li>, ce qui va convenir parfaitement à notre menu wordpress.

On va donc prendre ce bout de code et l’insérer dans une page menu.php ou sidebar.php :

<aside class="sidebar" role="complementary">
 <div class="wrapper"
 <div class="design-selection" id="design-selection">
 <nav role="navigation">
 <?php wp_nav_menu();?>
 </nav>
 </div>
 </div>
</aside>

Je garde les balises et leur classes, dans ma page html je vide tout ce qui se trouve entre les balises <nav role= »navigation »> et je le remplace par le template tag <?php wp_nav_menu();?>
Ceci va appeler le menu que j’aurai préalablement initié dans mon fichier functions.php avec la fonction suivante:

add_theme_support('nav-menus'); // je préviens wordpress que je veux utiliser les menus.
register_nav_menus(array(// enregistrement des menus
 'primary' => 'Navigation principale' // ici mon menu principal
));

Il faut aussi bien sûr que je le crée dans le backoffice du site :

Ainsi mon fichier sidebar.php contient mon menu, et je l’appelle dans chaque page du site avec le template tag  <?php get_sidebar();?>

C’est wordpress qui va générer les balises ul et li, comme je n’ai pas touché au fichier css de base, mon menu va prendre la forme voulue. Voici la partie css pour mon menu latéral et vertical :

.design-selection li { width: 23%; margin-bottom: 3em; padding-right: 2%; }
.design-selection li:nth-child(odd) { width: 23%; clear: both; padding-right: 2%; }
.design-selection { position: absolute; left: 5%; top: 30em; }
.design-selection ul { margin: 0; width: 100%; }
.design-selection li { float: left; width: 100% !important; padding: 0 !important; margin-bottom: 2em;}
.select:after { text-align: left; background-position: 0 bottom; padding: 0 0 2em; margin: 0 0 2em; }
.design-selection h3{
visibility:hidden;
}

Vous pouvez voir le rendu de ce menu sur le site originel, celui qui m’a servi d’exemple pour la première version de mon site.

Il ne reste plus qu’à créer des articles dans l’administration du site, les relier à des catégories, créer sa page single.php pour la page visuelle d’un article,créer une page category.php si l’on veut personnaliser différemment les catégories du site, créer une page search et créer un search form si on veut un moteur de recherche interne etc..
Au travers de nos 4 petits articles, on a vu les bases pour transformer un modèle de page html/css en un site wordpress. Finalement on ne touche pas vraiment au fichier css , à part quelques réajustements pour les pages personnalisées.
Les 4 articles sont visibles ici :

Transformer son site html en site wordpress I

Transformer son site html en site wordpress II

Transformer son site html en site wordpress III