Insertar buscador en el menú principal de WordPress – Search Form
PROBLEMA: muchos temas WordPress no tienen habilitada la función por defecto para añadir el buscador en la barra de menú WordPress o en el header de la página.
SOLUCIÓN: para añadir el buscador en la barra de menú WordPress solo necesitas añadir a tu archivo una pequeña función.
En WordPress puedes crear uno o varios menús (depende del theme) con enlaces de páginas o entradas, para crear menús en wordpress tenemos que ir al administrador de nuestra web y en Apariencia >> Menús ir creando los menús necesarios con sus enlaces a páginas.
En algunos proyectos, además de estos enlaces de páginas, necesitamos añadir al menú de nuestra web links a páginas externas o una barra de buscador. Hay themes que desde la configuración del tema te permiten añadir el buscador dentro del menú principal, sin embargo es probable que tu tema no tenga habilitada esta función por defecto y necesites añadir la barra de buscador como un item más del menú. Es este artículo encontrarás un código muy sencillo que te permite hacer esto.
Si necesitas añadir la barra de buscador en la barra de menú WordPress sólo tienes que añadir una pequeña función al archivo functions.php de tu tema hijo o tema principal.
wp-content/themes/tutema/functions.pnp
Es muy importante trabajar con un tema hijo para no perder los cambios y funciones tras las actualizaciones. Si no sabes como crear un tema hijo puedes leer primero las siguientes entradas donde se explica paso por paso como conseguir crear un tema hijo:
Función añadir buscador en menú WordPress
Copia y pega el siguiente código en el archivo functions.php
add_filter('wp_nav_menu_items','buscador_en_menu', 10, 2);
function buscador_en_menu($items, $args) {
$searchform = get_search_form( false );
$items .= '<li>' . $searchform . '</li>';
return $items;
}
Puedes añadir todos los items que necesites a tu menú WordPress, por ejemplo si necesitas además del buscador añadir un link a otro sitio debes utilizar este ejemplo:
add_filter('wp_nav_menu_items','buscador_en_menu', 10, 2);
function buscador_en_menu($items, $args) {
$searchform = get_search_form( false );
$items .= '<li>' . $searchform . '</li>';
$items .= '<li><a href="http://www.otroenlace.es">Otro enlace</a></li>';
return $items;
}
Lo que estamos logrando con esta función es llamar al listado del menú de nuestro wordpress y añadir al final del mismo nuevos items a la lista.
Como ves es bastante sencillo.
Te puede ayudar:
Modificar el buscador en WordPress – 4 técnicas sencillas.
Me bueno el post. Se podría realizar un buscador que permita seleccionar una categoría y la búsqueda se realice dentro de las etiquetas de esa categoría? Algo así como las web de Pixabay o Pixel (se que no están hechas en WordPress), donde las personas seleccionan si desean buscar un vídeo o imagen (categoría), coloca las palabras claves (etiquetas) y luego le aparece el contenido relacionado (entrada).
Gracias por el comentario José Luis,
es probable que sí, WordPress diferencia tipo de medios y etiquetas, te veo programando unas horas. Saludos,
Hola, existe alguna posibilidad de escoger en q posision del menú se insertará el nuevo item mediante wp_nav_menu_items o solo sagrega al final del menu existente???
Buenas, el buscador se puede poner en medio del menú?? no he conseguido encontrar nada. gracias.
Hola Nerea, buenas tardes tengo un problema ya que mi buscador funciona cuando ingreso al sitio desde el administrador de wordpress, pero al entrar a la página y buscar una receta cualquiera no funciona, ¿que puede estar pasando?.
Hola Oscar, ya veo que lo tienes todo perfectamente controlado y funciona el buscador.
Feliz día
Te agradezco mucho el articulo
Gracias Jose Matias, que tengas un feliz día.
Hola, muchas gracias por el artículo, tengo una pequeña duda, como has puedes ver en mi web (comohow.net) he puesto el buscador en el menú con el código que habeis puesto en el artículo, el problema es que me gustaría dejarlo a la derecha pero no se como puedo hacerlo… un saludo!
Buenas tardes Sergio,
con el código se añade al final del menú el buscador, lo normar es que al ser el último elemento del menú quede a la derecha. Si tiene problemas de espacio saltará a la siguiente línea y hay que ajustar lo elementos. He revisado tu página pero no veo el buscador en el menú y no puedo saber en concreto que necesitas.
Un saludo,
Muchas gracias. Antes solo estaba en la barra lateral pero ahora está en la cabecera de mi web. https://www.novelasdefantasia.com/blog/
¡Gracias de nuevo!
Siempre gracias a ti Carlos
Gracias por el buen artículo, escribo porque necesito tu ayuda. Estoy probando una plantilla en una web de prueba, aquí está la url http://money.pcriot.com/. Me gustaría agregar el buscador en el menu pero no puedo lograrlo. Explico mejor, el buscador aparece pero no cumple su funcion cuando esta entre los items del menu. Si aquí le pongo get_search_form( true ) funciona perfectamente, pero de hecho no esta en el menu. La plantilla es Thumbs Portfolio si eso puede ser de ayuda. Espero tu respuesta y sigues así
Hola Carlos, efectivamente no permite interactuar pero tampoco parece que arroje ningún error. No entiendo esta parte:
«Si aquí le pongo get_search_form( true ) funciona perfectamente, pero de hecho no esta en el menu.»
Has comprobado si el buscador funciona en otra parte de la página?
Ya me dices…
Hola, Nerea, he visto que te manejas muy bien con los códigos de wordpress. ¿Puedo hacerte una pregunta que me tiene loco?.
Tengo instalado en mi web el tema Poseidon y me gusta como va, pero resulta que en el ordenador el menú que aparece arriba, se extiende cuando le doy clic, pero luego no hay manera de ver todo lo que contiene, se queda a mitad y cuando le pones el ratón sobre el y le das a la ruedecita para desplazarlo hacia arriba y ver todas las secciones completas (como se suele hacer en las paginas) no se mueve se queda quieto… ¿Que puedo hacer para corregir este fallo?…. gracias y disculpa la molestia.
Buenos días, he mirado la página en Chrome con un Mac y no veo ningún problema en el menú, no sé si ya lo has solucionado o es cosa de los navegadores. Si sigues con el mismo problema dime con que navegador estás visualizando la web.
Un saludo,
Gracias Nerea por tu esfuerzo, tengo el Crhome y también lo he probado el el firefox, y veo lo mismo, podría ser fallo de mi ordenador, ya que cuando lo miro con mi móvil, si que va bien. Se extiende el menú y si pones el cursor sobre el listado del mismo te deja subirlo hasta la ultima sección del mismo, pero con el pc, no me deja, se queda parado y solo se desplaza hacia arriba la pagina que esta al fondo…
Hola de nuevo, realmente no es fallo del ordenador, a veces una web actúa de forma diferente en un navegador u otro o en un SO, hay que encontrar porque se producen esos cambios de comportamiento e intentar solucionarlo para no perder usuarios potenciales. Muchas veces los problemas que ves simplemente son reglas de estilo, otras veces el Js. ¿Qué tal si hacemos pruebas?
Si tienes acceso a los archivos vamos a cambiar en la hoja de estilos (RUTA wp-content/themes/tu-tema/style.css), lo siguiente:
dentro de .main-navigation-menu ul (lo encontrarás en la línea 839 del archivo) tienes la regla de estilos z-index: 99;, modifica el valor 99 por 999, guarda los cambios, vacía caché y me comentas si varía el comportamiento del menú.
Me vas comentando…
hola, he echo el cambio pero sigue igual.
¿Puedes enviar capturas de pantalla?
Hola, he cambiado de monitor, le he puesto otro mas grnade y parece que va bien, lo probare un poco mas y si es caso te vuelvo a decir, gracias…
Entiendo lo que dices, pero así no evitas el problema, tienes que conseguir que se vea bien en todas las resoluciones de pantalla y sobre todo en las más usuales. Trabajas con las herramientas de desarrollo del Navegador? que dimensiones de pantalla tiene el monitor anterior?
El anterior monitor lo tenia con una resolución grande porque no veo bien, pero ahora este esta algo menos y parece que no hace fallo, pero como comentas creo que el fallo no se ha ido, lo seguiré mirando y te comento. Gracias por tu esfuerzo… Tengo una cosita mas, no se si se podrá hacer. Si miras mi web verás que en algunas paginas sale en la parte inferior derecha una marca de agua de un pluning free que he puesto, se podría quitar esa marca??? ya me dirás, gracias de antemano.
Hola Santos, no veo el plugin del que me hablas.
Te mando enlace para que lo veas: https://compresinintermediarios.com/alimentos-bebidas/alinos-aceites-vinagres-salsas
Es el que figura abajo a la derecha, el: WordPress Tabs Free Version
Hola Santos, estamos hablando de un plugin gratuito, por lo tanto a cambio de su uso es lógico que hagan publicidad, lo puedes eliminar con CSS o dejar el logo como agradecimiento al trabajo que han realizado y que en tu caso te ayuda en alguna función de tu página.
Gracias amiga linda la verdad quería con el icono de la Lupita jeje pero bueno este también es útil. Muchas gracias
Hola Coco, si quieres poner el icono lupa este post te puede ayudar:
>> Modificar buscador WordPress
Saludos y feliz día!
Hola, funciona genial pero sabes ¿cómo podría hacer para que el buscador me aparezca primero y luego el resto de opciones?, ahorita me está apareciendo al final y para cuando la página se vea en celular debería estar primero.
Hola Gonzalo, en este caso puedes editar el archivo head.php de la página y antes de llamar al menú principal pero dentro del div de menú llamas al buscador:
echo get_search_form();
Un saludo,
Hola Nerea, yo soy nueva en wordpress y mis conocimientos son escasos, te pido ayuda ver si me puedes aclarar mi duda.
Estoy usando este código:
add_action( ‘wp_enqueue_scripts’, ‘child_enqueue_styles’, 15 );
add_filter( ‘wp_nav_menu_items’, ‘dcms_item_search’, 10, 2);
function dcms_item_search( $items, $args ) {
if ($args->theme_location == ‘primary’) {
$items .= »
. »
. »
. ‘‘ . _x( ‘Buscar:’, ‘label’ ) . ‘‘
. »
. »
. »
. »
. »;
}
return $items;
}
pero el buscador me sale al final y no quiero eso, quiero que me salga antes de todos mi items. Estuve leyendo lo que le pondiste a Gonzalo y cuando busco el archivo head.php me aparece (header.php <—- no se si es lo mismo) :
<?php
/**
* The header for Astra Theme.
*
* This is the template that displays all of the section and everything up until
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Astra
* @since 1.0.0
*/
if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly.
}
?>
<html >
<meta charset="»>
<body >
<div
‘page’,
‘class’ => ‘hfeed site’,
)
);
?>
>
mi duda: ¿ Como puedo modificar eso para que me salga el buscador en en centro y no al final ?
Dianelis, es el header.php, busca donde carga el menú y añade el código que le comenté a Gonzalo
Hola,
¿Sabrías decirme cómo configurarlo para que se quede a mano derecha en la misma línea? Si te fijas ahora (no te meto link, tranqui: comprarchinobien.com) me salta abajo.
¡Gracias!
Buenos días Dani, el elemento del menú salta por falta de espacio. Tienes múltiples opciones trabajando con los estilos CSS.
Localiza tu hoja de estilos wp-content/themes/tutema/archivo.css
1.- Puedes ampliar el ancho del elemento contenedor #wrapper, ahora mismo tiene un ancho de width: 1150px, por ejemplo puedes ampliarlo a 1250 o 1300
#wrapper {
width: 1300px !important; //AÑADE ESTO AL ARCHIVO
}
y ampliar la barra de menú
.fusion-header-wrapper .fusion-row {
max-width: 1300px !important;
}
2.- Otra opción sin realizar el punto 1. Reducir la separación de los elementos del menú. Actualmente tienen un padding derecho de 45px.
.fusion-main-menu>ul>li {
padding-right: 11px;//AÑADE ESTO AL ARCHIVO
}
Con el padding tan reducido yo veo los menús demasiado juntos y el efecto no me gusta mucho.
3. Puedes combinar ambas soluciones, por ejemplo:
#wrapper {
width: 1250px !important;
}
.fusion-header-wrapper .fusion-row {
max-width: 1250px !important;
}
.fusion-main-menu>ul>li {
padding-right: 25px;
}
Posibilidades hay varias, espero que esta explicación te ayude a entender las opciones que tienes.
Gracias por escribir y hasta siempre!
Jo, estupendo, muchas gracias! A ver si lo consigo, la verdad es que se me da bastante como el ojete todo lo que tenga que ver con diseño ^^
¡Saludos!
Graaciass Genioo!!! de verdad me sirvio de mucho, me estaba matando la cabeza buscando plugins u otra cosa que pudiese solventarme el problema pero tu lo hiciste gracias de verdad!!!
Gracias a ti Daniel, que tengas un buen fin de semana!
No se como acceder al archivo functions.php del tema «gateway» que estoy utilizando en mi blog. Soy nueva en esto y si me lo pudieras explicar estaría muy agradecida. Gracias
Buenas tardes María, voy a intentar ayudarte. Necesito que me des algunos datos: supongo que tienes ya un dominio propio y la página alojada en un servidor, si es así te indicaré como manejar los archivos.
Si tu página es tipo tusitio.wordpress.com no puedes acceder a los archivos.
Ya me dices algo,
Hola Nerea, mi pagina es dominio propio pero hosting compartido, tengo limitado algunas opciones del wordpress, me ayudad please
Hola Juan,
1.- prueba a acceder al archivo functions.php desde Ajustes >> Editor
si esta opción la tienes limitada puedes acceder descargando los archivos del servidor.
Necesitas tener una cuenta ftp creada en el servidor. Si no tienes cuenta ftp y tienes acceso al panel de control de tu servidor puedes crear una o contactar con la persona indicada para que te cree una cuenta.
2.- utiliza una aplicación FTP como Filezilla para descargar todos los archivos en tu ordenador y poder editarlos.
functions.php está dentro de la carpeta wp-content/themes/tutema
Si tienes alguna duda más me avisas.