Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos Ajouter une barre de recherche dans un menu personnalisé
Le 12 November 2011
par Jonathan B.
| 45
Cette astuce permet d’ajouter une barre de recherche au menu de navigation personnalisé de votre site WordPress.
Je vous ai appris plusieurs astuces sur les menus personnalisés de WordPress. La première d’entre elles consistait à ajouter un lien vers notre page d’accueil tandis que la deuxième nous permettait d’ajouter un lien de connexion/déconnexion.
Cette fois-ci, nous allons insérer une barre de recherche dans le menu de navigation personnalisé grâce à la fonction get_search_form().
Copiez le code ci-dessous dans le fichier functions.php à la racine de votre thème :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li>' . $searchform . '</li>';
return $items;
}
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
[/pastacode]
Cet article a été mis à jour il y a 4772 jours
- Il n'est peut être plus à jour !
Article écrit par Jonathan B.
Youtube
Twitter
Facebook
45 Commentaires
Je vous ai appris… Nous allons ajouter… Bonjour les fautes d’orthographe !
Merci pour les précisions.
L’article est corrigé.
bonjour Jonathan, ça ne marche pas chez moi :( je ne pige vraiment pas mon erreur: j’ouvre mon wordpress, apparence, éditeur, fonction du thème, et je colle cash ton texte dedans c’est bien ça ?
merci pour ta réponse, et pour tes explications !
@Clément : Le mieux c’est d’ouvrir le fichier functions.php via un client FTP et d’insérer le code dedans.
Bonjour,
votre code fonctionne pour la barre de recherche. par contre j’aimerais la postionné a droite du menu et non en dessous. comment faire ?
merci d’avance
Daccord mais comment faire cela ?
Pourrais tu m’expliquer ?
Car en faite c’est assé urgent …. Désolé
Et je suis nul en code ….
Merci d’avance
@Huez : Cela ne dépend pas de WordPress. Il va falloir utiliser un peu de CSS.
Ajoutez un id “searchform” au li qui contient le formulaire afin de pouvoir le cibler via CSS.
@Huez : Ca va être difficile étant donné que je connais pas votre thème et encore moins le CSS de celui-ci ^^
Je me suis servi de votre technique pour ajouter la fonction recherche dans le menu. Par contre comme vous pouvez le voir (http://l-objectif.fr) elle n’est pas centrée. J’ai vu dans les commentaires qu’il fallait ajouter un id “searchform” pour le modifer par le css mais comment puis-je faire cela (ajouter la fonction id).
Merci
Enfin je pense avoir trouvé, c’est en rajoutant : dans mon fichier header.php ?
Si c’est bon que dois-je mettre dans mon fichier css pour régler la chose ?
@Gianone : Le code présent sur cet article est à mettre dans le fichier functions.php de votre thème !
Pour ajouter l’id sur le li du formulaire, il ne faut pas chercher compliqué !
Et vous faîtes le reste du travail avec CSS ;)
Et concernant mon problème vous avez une solution pour le CSS ? Car j’ai beau modifier le css à coup de margin, float et rien n’y fait (je suis débutant-confirmé).
http://l-objectif.fr
Voilà ce que j’ai mit pour le moment :
.searchform {margin-top:0}
@Gianone : searchform est un ID et pas une class ;)
c’est #searchform au à place de .searchform
Bonjour, j’ai plusieurs menus personnalisées et je voudrait que la barre de recherche n’apparaisse que dans un seul. est-ce possible…?
merci,
cependant comment trouver cette localisation dans un thème
@Olivier Roux : Il est possible d’ajouter la barre de recherche en fonction de la localisation, mais pas de menu en lui-même.
Par exemple, avec le thème Twentyeleven, si on souhaite que la barre de menu soit disponible uniquement sur la localisation “Navigation” (dont l’identifiant est “primary”), il suffit de vérifier la localisation du menu pour afficher ou non la barre de recherche.
Voici un exemple de code :
function add_search_box($items, $args) { if( $args->theme_location == 'primary' ) { ob_start(); get_search_form(); $searchform = ob_get_contents(); ob_end_clean(); $items .= '@Olivier Roux : Vous devez chercher la fonction register_nav_menu dans le fichier functions.php de votre thème pour connaître les informations.
Par exemple, voici comment le thème Twentyeleven déclare la localisation “primary” :
Bonjour,
Merci pour votre tuto, cela m’as fait économiser quelques heures… !
J’aurai une autre question à ce sujet, j’aimerai que la barre “Rechercher” soit alignée à droite en lieu et place de son emplacement de base (collé au menu à gauche ce qui n’est esthétiquement pas très beau).
J’ai beau chercher dans le CSS mais en vain, pourriez-vous m’aider ?
Merci d’avance !
@Thomas : Je ne peux pas vraiment vous aider sans connaître le CSS de votre site. Généralement, un float: right sur le formulaire devrait suffire à le placer à droite.
Bonjour et merci pour le code!
pourriez vous m’indiquer s’il est possible de faire la meme chose avec le formulaire de google cse? à savoir le mettre au meme endroit dans la barre de navigation? merci!
@gyom: Vous pouvez mettre ce que vous voulez !
Pourriez vous mindiquer svp comment proceder pour que le formulaire google se mette au meme endroit (choses a remplacer dans le code) merci
@gyom: Ne connaissant pas le code de ce genre de formulaire, je ne pourrais pas vous aider.
bonjour, il doit parler de google custom search, il y a 2 codes au moins, 1 pour la barre de recherche et un autre code à mettre dans une page à créé pour le résultat des recherches.
on voit un exemple de code pour la barre de recherche entre les balises script là
https://developers.google.com/custom-search/docs/element?hl=fr
Bonjour Jonathan,
Merci pour ce tuto mais je rencontre le même problème que d’autres quant à la position de cette barre de recherche. J’utilise le thème catchbox sur wordpress. Pouvez vous m’aider?
@Pitou: Pour le positionnement de la barre de recherche, il s’agit de CSS. Je ne peux donc pas vous aider de côté là.
Bonjour,
j’ai essayé le code mais ca m’a foiré mon code avec une erreur “line 12” donc je suis allé sur le ftp pour enlever les lignes que j’avais entré sauf que maintenant il me dit
Parse error: syntax error, unexpected T_IF in /homez.112/axianema/www/wp-content/themes/twentyeleven/functions.php on line 1
sauf que le fichier function.php n’est plus le meme quand je l’ouvre, tout est sur la meme ligne en mode gros bordel donc je peux pas me retrouver.
peux tu m’aider si tu prend la main sur mon pc parceque là ca craint ? :/
@axianemakeupfr: Désolé, mais je ne peux pas vous en dire plus que les erreurs PHP qui vous indiquent ce qui ne va pas.
Pour diverses raisons , je n’interviens pas sur les PC des autres ^^
Bonjour,
Merci pour toutes ces astuces qui m’ont beaucoup aidé tout au long de la création du site.
J’ai un petit problème au niveau de ma barre de menu, qui place le dernier onglet de mes catégories en dessous, c’est à dire sur une deuxième ligne , alors qu’il reste largement la place pour qu’il soit aligné avec les autres.
Est il possible d’avoir tous ses onglets sur une seule ligne peu importe la taille de l’écran?
Merci d’avance pour votre aide :)
@Toquei : Votre problème ne dépend pas de l’astuce. On rentre dans le cadre du CSS et là je ne peux pas vous aider ;)
Bonjour, je me demandais si c’est possible de changer le mot “search” pour un icône et de changer ce qui est écrit à l’intérieur du input (find this blog!)
Merci :)
@banzai: Vous pouvez faire ce que vous voulez à ce niveau là ;)
Bonjour Jonathan,
Merci pour toutes ces information très claires ont permis à un débutant comme moi j’ajouter la “recherche” à l’endroit souhaité.
J’ai tout de même une petite question. Pourrais-tu m’indiquer à quel endroit se trouve la fonction à modifier pour centrer son menu afin qu’il ne reste pas coller à gauche ? (désolé pour le hors-sujet)
J’utilise le thème Parabola qui est assez similaire (j’ai l’impression) au Twenty !
Merci :)
@Minicom: Désolé, votre demande concerne du CSS. Je ne suis pas en mesure de vous aider.
Merci Jonathan, voilà qui confirme ce que je pensais :)
Très bonne journée !
Bonjour à vous!
Une question un peu particulière pour avoir testé le code.
Clairement, en ajoutant le code sur mon site, cela bloque les requêtes faites par le CDN provoquant malheureusement des erreurs 403 (forbidden) mais c’était prévisible.
Du coup, est il possible de changer ce code en y acceptant une liste d’ IP autorisé?
Cdt,
Bonjour et merci beaucoup pour cet article!
Le code fonctionne… trop :) En fait il ajoute la barre de recherche dans le menu (ce que je voulais, parfait!) mais également dans le footer (bien que le widget “recherche” ne soit pas installé). Comment puis-je régler ce problème et n’avoir une barre de recherche que dans le menu?
Merci d’avance pour la réponse :)
Bonjour,
J’ai affiché la barre dans recherche dans mon menu mais elle ne s’affiche que sur la page d’accueil. Dès que je change d’onglet, elle disparaît.
Une idée d’où cela pourrait venir ?
(J’utilise le thème Graphene)
Bonsoir,
Monsieur Jonathan, j’ai deux questions à vous poser :
– Comment élargir mon moteur de recherche ?
– Pourquoi mon moteur de recherche s’affiche en-dessous du menu principal de mon site sous Chrome alors que c’est à côté dans Mozilla Firefox ?
bonjour
j’ai ajouter votre code et ça bien marché
mais la problème c’est que j’ai deux menus dans mon site et je veux que la zone de recherche n’apparais que dans le menu principale.
comment je le fais et merci pour l’aide .
je souhaite que vous me répondre le plus vite possible !!!
bonjour
j’ai ajouter votre code et ça bien marché
mais la problème c’est que j’ai deux menus dans mon site et je veux que la zone de recherche n’apparais que dans le menu principale.
comment je le fais et merci pour l’aide .
je souhaite que vous me répondre le plus vite possible !!!
Comment faire une form pointe sur une page ??
salut,grâce a votre tuto que j’ai finalement ajouté la barre de recherche sur le menu.
Mais mon problème est quand je cherche une page que j’ai déjà créer sur la barre de recherche ajoutée au menu ,elle ne s’affichera pas,s’il vous plais comment faire pour que ça soit résolut.
Merci.
Bonjour, merci pour votre astuce, j’ai juste un soucis, j’ai un menu “principal” mais également un menu en “top header”, comment puis-je faire pour que l’appel de la barre de recherche ne s’affiche que sur le menu principal s’il vous plait???
Merci pour votre réponse et votre aide.
Bonjour,
ça marche super mais comment faire pour avoir la barre de recherche en français ? (il marque search et j’aimerais qu’il marque recherche dans le placeholder).
Merci