Usar google search y wordpress search en tu blog con opcion a elegir

  • Categoría de la entrada:wordpress

Siempre retrase este post porque es un poco largo y dificil de explicar. La idea es integrar el buscador de google en un blog wordpress pero dando la opcion a las visitas de poder elegir si quieren realizar la busqueda usando google o usando el buscador por defecto de wordpress. En resumen la caja de busqueda quedara asi:

Y al hacer una busqueda usando google los resultados se ven integrados con wordpress asi:

Aclaro que luego de horas de buscar en google como hacer esto o algun plugin que lo haga, no encontre nada y por eso me di a la tarea de hacerlo por mi mismo y es lo que les voy a explicar hoy. Si alguien conoce una mejor forma de hacerlo que me diga

Ademas me olvide mencionar que esto tambien les generara unas pocas ganancias pues en las busquedas con google salen anuncios de adsense. Empecemos…

Paso 1: Crear una pagina en google con una direccion sencilla y nombre descriptivo. Por ejemplo mi pagina se llama Google y la direccion es https://paraisolinux.com/buscar_google

Paso 1,5: Puede que muchos no quieran que se vea la pagina de buscar en la barra de navegacion de paginas. Si ven en mi blog no se muestra la pagina de busqueda. Eso es facil de ocultar simplemente usando el plugin http://wordpress.org/extend/plugins/exclude-pages/ Tambien se puede hacer sin plugin pero es mas engorroso

Paso 2: Hacer un backup del archivo searchform.php de su theme.

Paso 3: Entran en su cuenta de adsense. Van a la pestaña que dice ‘Configuracion de adsense’ y eligen ‘Adsense para busqueda’.

  1. En el campo ‘Sitios seleccionados’ colocan la direccion de su sitio. Ej: https://paraisolinux.com
  2. En el campo Criterios de seguimiento creen un nuevo criterio de seguimiento con algun nombre descriptivo. Ej: SearchParaisoLinux
  3. Click en continuar.
  4. En la siguiente pagina ponen continuar de nuevo. Es la pagina donde les da a elegir el formato de la caja de busqueda, pero no vamos a tocar nada de eso.
  5. En la siguiente pagina donde dice ‘Abrir pagina de resultados’  eligen ‘Abrir los resultados en mi propio sitio’. En el campo de texto colocan la direccion de la pagina que creamos en el paso 1.
  6. Ingresen un valor para el ancho de la caja de busqueda. Y los colores.
  7. Click en continuar y en la siguiente pagina click en ‘Enviar y obtener codigo’
  8. Les apareceran 2 cajas de texto con 2 codigos que llamaremos codigo1 (codigo de arriba) y codigo2 (codigo de abajo)

Paso 4: Deben crear un archivo de texto con extension .php el cual contendra lo siguiente:

<?php
/*
Template Name: Google Search
*/
?>
<?php get_header(); ?>
<div id="content">
			<div class="post">
				<div class="post-title">
					<h1>Resultados para <?php echo $_GET["q"];?></h1>
					<div class="clear"></div>
				</div>
				<div class="post-content">

					<!-- AQUI PEGUEN EL CODIGO2 -->

				</div>
			</div>
</div> <!-- end of #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Tengo que aclarar que este codigo sirve para las mayorias de los themes, pero hay algunos con 2 sidebar o con algun que otro detalle y en ese caso tendran que ver ustedes mismos cuales son los detalles que habra que agregar o quitar para que todo quede bien. Por lo general yo recomiendo que hagan una copia del archivo single.php y le saquen todo lo inncesario y dejen solo lo necesario (header,footer,sidebars)

Paso 5: Subir el archivo creado a la carpeta de su theme.

Paso 6: Vayan a editar la pagina que creamos en el paso 1 y a la derecha veran que dice ‘Atributos’ y uno de ellos se llama ‘Plantilla’. Alli deben elegir la plantilla con el nombre Google Search. Y luego actualizar la pagina.

Paso 7: No comenzar si no hicieron el paso 2!! Abrir el archivo searchform.php de su theme para editarlo. Borrar todo su contenido y reemplazarlo con el siguiente:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/" name="miForm" onsubmit="document.miForm.q.value = document.miForm.s.value;; return elegir(this)">
  <?php if(is_search()){ ?>
    <input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />
    <input type="hidden" name="cx" value="" />
    <input type="hidden" name="cof" value="" />
    <input type="hidden" name="ie" value="" />
    <input type="hidden" name="q" size="25" />
  <?php } else { ?>
    <input type="text" value="<?php if ($_GET["q"]!='' && $_GET["s"]=='') {echo $_GET["q"];}else{echo "Terminos de busqueda...";}?>" onfocus="this.value=''" name="s" id="s" />
    <input type="hidden" name="cx" value="" />
    <input type="hidden" name="cof" value="" />
    <input type="hidden" name="ie" value="" />
    <input type="hidden" name="q" size="25" />
  <?php } ?>
  <input type="submit" value="Buscar" id="searchsubmit" name="sa"/>
  <br/><br/>
  <input type="checkbox" name="miCheck" value="yes" <?php if ($_GET["s"]=='') {echo "checked='checked'";}?> />  <img src="http://url_imagen/google.gif" alt="Usar Google" />
</form>

<script type="text/javascript">
<!--
function elegir(miForm)
{
if (miForm.miCheck.checked){
	miForm.s.value="";
	 miForm.action = 'http://tusitio.com/buscar_google'
}
else{
	miForm.action = '<?php bloginfo('url'); ?>/'
 }
return true;
}
//-->
</script>

Paso 8: Como veran en el codigo anterior tiene todos los ‘value’ de los input text vacio. Eso deberan llenarlo ustedes con el los mismos valores que les muestra el ‘codigo1‘.

Tambien deberan colocar en la imagen la url a donde tengan su imagen…yo les dejo aqui la que yo uso por si la quieren usar.

Y tambien deberan completar la linea que dice

miForm.action = ‘http://tusitio.com/buscar_google’

con la direccion que ustedes hayan elegido para su pagina en el paso 1.

Paso 9: Probar y si algo no funciona dejar un comentario para que los ayude

Puff…no fue tan largo como pense que iba a ser…espero que se entienda y que les sirva.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

10
Comenta!

avatar
Ubunlog

Muy buen post, voy a ver si puedo implementarlo en mi blog :D
Saludos

Fabricio

Gracias!! justamente hace un rato estaba espiándote el HTML a ver si me salía algo así xD

:up:

lavidalinux

Esto me va a venir bien. Gracias! :up:

lavidalinux

Hello, men! He puesto el cuadro de búsqueda en el blog de pruebas, pero en el resultado me desplaza la sidebar :help: . Ya he probado cambiar el tamaño y nada. ¿A qué se debe?

trackback

[…] es usar el cuadro de busqueda de google o mejor aun seguir el tutorial que hice hace tiempo para dar la opcion al visitante si usar wordpress search o google search. Pero eso aun rompe un poco con la estetica del […]

David Yeshael

he intentado varias veces y no consigo nada, realiza la busqueda con el search de wordpress y arroja todas los resultados posibles pero con el de google no muestra ningun resultado :/
algo que pueda solucionar esto

Anonymous
Anonymous

en que  blog estas intentando hacerlo funcionar?

Soynadie

Otra opcion valida pero no tan completa como la que indicas es usar Easy Adsense