searchform

No hace mucho integre el buscador personalizado de google en mi blog, (podéis verlo en la barra lateral) y creo que es un buen momento para dar una pequeña explicación de como integrarlo en WordPress para todo el que lo quiera poner.

Lo primero es dirigirnos a la pagina del buscador personalizado de Google y crearnos uno clicando en Create a Custom Search Engine. Rellenamos el formulario de la siguiente pagina, que aunque este en inglés es muy facil.

Una vez efectuado el registro, ya nos podemos dirigir a nuestro panel de administración, para configurarnos el buscador.

Si nos dirigimos a control panel podremos configurarlo como queramos. Nos aparece un menú con diferentes opciones:

• Basics: Información básica y preferencias.
• Sites: Aqui añadiremos el sitio en el cual se hará la búsqueda, en este caso la URL de nuestro blog.
• Refinements: Son etiquetas que puedes aplicar a los sitios. Aparecen como lista sobre los resultados de la búsqueda, yo no lo utilizo, pero vosotros mismos.
• Look and feel: Aquí podemos configurarnos el resultado de nuestras búsquedas, básicamente los colores del resultado de las búsquedas.
• Code: Como la palabra indica es donde esta el código que tenemos que copiar, para pegar posteriormente en nuestro WordPress.
• Collaboration: Es para invitar a otros usuarios o contribuyentes, pero la verdad es que no se muy bien su función.
• Make money: aquí insertaremos nuestro código de Adsense para asociar estas búsquedas a Adsense y así conseguir pequeños ingresos extra. Después de introducir nuestro código de Adsense tendremos que dirigirnos a la bandeja de entrada de nuestro correo y mirar el mail recibido de Adsense.
  

  Estimado editor:

  Ha recibido este mensaje porque recientemente ha solicitado acceso para participar en el programa AdSense a través de www.google.com/coop. Para utilizar las funciones de AdSense mediante www.google.com/coop, deberá proporcionar al sitio acceso al código de anuncios y a la información de rendimiento en su cuenta de AdSense. Para ello, haga clic en este vínculo:

  https://www.google.com/adsense/….

  Si considera que ha recibido este mensaje por error, o tiene alguna pregunta, le sugerimos que se ponga en contacto con los propietarios de www.google.com/coop.

  Atentamente,

  El equipo AdSense de Google

• Business Edition: Típica sección en la que te recomiendan que te pases a la Business Edition porque es mejor y bla, bla,bla… sólo para sacarte unas pelas, pues NO.
• Advanced: Para usuarios avanzados, nosotros no lo necesitamos para nada.
• Preview: Lógicamente aquí veremos como queda nuestro buscador.

Una ves tenemos esto listo, ya podemos liarnos con nuestro WordPress, lo primero es poner el código de la sección code en el archivo searchform.php de nuestro theme, recomiendo comentar el antiguo código antes de machacarlo con el nuevo, o haceros una copia del archivo searchform.php.

Si queremos que el resultado de la búsquedas nos lo muestre en una página de Google, pues ya esta, pero si queremos mostrarlo en un pagina personalizada con nuestro theme, tendremos que cambiar la segunda linea de código, y donde pone action=»http://www.google.com/cse» ponemos action=»http://www.misitio.com/buscar.php» cambiando lo de misitio.com por nuestra URL.

Si nos fijamos en la parte inferior de la sección de code hay un menú desplegable que pone Search box and search results code for your website, pues lo desplegamos y copiamos el código en una pagina nueva que vamos a llamar buscar.php y la vamos a colocar en la raiz de nuestro sitio.

El archivo buscar.php tiene que contener algo parecido a esto:

<?php require('./wp-blog-header.php'); ?>

<?php get_header(); ?>
<div class="content">
           
<!-- Google Search Result Snippet Begins -->
  <div id="results_014073114125304419106:_1whtbeyhyu"></div>
  <script type="text/javascript">
    var googleSearchIframeName = "results_014073114125304419106:_1whtbeyhyu";
    var googleSearchFormName = "searchbox_014073114125304419106:_1whtbeyhyu";
    var googleSearchFrameWidth = 400;
    var googleSearchFrameborder = 0;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse";
  </script>
  <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
</script>
<!-- Google Search Result Snippet Ends -->
          			 
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Pues creo que esto es todo, espero no dejarme nada, si tenéis alguna duda ya sabéis que en los comentarios las respondo todas 😉

A por cierto que se me olvidaba, si queremos añadir otro buscador como este en otro blog o web que tengamos, tendremos que clicar en nuestro Google Coop arriba a la izquierda donde pone New search engine, eso, eso, eso, eso, eso es todo amigos 😛