• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar búsqueda en un menú de WordPress

Agregar búsqueda en un menú de WordPress

Formulario de búsqueda en un menú WordPress

[ 7 noviembre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Anteriormente habíamos visto, Cómo agregar enlaces de login y logout al menú de WordPress, usando un código similar podemos agregar cualquier elemento HTML como parte del menú, en este artículo veremos cómo agregar un formulario de búsqueda en un menú de WordPress

 

Resultado Final

El formulario de búsqueda será parte de los ítems del menú principal, al final obtendremos algo similar a la siguiente imagen:

Formulario de búsqueda como ítem de menú

 
Veremos dos maneras de lograr esto, las cuales se detallan a continuación.
 

Opción 1 – Código de formulario insertado en menú

Este primero caso nos ofrece mayor flexibilidad, ya que insertaremos directamente el código HTML y PHP del formulario como parte del ítem de menú.


add_filter( 'wp_nav_menu_items', 'dcms_item_search', 10, 2);

function dcms_item_search( $items, $args ) {

	if ($args->theme_location == 'primary') {

		$items .= '<li class="menu-item item-search">'
				. '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">'
				. '<label>'
				. '<span class="screen-reader-text">' . _x( 'Buscar:', 'label' ) . '</span>'
				. '<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Buscar …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />'
				. '</label>'
				. '<input type="submit" class="search-submit" value="" />'
				. '</form>'
				. '</li>';
	}

	return $items;
}

En el código anterior

  • Usamos el filtro wp_nav_menu_items , con este filtro se usa la función dcms_item_search, la cual tiene dos parámetros y se ejecutará con la prioridad 10 por defecto
  • Dentro de la función dcms_item_search comprobamos si estamos trabajando en el menú principal, esto se logra a través de la comprobación del registro de menú, en nuestro caso ‘primary’
  • Luego agregamos el nuevo código HTML, en nuestro caso será un formulario de búsqueda, este código lo concatenamos en el parámetro $item que posteriormente se retornará.

 

El identificador del menú (en nuestro caso ‘primary’), en tu theme puede ser diferente, te sugiero buscar lo que registra la función register_nav_menus, y revisar el siguiente artículo de referencia: Añadir una nueva ubicación de menú a un theme WordPress

 

Opción 2 – Código de formulario reutilizado del theme

En este caso reusamos el código del formulario que tiene el theme, usualmente el código estará en el archivo searchform.php, llamamos al código del formulario a tráves de la función get_search_form()


add_filter( 'wp_nav_menu_items', 'dcms_item_search', 10, 2);

function dcms_item_search( $items, $args ) {

	if ($args->theme_location == 'primary') {

		$items .= '<li class="menu-item">'.get_search_form( false ).'</li>';

	}

	return $items;
}

El código es similar al código de la opción 1, la única parte que varía es la cadena que se concatena a la variable $item

 

Código CSS

Finalmente para darle un aspecto más adecuado al formulario de búsqueda que se mostrará en el menú, podemos usar el siguiente código CSS:


.menu-item .search-form input{
	width: 80%;
	padding: 0;
	height: 32px;
	padding: 8px;
	border-radius: 6px;
}

.menu-item .search-form input::-moz-placeholder {
  color: #ccc;
  font-weight: normal;
}

.item-search{
	float: right;
	margin-top: 20px;
}

.menu-item .search-form input[type="submit"]{
	width: 32px;
	height: 32px;
	padding: 0;
	margin:0;
	margin-left: 10px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 18px;
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Feedbin-Icon-home-search.svg/36px-Feedbin-Icon-home-search.svg.png);
}

Para el icono de lupa se usó una imagen externa, sin embargo es posible usar un icono como tipo de letra en caso el theme ya cargue algún tipo de fuente de iconos
Tener en cuenta que este código CSS final depende mucho de las clases y código HTML que tiene el theme que estas usando, por lo que, si estas usando un theme diferente del ejemplo, es probable que se requieran algunos ajustes.

 
¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Carlos

    3 marzo, 2018

    Gracias por el buen artículo, escribo porque necesito tu ayuda. Estoy probando un tema 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. Espero tu respuesta y sigues así

    • Jhon Marreros Guzmán

      4 marzo, 2018

      Es por el z-index, hay una capa por encima y no te deja trabajar con el formulario, en el código HTML de la etiqueta form agrega algo como : style=”z-index:9999;position:relative;”

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar enlace leer más en WordPress

Páginas en ancho completo en el tema Storefront

Limitar a los autores a ver su propio contenido en WordPress

Apuntar el dominio principal de un sitio WordPress a una carpeta

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados