CMS WordPress

[WordPress] Personalizando el sistema de búsqueda en 3 pasos: Buscador, página de resultados y redireccionamientos

Unplash.com by Nine Köpfer

[WordPress] ¿Cómo crear una página de resultados de búsqueda personalizada?

WordPress incorpora un buscador de serie preparado para buscar post. Y cuando digo “post“, me refiero a entradas del tipo post, es decir, entradas del blog.

Aquellos que halláis trasteado código de algún plugin o tema especializado, ya habréis visto que en realidad, el post_type es flexible y configurable.

Por ejemplo:

  • WooCommerce crea post_type personalizados, a los que llama Productos. Y sirven para crear productos de e-commerce.

De la misma forma, un tema de cocina, creará sus propios post_type a los que llamará recetas. Uno de inmobiliarias, post_type llamados inmuebles, etc

Esto quiere decir, que el buscador que trae WordPress, no nos servirá para buscar en esos tipos especiales de contenidos, y por ello casi todos los temas/plugins que los usan, o bien traen su propio buscador independiente (Ej: WooCommerce trae un buscador de productos), o bien editan el código del propio CMS.

Y eso es precisamente lo que vamos a aprender en esta entrada:

1º- Cómo editar el buscador de WordPress para buscar post_type personalizados.

2º- Cómo hacer que cuando busquemos un post_type personalizado, nos lo muestre en una plantilla diferente a la tradicional, pudiendo así mostrar ese contenido con el formato y forma que deseemos. A fin de cuentas, no se debe mostrar al usuario de la misma manera una entrada de blog que una receta de cocina, ¿no?

 

El buscador de WordPress

El código HTML del buscador que trae por defecto es el siguiente:

 <div>   
    <h3>Search Products</h3>
    <form role="search" action="<?php echo site_url('/'); ?>" method="get" id="searchform">
    <input type="text" name="s" placeholder="Search Products"/>
    <input type="hidden" name="post_type" value="post" />
    <input type="submit" alt="Search" value="Search" />
  </form>
 </div>

Donde, en el campo oculto, se especifica el tipo de contenido (por defecto, post):

<input type="hidden" name="post_type" value="post" />

Lo único que debemos hacer es crear, en caso de no tenerlo ya, un tipo nuevo de contenido y ponerlo en este formulario:

1º – Vamos vía FTP al functions.php y añadimos el siguiente código para definir un nuevo tipo de contenido:

function create_posttype() {
 
    register_post_type( 'recetas',
        array(
            'labels' => array(
                'name' => __( 'Recetas' ),
                'singular_name' => __( 'Receta' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'recetas'),
        )
    );
}
add_action( 'init', 'create_posttype' );

Esto creará un nuevo post_type llamado “recetas”.

2º- Ponemos el código del buscador donde deseemos que se muestre, o editamos el archivo principal que lo contiene, cuya ubicación variará dependiendo del tema (muy usualmente en header.php). Y sustituímos el name del campo hidden por el tipo de contenido que acabamos de crear:

<div>   
    <h3>Search Products</h3>
    <form role="search" action="<?php echo site_url('/'); ?>" method="get" id="searchform">
    <input type="text" name="s" placeholder="Search Products"/>
    <input type="hidden" name="post_type" value="recetas" />
    <input type="submit" alt="Search" value="Search" />
  </form>
 </div>

 

Indicar a nuestro tema qué debe hacer cuando alguien utilice el buscador

La siguiente función, que debe añadirse también al functions.php, detectará cuando se esté buscando un post_type concreto, y redireccionará al usuario a una plantilla totalmente personalizada:

function template_chooser($template)   
{    
  global $wp_query;   
  $post_type = get_query_var('post_type');   
  if( $wp_query->is_search && $post_type == 'recetas' )   
  {
    return locate_template('archive-search.php');  //  redirect to archive-search.php
  }   
  return $template;   
}
add_filter('template_include', 'template_chooser');

Exactamente dice, cuando estés realizando una búsqueda de “recetas”, no vayas a la página de resultados por defecto, redirecciónalo a una página nueva llamada “archive-search.php

 

Creando una plantilla para los resultados de búsqueda personalizados

Y aquí tendríamos el mínimo código posible para crear la plantilla y representar los resultados de búsqueda, con la estética del resto de la página:

<?php
        /* Template Name: Custom Search */        
        get_header(); ?>             
        <div class="contentarea">
            <div id="content" class="content_right">  
                     <h3>Search Result for : <?php echo "$s"; ?> </h3>       
                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
                <div id="post-<?php the_ID(); ?>" class="posts">        
                     <article>        
                    <h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>        
                    <p><?php the_exerpt(); ?></p>        
                    <p align="right"><a href="<?php the_permalink(); ?>">Read     More</a></p>    
                    <span class="post-meta"> Post By <?php the_author(); ?>    
                     | Date : <?php echo date('j F Y'); ?></span>    

                    </article><!-- #post -->    
                </div>
        <?php endwhile; ?>
    <?php endif; ?>




           </div><!-- content -->    
        </div><!-- contentarea -->   
        <?php get_sidebar(); ?>
        <?php get_footer(); ?>

 

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario