Lo primero que necesitamos es ir a la página de Adsense y crear un motor de búsqueda personalizado.

Ingresas los datos que pide el formulario:

1. En “¿Qué quiere buscar?“ seleccionamos Sólo los sitios que seleccione.
2. En “Seleccione algunos sitios“ debemos ingresar la URL del blog donde se va a realizar la búsqueda.
3. En “Seleccione una edición“ seleccionamos Edición estándar.
4. En “Palabras clave” podes poner algunos keywords que describar tu blog.
5. Despues elegimos el lenguaje de tu blog.
6. El formato o estilo de  la caja de texto. ( Más adelante voy a explicar como cambiar el estilo)
7. Y donde abrir los resultados. En este caso elegimos nuestro propio sitio y ponemos una dirección del estilo “http://masquewordpress.com/buscar“.
8. Elegimos solo mostrar anuncios en la parte derecha(esto a gusto de cada uno).
9. Cambiamos el estilo con la paleta de colores.
10. Aceptamos las Condiciones de servicio.
11. Elegimos un nombre para el buscador y le damos a obtener el código.

Una ves terminados estos pasos vamos a obtener 2 códigos:

La caja de texto del buscador

1
2
3
4
5
6
7
8
9
10
11

<form action="http://masquewordpress.com/buscar/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxx:xxxxxx" />
<input type="hidden" name="cof" value="FORID:x" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Buscar" />
</div>
</form>
 
<script type="text/javascript" src="http://www.google.com.ar/coop/cse/brand?form=cse-search-box&amp;lang=es"></script>

Y los resultados del buscador

1
2
3
4
5
6
7
8
9

<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 800;
var googleSearchDomain = "www.google.com.ar";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Creando la página /buscar/ para que muestre lo resultados.

Para crear la página que nos muestre los resultados tan solo debemos ir en nuestro WordPress a Pages –> Add New e ingresar en el nombre de la página “Buscar” asegurandonos que el Permalink sea: http://masquewordpress.com/buscar/ .

Como modificar el template page de wordpress para darle el estilo necesario a la página de busquedas

Actualización

Les voy a explicar como hacerlo hoy en día de una forma más ordenada.

Hoy en día existen diferentes formas de modificar el template. Una forma de llamar a un template para una página en concreto puede ser:

1

page-buscar.php

Y dentro de page-buscar.php ponemos el código personalizado. En este caso podemos por ejemplo copiar el contenido de page.php y reemplazar la parte del content con lo que google nos dio. De esta forma queda ordenado en nuestro archivos.

También se puede usar la función get_template_part();

1

get_template_part('mipagina-de-buscar');

O  también podemos crear un template con

1
2
3
4
5

/*
 
Template Name: Página para buscar
 
*/

y luego seleccionar el template desde el menu de templates en nuestra página.

——- Ahora el método antiguo del post——-
Aunque ya tenemos la página /buscar/ creada , necesitamos hacer que muestre los resultados y para ello necesitamos ingresar el código obtenido en el primer paso.

A su ves ,al mostrar publicidad del lado derecho el tamaño mínimo del DIV cse-search-results será de 850px , por lo que no entraría en el blog si no quitamos el sidebar derecho. Como podemos hacer esto? De una manera fácil modificando en nuestro template page.php gracias a la función is_page().

Dicha página puede ser encontrada en nombredetublog/wp-content/themes/nombredetutheme/page.php

Page.php es el template que se encarga de montar la estructura por defecto de una página. Suele cargar las diferentes partes de la página llamando diferentes funciones:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php get_header(); ?> //Obtenemos el header
 
<div id="content">
<?php
 
<!-- begin post -->
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> // El título del post
<p>
Posted on <?php the_time('F j, Y') ?> by <?php the_author_posts_link(); ?> //Escrito en....
</p>
<?php the_content(''); ?> //El post en si
<div>
<p><?php the_tags('Tags: ', ', ', ''); ?></p> //Tags
<p>Filed Under: <?php the_category(', '); ?></p> //Categoria
</div>
</div>
<!-- end post -->
<div id="comments"><?php comments_template(); ?></div> //Carga los comentarios
 
