3 formas de hacer un gran formulario de búsqueda personalizado de WordPress

WordPress es el sistema de gestión de contenido (CMS) más popular del mundo. Además de ser una herramienta poderosa y súper flexible, también es extremadamente fácil de usar. Las personas sin experiencia en diseño web o codificación pueden usar WordPress para iniciar su sitio web en cuestión de minutos.

Los usuarios visitarán su sitio de WordPress para buscar el contenido que les interesa. Una barra de búsqueda puede ayudarlos a hacerlo. Si su sitio no tiene uno, será difícil para las personas encontrar el contenido que buscan. Esta frustración hace que las personas abandonen su sitio web y se vayan a otro lado.

¡Eso no funcionará!

En este artículo, le mostraremos cómo integrar un formulario de búsqueda personalizado de WordPress en su sitio web.

• ¿Qué es un formulario de búsqueda personalizado de WordPress?
• #1 Aplicar un complemento
• #2 Modificar código
• #3 Use CSS personalizado para diseñar el formulario de búsqueda y la página de resultados

¿Qué es un formulario de búsqueda personalizado de WordPress?

WordPress ya tiene una función de búsqueda nativa integrada. Sin embargo, la herramienta de búsqueda predeterminada es bastante limitada y no es muy "inteligente". No siempre encuentra el contenido que quieres buscar.

La función de búsqueda predeterminada de WordPress es suficiente para páginas web nuevas o de pequeña escala que no tienen mucho contenido.

Pero a medida que crece su base de datos de contenido, es importante instalar una mejor herramienta de búsqueda para ayudar a los visitantes a navegar por su sitio web. Si ejecuta un sitio de comercio electrónico, una buena herramienta de búsqueda es aún más importante. Ayuda a dirigir a los clientes potenciales a los productos adecuados para ellos.

También es posible que desee que su herramienta de búsqueda muestre los resultados en un orden determinado. Por ejemplo, los artículos o artículos más populares primero. La herramienta de búsqueda predeterminada no le permite hacer eso. En su lugar, deberá editar el algoritmo de búsqueda manualmente.

Por último, pero no menos importante, una herramienta de búsqueda personalizada se puede estilizar para reflejar la estética o la marca de su sitio web.

¿Qué es la función get_search_form?

get_search_form se refiere a una función que muestra el formulario de búsqueda en su sitio web. Puede encontrarlo en la pestaña Apariencia > Widgets en su panel de administración de WordPress.

Gobierna el widget del formulario de búsqueda y cualquier otra página de su sitio web que necesite una función de búsqueda. Sin esta función, su sitio web es tan bueno como carecer por completo de una herramienta de búsqueda.

Cómo personalizar el formulario de búsqueda en WordPress

Hay muchos enfoques diferentes que puede utilizar para personalizar el formulario de búsqueda en WordPress. Depende de su nivel de habilidad de codificación y cuánto tiempo esté dispuesto a dedicar a esta tarea.

#1 Aplicar un complemento

Un complemento es la forma más fácil y rápida de poner en marcha un formulario de búsqueda personalizado de WordPress en su sitio web. Ivory Search, por ejemplo, es un complemento gratuito creado específicamente para mejorar la función de la herramienta de búsqueda de WordPress. Puede agregar y editar nuevos formularios de búsqueda y realizar diferentes tipos de búsquedas.

Además, con los códigos abreviados, puede colocar la barra de búsqueda en cualquier lugar que desee en el sitio web (como en el encabezado, pie de página, barra de menú, etc.).

Es una herramienta simple que recomendamos encarecidamente si no tiene mucha experiencia en codificación. Si bien no es tan versátil como codificar una herramienta de búsqueda, debería ser suficiente para un uso básico.

#2 Modificar código

Hay dos formas de crear un formulario de búsqueda desde cero dentro de los archivos principales .php de su sitio de WordPress: ya sea con una función o con una plantilla.

con una función

Puede reemplazar la herramienta de búsqueda predeterminada de WordPress con una personalizada utilizando el gancho add_filter . En su archivo functions.php , agregue el siguiente código a la pila:

 function custom_search_form( $formulario) {
$formulario = '<formulario rol="búsqueda" método="obtener" clase="formulariobúsqueda" acción="' . home_url( '/' ) . '" >
<div class="formulario-personalizado"><label class="screen-reader-text" for="s">' . __( 'Búsqueda:' ) . '</etiqueta>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__( 'Buscar' ) .'" />
</div>
</formulario>';
devolver $formulario;
}

add_filter('get_search_form', 'custom_search_form', 40);

Lo que hace este código es almacenar su formulario personalizado dentro de la variable $form , que reemplazará la herramienta de búsqueda predeterminada de WordPress gracias al enlace add_filter .

Puede personalizar aún más el código anterior editando las etiquetas, los textos, los ID y otros elementos en el valor de la variable $form .

con una plantilla

Si no está dispuesto a modificar el archivo functions.php , una alternativa es utilizar una plantilla para el formulario de búsqueda. Cree un formulario de búsqueda de WordPress personalizado, luego agréguelo como searchform.php en su directorio principal. WordPress utilizará automáticamente el formulario de búsqueda personalizado en lugar del predeterminado.

Para hacer esto, abra su IDE de elección y cree un nuevo archivo. Nómbrelo como "formulario de búsqueda.php" . Pegue el siguiente código en el editor:

 <?php
/* Formulario de búsqueda personalizado */
?>
<formulario rol="buscar" método="obtener" acción="<?php echo esc_url(home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="grupo-de-entrada">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-buscar texto silenciado"></i>
</span>
</div>
</div>
</formulario>

¡Modifica el código de arriba según tus preferencias!

#3 Use CSS personalizado para diseñar el formulario de búsqueda y la página de resultados

Ahora que ha puesto en marcha su función de búsqueda personalizada, la siguiente parte es diseñarla. El aspecto predeterminado es bastante aburrido con los cuadros de texto blancos en fuentes Sans Serif comunes y corrientes.

Si desea cambiar eso, su mejor apuesta es a través de algunas líneas de código CSS.

Esta plantilla de código CSS es compatible con la gran mayoría de temas de WordPress. Simplemente cópielo y péguelo a través de su panel de administración de WordPress.

 .Formulario de búsqueda {
familia de fuentes:arial;
tamaño de fuente: 16px;
fondo:#ace5e3;
color:#ffffff;
borde: 1px sólido # 61c3c0;
relleno: 10px;
altura: 90px;
ancho: 600px;
}

.Resultados de la búsqueda {
familia de fuentes:arial;
tamaño de fuente: 16px;
fondo:#ace5e3;
color:#000000;
borde: 1px sólido # 61c3c0;
relleno: 10px;
ancho: 600px;
}

Modifique las variables dentro del código a su gusto. Puede elegir la fuente, el tamaño de fuente, el color de fondo, el borde, etc. Si hay algún elemento en el código que no desea cambiar, simplemente elimine esa línea.

Por ejemplo, si no desea cambiar la familia de fuentes de su formulario de búsqueda, simplemente elimine “font-family:arial;” línea.

¡Cree su propio formulario de búsqueda personalizado de WordPress hoy!

La mayoría de las personas pueden arreglárselas con un formulario de búsqueda simple generado por un complemento. Pero si eres un poco más hábil en la codificación y deseas integrar funciones avanzadas en el formulario de búsqueda de tu sitio, entonces las plantillas de código anteriores pueden resultar útiles.

Un formulario de búsqueda personalizado de WordPress es una característica bastante simple, pero muy efectiva para hacer que su sitio web sea más fácil de usar. Una función de búsqueda de formulario por campo personalizado de WordPress puede ayudarlo a atraer más visitantes, convertirlos en clientes habituales y, si tiene un sitio de comercio electrónico, en clientes pagos.

Puede obtener más información sobre cómo agregar la búsqueda inteligente de productos de WooCommerce aquí.

¡Esperamos que esta guía haya sido útil y que ya tenga su formulario de búsqueda personalizado en funcionamiento para cuando lea esto!