4 técnicas para modificar el buscador en WordPress

Existen varios métodos para modificar el buscador en WordPress. En esta entrada aprenderemos  4 técnicas diferentes que nos ayudarán a cambiar el buscador por defecto de WordPress.

Primero veremos como modificar el buscador creando un nuevo archivo que alojaremos en la carpeta de nuestro tema.

El segundo método añadirá una función al archivo functions.php de nuestro WordPress. Un filtro que modifica la función de llamada al buscador.

La tercera técnica que emplearemos para modificar el buscador en WordPress será crear un shortcode, que nos permitirá añadir el buscador dentro del editor de páginas y post de nuestro administrador de WordPress.

Por último nombraré un par de plugins, uno gratuito y otro de pago que amplían la funcionalidad del buscador por defecto en WordPress, realizando búsquedas no solo en páginas y post.

Introducción: La función get_search_form

La función get_search_form() es la encargada de visualizar el formulario de búsqueda en WordPress. La empleamos directamente en nuestros archivos PHP cuando queremos mostrar el formulario.

Esta función está implementada en el archivo general-template.php dentro de wp_includes: wp-includes/general-template.php

Si abres el archivo y buscas la función observarás el siguiente fragmento de código:

//si existe archivo searchform al if sino al else
$search_form_template = locate_template( 'searchform.php' );
    if ( '' != $search_form_template ) {
        ob_start();
        require( $search_form_template );
        $form = ob_get_clean();
    } else {
// si no existe archivo searchform ejecutar formulario por defecto

Explicación código: la función, primero intenta localizar el archivo searchform.php dentro de la carpeta del tema padre o del tema hijo (depende del tema con el que trabajes).

Si la función existe, se cargará el archivo. Si no encuentra el archivo, la función continua y ejecuta el código implementado dentro del else, que es el formulario por defecto en WordPress.

else { //Formulario por defecto de WordPress
        if ( 'html5' == $format ) {
            $form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
                <label>
                    <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
                    <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" />
                </label>
                <input type="submit" class="search-submit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
            </form>';
        } else {
            $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
                <div>
                    <label class="screen-reader-text" for="s">' . _x( 'Search for:', 'label' ) . '</label>
                    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
                    <input type="submit" id="searchsubmit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
                </div>
            </form>';
        }
    }

Basándonos en esto, el primer método para modificar el buscador en WordPress es:

Método 1º: Crear un archivo searchform

Puedes crear un nuevo archivo searchform.php con el nuevo formulario de búsqueda y alojarlo en la carpeta de tu tema: wp-content/themes/

Si estás trabajando con un tema hijo, entonces guarda el archivo en la carpeta de tu tema hijo.

En la página de entradas de mi blog, puedes ver un buscador de WordPress modificado. Vamos a trabajar con ese ejemplo. Te explicaré los pasos para crearlo, luego puedes ir adaptando el código según tus necesidades:

Código searchform.php

1.- Abre tu editor y crea un nuevo archivo PHP. Copia y pega el siguiente código. Guarda el archivo con el nombre searchform.php. Aloja el archivo dentro de la carpeta de tu tema padre o hijo.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
    <label>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <input type="image" alt="Search" src="<?php echo get_stylesheet_directory_uri(); ?>/images/search-dark.png" />
</form>

Código style.css

2.- Para obtener las esquinas redondeadas, el color de fondo… tienes que trabajar con reglas de estilo. En la hoja de estilos de tu tema, añade el código:

.buscador{width:33%; height:auto; margin:0 auto; text-align:center; padding-top:24px}
.search-form input[type="search"] {
    background-color:#fcfcfc;
    border: 1px solid #d1d1d1;
    font: 12px Arial,Helvetica,Sans-serif;
    color: #433f3f;
    width: 50%;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;}
.search-form input[type="image"] {position:relative; top:3px}

Código archivo del tema

3.- En el archivo donde quieras incluir el buscador (single.php, index.php…) copia esta línea de código:

<div class="buscador center"><?php echo get_search_form(); ?></div>	

Descargar y guardar el icono de lupa

4.- Por último, si tu tema no tiene una carpeta /images, debes crearla y alojar dentro la imagen de la lupa, con el nombre search-dark.png. Aquí tienes la imagen.

Te recomiendo que visites el blog: https://colorlib.com donde encontrarás inspiración para crear diferentes formularios de búsqueda basados en HTML y CSS que te permitirán modificar el buscador en WordPress.

Método 2º: Insertar función en el archivo functions.php

Otra opción es insertar el formulario dentro de una función PHP y aplicar un filtro sobre la función get_search_form.

Para este ejemplo utilizaremos el formulario anterior y se lo asignamos a una variable $form. Copia y pega el código dentro del archivo functions.php de tu tema:

function formulario_wp_modificado( $form ) {
    $form = '<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
    <label>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <input type="image" alt="Search" src="<?php echo get_stylesheet_directory_uri(); ?>/images/search-dark.png" />
</form>
';
 
    return $form;
}
add_filter( 'get_search_form', 'formulario_wp_modificado' );

Repite el paso 2, 3 y 4 del apartado anterior.

Método 3º: shortcode para modificar el buscador en WordPress

Este método es muy interesante, ya que permite llamar al buscador dentro del editor de página o post de tu WordPress, dentro de un widget, dentro de los archivos del tema…

Lo único que tenemos que hacer es añadir un shortcode a nuestro tema. El código del shortcode lo tenemos que añadir dentro de nuestro archivo functions.php.

Observa que la única diferencia con el método anterior es el uso de la función add_shortcode.

function formulario_wp_modificado( $form ) {
    $form = '<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
    <label>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <input type="image" alt="Search" src="<?php echo get_stylesheet_directory_uri(); ?>/images/search-dark.png" />
</form>
';
 
    return $form;
}
add_shortcode( 'form_wp_nuevo', 'formulario_wp_modificado' );

La ventaja de los códigos cortos o shortcode es que los podemos escribir sobre el editor de páginas y post de WordPress o directamente en las plantillas.

Repite los pasos 2 (hoja de estilos) y 4 (guardar imagen) el método 1.

El paso 3 (insertar código de llamada al formulario) es diferente al descrito en el método 1º. Y varía si vas a insertar el buscador en los post o páginas o en los archivos.

Código dentro del editor de post y páginas de WordPress

Para utilizarlo en el editor de post, páginas y widget texto, escribe directamente el shortcode en el lugar que quieres que aparezca:

[form_wp_nuevo]

Código dentro de los archivos PHP de WordPress

Si necesitas llamarlo dentro de las templates o archivos PHP de tu tema, el código es el siguiente:

<?php echo do_shortcode('[form_wp_nuevo]'); ?>

Con estos 3 métodos hemos modificado el estilo del formulario, la funcionalidad sigue siendo la misma. 

En un principio el formulario realiza búsquedas en post, páginas… para alterar este comportamiento hay que trabajar con otras funciones como pre_get_posts y con las plantillas de resultado de la búsqueda. En próximas entradas explicaré como modificar los resultados de búsqueda en WordPress.

Método 4º: instalar un plugin

Finalmente, si no quieres escribir una sola línea de código puedes optar por instarla un plugin. En el repositorio de WP, encontrarás varios plugins que modifican el diseño y la funcionalidad del buscador por defecto de WordPress. A modo de ejemplo cito dos; uno libre y otro de pago.

Search Everything, es un plugin gratuito, muy sencillo de configurar, mejora la funcionalidad del buscador por defecto de WordPress. Permite realizar búsquedas sobre comentarios, archivos adjuntos, categorías, etiquetas, campos personalizados… Además ofrece la posibilidad de excluir de las búsquedas contenidos específicos.

SearchWP, es un plugin de pago, la licencia para un sitio cuesta $49. SearchWP está considerado como uno de los mejores plugins de buscador para WordPress y ofrece compatibilidad con WooCommerce, bbPress, Easy Digital Downloads… Permite crear distintos buscadores con diferentes características, búsqueda en archivos, comentarios, excluir contenidos. En sitios con búsquedas complejas, e-commerce… me parece la mejor opción.

Espero que estos ejemplos te ayuden a modificar el buscador en WordPress. Si quieres añadir algún otro método a esta entrada puedes dejar un comentario.

Te puede ayudar:

Modificar los resultados de búsqueda en WordPress

Añadir buscador a la barra de menú WordPress.

Cómo crear shortcodes en WordPress.

Plugins WordPress para crear un tema hijo.