Gérer les menus et la recherche WordPress

Gérer les menus

Pour ajouter un menu dans un thème WordPress sur-mesure en tant que développeur, vous pouvez suivre ces étapes :

Créez une zone d’emplacement de menu dans le fichier functions.php de votre thème.

Vous pouvez ajouter le code suivant pour créer une zone d’emplacement de menu :

// functions.php

function nom_du_theme_register_menus() {
    register_nav_menus(array(
        'menu_principal' => 'Menu Principal', // remplacez "menu_principal" par un nom de menu de votre choix
        // ajoutez plus de zones d'emplacement si nécessaire en suivant la même structure
    ));
}

add_action('after_setup_theme', 'nom_du_theme_register_menus');

La fonction register_nav_menus() est une fonction importante de WordPress qui permet aux développeurs de déclarer des emplacements de menu dans leur thème.

Cette fonction prend un tableau associatif comme argument, où la clé est un identifiant unique (slug) pour l’emplacement de menu, et la valeur est une description de l’emplacement de menu.

Une fois que vous avez défini l’emplacement du menu dans le fichier functions.php, vous devez maintenant afficher le menu dans le modèle de votre thème, généralement dans le fichier header.php.

Vous pouvez utiliser la fonction wp_nav_menu() pour cela.

Voici un exemple de code :

// header.php

<nav>
    <?php
    $args = array(
        'theme_location' => 'menu_principal', // utilisez le nom que vous avez choisi dans la fonction register_nav_menus()
        'container'      => 'ul', // pour éviter d'avoir une balise div autour
        'menu_class'     => 'site_menu_principal', // classe CSS pour personnaliser le style du menu
    );
    wp_nav_menu($args);
    ?>
</nav>

Lorsque vous appelez la fonction wp_nav_menu(), vous pouvez passer un tableau d’arguments en tant que paramètre pour personnaliser le menu que vous souhaitez afficher.

Ces arguments vous permettent de contrôler le comportement, le style et le contenu du menu.

L’argument theme_location permet de définir l’emplacement (slug) précédemment défini via la fonction register_nav_menus() dans functions.php.

Remarque : vous trouverez l’ensemble des arguments définis dans la documentation officielle des menus WordPress.

Enregistrez les modifications apportées aux fichiers functions.php et header.php de votre thème.

Vous pouvez le faire via FTP ou en utilisant un éditeur de thème intégré dans l’interface d’administration de WordPress.

Enfin, allez dans l’interface d’administration de WordPress et accédez à Apparence > Menus.

Vous devriez à présent voir l’emplacement du menu que vous avez créé dans la section “Emplacements des menus“.

Sélectionnez le menu que vous souhaitez afficher dans cet emplacement et enregistrez les paramètres.

Une fois ces étapes terminées, le menu devrait apparaître dans l’emplacement que vous avez spécifié dans le fichier header.php de votre thème personnalisé.

Vous pouvez personnaliser davantage le style du menu en utilisant des classes CSS ou en modifiant le code dans le fichier header.php.

Gérer la recherche

Pour intégrer une barre de recherche dans un thème WordPress en utilisant get_search_form(), suivez ces étapes :

1. Assurez-vous que votre thème prend en charge la fonction get_search_form(). La plupart des thèmes WordPress modernes incluent automatiquement cette fonction dans leur code, mais si vous rencontrez des problèmes, vérifiez le fichier searchform.php dans le répertoire racine de votre thème. Si le fichier n’existe pas, créez-le et ajoutez le code ci-dessous.
2. Créez un fichier searchform.php dans le répertoire racine de votre thème (si cela n’a pas déjà été fait).
3. Dans le fichier searchform.php, insérez le code HTML pour la barre de recherche. Vous pouvez également ajouter des classes CSS ou des attributs supplémentaires pour personnaliser le style de la barre de recherche.

Voici un exemple de code pour la barre de recherche simple :

<!-- searchform.php -->

<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
    <label>
        <span class="screen-reader-text">Recherche pour :</span>
        <input type="search" class="search-field" placeholder="Rechercher..." value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit">
        <span class="screen-reader-text">Rechercher</span>
    </button>
</form>

Remarque : la fonction get_search_query() est utilisée pour récupérer le terme de recherche saisi par l’utilisateur lorsqu’il effectue une recherche sur votre site.

Conseil : un placeholder “Rechercher…” permet d’aider la saisie de l’internaute.

Pour afficher la barre de recherche dans votre thème, ajoutez l’appel à get_search_form() à l’endroit où vous souhaitez que la barre de recherche apparaisse.

Par exemple, vous pouvez l’insérer dans le fichier header.php pour l’afficher dans l’en-tête de votre site.

<!-- header.php -->

<header>
    <!-- autres éléments d'en-tête -->
    <?php get_search_form(); ?> <!-- affiche la barre de recherche -->
</header>

Remarque : il est inutile d’indiquer echo devant get_search_form() puisque le formulaire sera automatiquement affiché dans le template.

Une fois que vous avez enregistré les modifications dans searchform.php et header.php, la barre de recherche devrait être intégrée dans votre thème WordPress, et les utilisateurs pourront effectuer des recherches sur votre site en utilisant cette barre de recherche.

Vous pouvez ensuite personnaliser le style et l’emplacement de la barre de recherche en utilisant des règles CSS supplémentaires dans le fichier de style de votre thème (style.css).

Remarque : une fois la recherche effectuée, c’est le template search.php qui est utilisée pour afficher les résultats.