SummArg | Cursos y recursos para webmasters

Clase 13: Página de búsquedas e integración con Google Custom Search Engine

Por defecto WordPress utiliza el template search.php para mostrar sus resultados de búsquedas, si no encuentra dicha plantilla entonces utiliza index.php. Vamos a colocar un pequeño formulario de búsqueda en el encabezado del sitio.

Buscaremos lograr lo que se muestra en la siguiente imagen:

search1

Para ello utilizaremos el siguiente código que podremos después del primer menú:

<div id="search">
 <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
 <input type="text" value="Buscar..." onclick="this.value='';" name="s" id="s" class="searchtxt"/>
 <input name="" type="button" onclick="submit();" value="Buscar" class="btn" />
 </form>
 </div>

Para el estilo, primero añadiremos a #header un nuevo selector position:relative;

#header {
 padding: 5px 20px;
 width:920px;
 height:110px;
 position:relative;
 }

De este modo ahora todos los elementos que estén dentro de las etiquetas de #header pueden utilizar posicionamiento en relación al padre. Procedemos a darle estilo a nuestro formulario.

#search {
 width: 185px;
 border:1px solid #7ec5ff;
 position:absolute;
 right:20px;
 bottom:20px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 }
 #search form input#s {
 width:180px;
 height:20px;
 font-size:11px;
 font-style:italic;
 padding: 0 0 0 5px;
 background-image:url(images/lupa.png);
 background-position:right center;
 background-repeat:no-repeat;
 border:none;
 }
 #search form input[type=button] {
 display:none;
 }

Verán que nuestro #search utiliza el selector position y con el valor absolute nos permite definir un top y un right. Les recomiendo que lean la documentación sobre positioning aquí y aquí. El archivo de lupa.png se encuentra dentro del nuevo paquete para descargar con la presente clase al pie de página. El botón necesitamos que exista, pero no necesitamos que se vea, por lo que le damos la indicación para que no se muestre.

Cuando el usuario ingrese su búsqueda y presione enter, la búsqueda se iniciará sin necesidad alguna de clickear un botón. WordPress buscará la plantilla search.php a la cual le colocaremos un layout estandar.

search.php

<?php get_header(); ?>
 <div id="wrapper">
 <h1>Resultados para <?php the_search_query(); ?></h1>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="dos-tercios listado">
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_excerpt(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 </div><!-- end of dos-tercios -->
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
 </div><!-- end of wrapper-->
 <div><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
 <?php get_sidebar(); get_footer(); ?>

Utilizamos la función the_search_query para mostrar en el título el término de búsqueda que introdujo el usuario. Con esto ya nos queda la función de búsquedas de WordPress bastante completa.

Custom Search Engine de Google

Introduzcamos un formulario de búsquedas personalizadas de Google en nuestro theme. Las razones son varias:

  • Posibilidad de monetizar nuestras búsquedas: Google CSE permite el uso de Google Adsense.
  • Mejoras en el rendimiento del servidor al ahorrarnos las consultas a la base de datos.
  • Permite buscar en varios sitios a definir por nosotros.
  • Es de Google, necesitamos decir mas?

Para crear una cuenta para nuestro sitio nos dirigimos a www.google.com/cse, le damos nombre a nuestro buscador, definimos el idioma, los sitios en los que habrá de buscar y activamos Adsense si lo deseamos. Lo que necesitamos de todo este proceso es la ID del motor de búsqueda generado.

search3

Ahora bien, no queremos destruir el formulario de búsqueda que hemos agregado recientemente, así que añadiremos nuestro nuevo formulario en una de las sidebars.

<div class="widget">
 <form class="search" name="search" action="http://www.summarg.com/demos/themetaller/resultados.php" id="cse-search-box">
 <input type="hidden" name="cx" value="010330468867836346028:q6pfqadllde" />
 <input type="hidden" name="cof" value="FORID:11" />
 <input type="hidden" name="ie" value="UTF-8" />
 <input id="s" class="searchtxt" type="text" name="q" size="31" />
 <input type="submit" name="sa" class="btn" />
 </form>
 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=es"></script>
 </div>

En el value del primer input debemos colocar el ID del motor de búsqueda que acabamos de generar. Emprolijamos un poco desde el style.css

form#cse-search-box input#s {
 width: 220px;
 float:left;
 }
 form#cse-search-box input[type=submit] {
 float:left;
 border: 1px solid #7ec5ff;
 background-color: #7ec5ff;
 color: white;
 height:22px;
 font-weight:bold;
 font-size:11px;
 margin: 0 0 0 5px;
 width:45px;
 overflow:hidden;
 }

Comprobamos que se muestre correctamente en nuestro theme.

search4

Ahora debemos colocar nuestra plantilla de resultados, que se llamará resultados.php. La misma contiene la estructura básica de cualquier plantilla con la salvedad de que en vez de colocar un bucle sólo colocaremos el script de Google CSE. Además vamos a colocar este archivo fuera del directorio de nuestro theme, directamente en el raíz del sitio, por lo que en la primer línea utilizaremos una llamada para poder utilizar nuestro theme normalmente.

resultados.php

<?php require('./wp-blog-header.php'); ?>
 <?php get_header(); ?>
 <div id="wrapper">
 <div id="cse-search-results">
 <script type="text/javascript">
 var googleSearchIframeName = "cse-search-results";
 var googleSearchFormName = "cse-search-box";
 var googleSearchFrameWidth = 600;
 var googleSearchDomain = "www.google.com";
 var googleSearchPath = "/cse";
 </script>
 <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
 </div>
 </div><!-- end of wrapper-->
 <?php get_sidebar(); get_footer(); ?>

Y efectuamos una búsqueda a modo de prueba.

search5

Nuestro theme ya tiene dos formularios de búsqueda totalmente funcionales. Podés verlo en nuestro demo online.

Descargá la clase: themeTaller 13 (151)

Dejar un comentario

  1. […] Clase 13: Página de búsquedas: search.php e integración con Google CSE. […]

  2. […] Clase 13: Página de búsquedas: search.php e integración con Google CSE. […]

Dejar un comentario