Cómo crear un formulario de búsqueda personalizado en WordPress

¿Está buscando crear un formulario de búsqueda personalizado en un sitio web de WordPress? Solíamos crear temas desde cero para poder agregar nuestro propio estilo a las secciones del sitio web. Es posible que haya creado un diseño de un formulario de búsqueda atractivo y ahora quiera encajarlo en WordPress.

WordPress proporciona un método get_search_form()que procesa el formulario de búsqueda. Si usa este método en su tema personalizado, obtendrá un formulario de búsqueda predeterminado creado en el núcleo de WordPress. Y no desea el formulario de búsqueda predeterminado ya que el diseño de su formulario es diferente. Para superar esta situación, debe crear un formulario de búsqueda personalizado que anule el predeterminado.

Al crear un formulario de búsqueda personalizado, puede agregarle su propio marcado y estilo. En este artículo, le muestro cómo crear un formulario de búsqueda personalizado en WordPress.

El método get_search_form()busca un searchform.phparchivo en el directorio de su tema activo. Si este archivo no existe, WordPress usa el formulario de búsqueda predeterminado que se incluye en su núcleo.

Crear un formulario de búsqueda personalizado

Crea un searchform.phparchivo en el directorio de tu tema activo. En este archivo, agregue su marcado del formulario de búsqueda. Por ejemplo, en mi caso, el formulario de búsqueda es el siguiente.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="submit" value="Search">
</form>

No hay nada elegante o complejo en el código anterior. Solo le di id ‘formulario de búsqueda’ a la etiqueta del formulario y la clase ‘campo de búsqueda’ al campo de texto de búsqueda. Usando esta identificación y clase, puedo agregar estilo al formulario de búsqueda. Como este en su caso, debe usar su propio marcado.

Mostrar formulario de búsqueda

El siguiente paso es mostrar el formulario de búsqueda en el sitio web. Es posible que desee colocar el formulario de búsqueda en la barra lateral, el encabezado, junto al menú, etc.

Usando la función, get_search_form()uno puede mostrar su formulario de búsqueda en cualquier lugar del sitio web. Todo lo que necesita hacer es llamar a este método desde el lugar donde desea mostrar el formulario de búsqueda.

<?php get_search_form(); ?>

Después de colocar el código anterior en el lugar deseado, vaya al navegador. Ahora debería ver su formulario de búsqueda en el sitio web.

Personalizar el resultado de la búsqueda

Puede ser el caso, su sitio web tiene más recursos como libros, revistas, libros electrónicos, PDF, etc. y necesita mostrar el contenido de todos estos recursos en el resultado de búsqueda. Se puede hacer fácilmente.

Suponiendo que tiene tipos de publicación personalizados para todos estos recursos, debe agregar un campo oculto para cada tipo de publicación en el formulario de búsqueda.

Supongamos que ha creado tipos de publicaciones personalizados: libro, revista, libro electrónico, pdf para los recursos anteriores. Entonces, sus campos ocultos serán los siguientes.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search">
</form>

Ahora, cuando alguien ingresa una palabra clave en el formulario de búsqueda, WordPress busca esa palabra clave en todos los tipos de publicaciones anteriores para que coincida con el resultado.

Espero que comprenda cómo crear un formulario de búsqueda personalizado en WordPress. Me gustaría escuchar sus pensamientos y sugerencias en la sección de comentarios a continuación.

Artículos relacionados

• Cómo cargar una publicación de WordPress con AJAX
• Cómo configurar una imagen destacada mediante programación en WordPress
• Cargar archivos mediante programación en WordPress