</div>
<!-- END content -->
<?php get_sidebar(); get_footer(); ?> // Por ultimos el sidebar y el footer

En mi caso en concreto necesitaba alterar la página de busquedas por lo que agregue el siguiente código al principio una ves cargado el header ( ya que si quiero la cabezera de la web).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?php get_header(); ?> //Obtenemos el header
 
<?php if ( is_page('Buscar') ) { ?>  // COMPRUEBO SI LA PÁGINA ES "Buscar"
<!-- Google CSE Search Box Begins  -->
<div id="busqueda-wrapper"><div id="form-busqueda"><h2>Busca que con suerte encontras</h2>
<form action="http://masquewordpress.com/buscar/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-XXXXXX:XXXXXX" />
<input type="hidden" name="cof" value="FORID:X" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Buscar" id="google-boton" style="border:none;"/>
</div>
</form>
</div>
<script type="text/javascript" src="http://www.google.com.ar/coop/cse/brand?form=cse-search-box&amp;lang=es"></script>
<!-- Google CSE Search Box Ends -->
 
<!-- Google Search Result Snippet Begins -->
 
<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 800;
var googleSearchDomain = "www.google.com.ar";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
</div>
<!-- Google Search Result Snippet Ends -->
<?php  get_footer(); ?> //INCLUYO EL FOOTER Y DOY POR TERMINADA LA PÁGINA
 
<?php  }else{ ?> // EN CASO  DE QUE SEA OTRA PÁGINA CARGO EL TEMPLATE CON NORMALIDAD
<div id="content">
......
 
......
......
 
......
 
<?php

Como es normal, pueden agregar lo que quieran de código HTML y luego usar la hoja de estilo CSS del template que esten usando para darle forma.

Como añadir google custom search en el sidebar o barra lateral.

Al igual que page.php, sidebar.php se encuentra en nombredetublog/wp-content/themes/nombredetutheme/sidebar.php y para añadir el formulario de google custom search tan solo tenemos que buscar el formulario de busqueda actual que tenemos y cambiarlo por el código que nos dio google.

Igual que antes podemos agregar el código HTML necesario y luego darle forma con CSS.

Como sacar o cambiar la marca de agua de google, y como cambiar el estilo del text box de google custom search

En la parte final del código del formulario de busqueda aparece un archivo javascript que va a ser el encargado de aplicar el estilo y la marca de agua a el texto box.

1

<script type="text/javascript" src="http://www.google.com.ar/coop/cse/brand?form=cse-search-box&amp;lang=es"></script>

Lo que hay que hacer es pegar el link  en firefox y descargarse el archivo .js para moder modificarlo.

1
2
3
4
5
6
7
8
9
10
11
12
13

(function() { var f = document.getElementById('cse-search-box'); if (!f) { f = document.getElementById('searchbox_demo'); }
 
if (f && f.q) { var q = f.q;
 
var n = navigator;
 
var l = location;
 
if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; }
 
var b = function() { if (q.value == '') { q.style.background = '#FFFFFF url(http:\x2F\x2Fwww.google.com.ar\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; } };
 
var f = function() { q.style.background = '#ffffff'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();

Como pueden ver lo separe un poco para que sea más facil explicarlo. En mi caso , al tener una imagen de fondo para el cuadro de busquedas tan solo elimine la linea que le aplicaba los  bordes

1

if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; }

Y despues la que aplicaba la marca de agua :

var b = function() { if (q.value == '') { q.style.background = '#FFFFFF url(http:\x2F\x2Fwww.google.com.ar\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; } };

Tampoco tienen porque eliminarlas, si quieren pueden cambiar el estilo o aplicar su propia marca de agua. Un vez terminado , graban el archivo .js, lo suben al servidor y modifican el formulario con la dirección del archivo modificado.

Con eso ya tendrian su propio buscador google dentro de wordpress con publicidad adsense incluida. Espero que les sirva de ayuda. Un saludo

Sigueme:

]]> http://www.masquewordpress.com/como-anadir-google-custom-search-a-wordpress-y-modificar-el-template-page/feed/ 2