Comment ajouter un champ de recherche au menu secondaire de Divi

Dans le tutoriel Divi d'aujourd'hui, nous allons vous montrer comment ajouter un champ de recherche à votre menu secondaire. Le menu secondaire est également connu comme l'en-tête de votre page et l'endroit où vous essayez d'insérer des informations pratiques sur votre site Web ou votre entreprise. L'ajout d'un champ de recherche peut être une demande que vous avez reçue d'un client ou un besoin que vous avez pour votre propre site Web. Quoi qu'il en soit, nous allons vous montrer comment intégrer facilement ce champ de recherche dans votre navigation secondaire lorsque vous utilisez le thème Divi.

Résultat

Avant de plonger dans les différentes étapes que vous devrez franchir pour y arriver ; il peut être intéressant de vous montrer le résultat à l'avance. En suivant les étapes de la publication et en ajoutant des modifications d'apparence CSS, vous obtiendrez le résultat suivant dans un menu secondaire par défaut :

Pourquoi ajouter un champ de recherche à votre menu secondaire

L'ajout d'une possibilité de recherche à votre menu secondaire est l'une des choses que vous avez peut-être essayé de faire. Mais contrairement au menu principal, l'en-tête n'a pas de page distincte dans WordPress qui vous aide à ajouter des éléments manuellement, sans avoir à ajouter de lignes de code PHP au fichier header.php de votre site Web.

Cependant, ajouter une possibilité de recherche dans votre menu secondaire peut être une chose intéressante. Examinons quelques raisons pour lesquelles vous voudriez en ajouter un.

Offrez à vos visiteurs une possibilité de recherche dès le départ

Vous avez toutes sortes de visiteurs sur votre site Web. Certains d'entre eux cherchent à explorer les choses et à prendre leur temps, tandis que d'autres veulent trouver des informations précises tout de suite. En ajoutant votre champ de recherche au menu secondaire, vous aurez la garantie que les visiteurs qui recherchent quelque chose de spécifique ont la possibilité de le faire tout de suite. Puisqu'un menu secondaire est situé en haut de la page, les visiteurs pressés apprécieront l'effort qui améliore leur expérience utilisateur.

Pour enregistrer votre menu principal à partir du champ de recherche

Bien sûr, une autre chose que vous pouvez faire est d'ajouter le champ de recherche au menu principal. Mais dans certains cas, vous ne voudrez peut-être pas le faire. Par exemple; si vous souhaitez garder le focus sur vos éléments de menu ou si vous ne voulez pas mélanger les éléments de menu avec le champ de recherche. Une autre raison pourrait être que vous avez déjà pas mal d'éléments de menu qui donnent l'impression que votre menu principal est occupé, et vous ne voulez pas ajouter un champ de recherche en plus de cela.

Mettre l'accent sur le champ de recherche sans avoir un menu principal flashy

La plupart des gens ont tendance à garder leur menu principal sobre et à faire apparaître leur menu secondaire. Principalement parce qu'ils veulent montrer la différence évidente entre les deux menus. Et secondaire, car le menu secondaire contient souvent des éléments sur lesquels ils souhaitent mettre l'accent (comme les icônes des réseaux sociaux). Lorsque vous décidez d'intégrer également le champ de recherche dans votre menu secondaire, il sera automatiquement mis en évidence et cela stimulera vos visiteurs à rechercher et à trouver exactement ce qu'ils recherchent.

Comment ajouter un champ de recherche au menu secondaire de Divi

Abonnez-vous à notre chaîne Youtube

Ajouter un champ de recherche au fichier PHP d'en-tête

Maintenant, pour ajouter réellement le champ de recherche à votre en-tête, comme indiqué dans l'image ci-dessous, vous devrez principalement ajouter quelque chose au fichier header.php de votre site Web. La ligne de code dont vous aurez besoin est la suivante :

<?php get_search_form(); ?>

Allez-y et copiez cette ligne de code PHP et accédez à votre tableau de bord WordPress. Dans votre tableau de bord WordPress, accédez à Apparence > Éditeur > header.php.

Vous pouvez maintenant placer la ligne de code là où vous souhaitez que votre barre de recherche apparaisse. Puisque nous voulons qu'il apparaisse juste à côté des icônes des réseaux sociaux, nous allons vous montrer où exactement le placer dans le code. Nous devrons le placer juste avant la fermeture du menu secondaire, du conteneur et de l'en-tête supérieur.

Stylisez votre champ de recherche

Par défaut, le champ de recherche semble un peu obsolète. Vous voudrez probablement changer certaines choses juste pour lui donner l'apparence que vous voulez et pour l'adapter à l'apparence du reste de votre site Web. Ce sont trois choses que vous voudrez probablement changer : l'étiquette de recherche, l'entrée de recherche et l'entrée de bouton.

Si vous n'apportez aucune modification CSS au champ de recherche, il ressemblera par défaut à ceci dans votre menu secondaire :

Ce qui n'est évidemment pas le résultat final que nous voulons atteindre. Heureusement, nous pouvons apporter autant de modifications au terrain que nous le souhaitons. Dans la prochaine partie de cet article, nous vous montrerons comment modifier tous les éléments du champ de recherche et nous partagerons également les lignes de code CSS pour obtenir le résultat suivant :

Supprimer/Modifier l'étiquette de recherche

Le premier élément qui fait partie du champ de recherche est l'étiquette de recherche. C'est le texte qui apparaît qui explique aux gens qu'ils peuvent rechercher n'importe quoi sur le site Web en utilisant le champ. Cependant, cette étiquette n'est pas nécessaire. Tout le monde sait aujourd'hui comment fonctionne un champ de recherche. Vous pouvez toujours faire disparaître l'étiquette de recherche en ajoutant " display: none; " au CSS de cette étiquette. Vous pouvez également modifier l'apparence de l'étiquette.

La classe dont vous aurez besoin pour apporter des modifications à l'étiquette de recherche est ".screen-reader-text". Comme indiqué dans l'exemple ci-dessous, vous pouvez désactiver son apparition.

.screen-reader-text {
display: none;
}

Stylisez votre entrée de recherche

La prochaine chose que vous voudrez peut-être styliser est l'entrée de recherche. Pour apporter des modifications à cette entrée, placez toutes les lignes de code CSS entre les crochets suivants :

 input#s
{

}

Stylisez votre entrée de bouton

Et enfin, nous avons aussi le style de bouton. Pour apporter des modifications à cette partie du champ de recherche, placez vos lignes de code CSS entre les parenthèses suivantes :

input#searchsubmit
{
}

Code CSS nécessaire pour notre exemple

Après avoir effectué la modification PHP, vous pouvez instantanément obtenir le résultat indiqué ci-dessus en allant dans votre tableau de bord WordPress > Divi > Options du thème > Général > Et en ajoutant les lignes de code CSS suivantes au champ Personnalisé :

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Résultat

Maintenant que nous avons parcouru toutes les étapes, examinons à nouveau à quoi devrait ressembler votre en-tête :

Dernières pensées

Dans ce didacticiel, nous vous avons montré comment ajouter un champ de recherche à votre menu secondaire. En plus de cela, nous vous avons également montré comment modifier les éléments de ce champ de recherche et vous avons présenté un exemple de lignes de code CSS que vous pouvez simplement copier et coller pour votre propre usage. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par D Line / shutterstock.com