By 5 mayo, 2011 4 Comments

Auto Imagen Relacionadas en WordPress – Google Search

closeADVERTENCIA: Este articulo tiene 2 years 19 days desde su publicación. Puede que esta información ya se encuentre obsoleta.

Si queremos Mostrar imágenes relacionadas en nuestros artículos de wordpress (Con algunas modificaciones funciona para cualquier otro CMS o Sitio Web), podemos usar el API de Google para buscar imágenes, hoy les explicare con un ejemplo como podemos agregar esta funcionalidad a nuestro Tema de WordPress en nuestro archivo Single.php.

Lo primero que tenemos que hacer es modificar nuestro header.php de nuestro tema, y agregar el siguiente código antes de cerrar la etiqueta </head>

Es importante agregar el código JavaScript en el condicional is_single() de wordpress, esto se hace para que se ejecute solo si se esta mostrando una entrada individual, debido a que el archivo header.php se invoca en todo el tema de wordpress.

 

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
44
45
46
47
48
49
50
51
52
53
54

<?php if(is_single()){ ?>
<script src="https://www.google.com/jsapi?key=ABQIAAAA6f5Achoodo5s2Q2049vn6BRVLQrsh6yDXOQlFq_IPsVaPpwy0hRWz0GbYnurFGakcZXAkRavljZynQ"></script>
<script type="text/javascript">
	// Cargamos el API de google (Search) con el Flag NO CSS <= No cargar CSS en la busqueda
	google.load('search', '1',{"nocss" : true});
    var imageSearch;
    /**
    * Funcion que se invoca cuando la busqueda se completa
    *
    */
    function searchComplete() {
		// Verificamos si hay resultados
		if (imageSearch.results && imageSearch.results.length > 0) {
			var contentDiv = document.getElementById('content-imagen');
			contentDiv.innerHTML = '';
			var results = imageSearch.results;
			// Recorremos todos los resultados y creamos el DIV con la imagen
			for (var i = 0; i < results.length; i++) {
				var result = results[i];
				var imgContainer = document.createElement('div');
				imgContainer.innerHTML = "<img title='"+result.contentNoFormatting+"' onclick=\"document.getElementById('divParaImagen').innerHTML = '<center><img  onclick=ocultar_imagen(); src="+result.url+"></center>'\" src='"+result.tbUrl+"'>";
				contentDiv.appendChild(imgContainer);
			}
        }
        else{
			var contentDiv = document.getElementById('content-imagen');
			contentDiv.innerHTML = 'No Result';
		}
    }
	/**
	* Funcion para ocultar la imagen cuando se le hace click
	*
	*/
	function ocultar_imagen(){
		document.getElementById('divParaImagen').innerHTML='';
	}
	/**
	* Funcion para iniciar los parametros de busqueda del api de Google
	*
	*/
    function OnLoad() {
		imageSearch = new google.search.ImageSearch();
        imageSearch.setResultSetSize(8); // Numero de resultados en la busqueda
        // Restriccion del tamaño de la imagen en la busqueda
		imageSearch.setRestriction(
			google.search.ImageSearch.RESTRICT_IMAGESIZE, 
			google.search.ImageSearch.IMAGESIZE_LARGE);
        imageSearch.setSearchCompleteCallback(this, searchComplete, null);
		imageSearch.execute("<?php the_title(); ?>"); // Buscamos por el titulo de la entrada
        google.search.Search.getBranding('branding'); // Mensaje Powered By Google (Es obligatorio mostrarlo)
      }
      google.setOnLoadCallback(OnLoad);
    </script>
<?php } ?>

Ahora agregamos nuestro CSS (Lo podemos modificar a nuestro gusto) en nuestro archivo header.php (el mismo anterior) antes de cerrar la etiqueta </head>, el siguiente codigo tiene algunos efectos con CSS3.

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

<style>
#divParaImagen{
	width:500px;
}
#divParaImagen img{
	width:500px;
	cursor:pointer;
}
#divParaImagen img:hover{
	border:0px #FFFFFF solid;
	-moz-box-shadow: 0px 0px 5px #D2D2D2;
	-webkit-box-shadow: 0px 0px 5px #D2D2D2;
	box-shadow: 0px 0px 5px #D2D2D2;
}
#content-imagen{
	width:500px;
}
#content-imagen img{
	cursor:pointer;
	padding:2px;
	width:100px;
	height:60px;
	display:block;
	float:left;
	border:5px #FFFFFF solid;
	-webkit-transition:-webkit-transform 0.1s ease-in; 
	-o-transition:-o-transform 0.1s ease-in; 
	margin:5px;
	-moz-box-shadow: 0px 0px 5px #3d3d3d;
	-webkit-box-shadow: 0px 0px 5px #3d3d3d;
	box-shadow: 0px 0px 5px #3d3d3d;
}
 
#content-imagen img:hover{
	-moz-transform:scale(1.2); 
	-webkit-transform:scale(1.2);
	-o-transform:scale(1.2);
}
</style>

Ahora modificamos nuestro archivo single.php y agregamos el siguiente código en el lugar que queremos mostrar las imágenes de la búsqueda.

1
2
3
4
5
6
7
8

<h3>Imagen Relacionada</h3>
<div id="divParaImagen" style="width:400px">
   <!-- Aquí aparece la imagen seleccionada -->
</div>
<div id="content-imagen">
   Loading...<!-- Aquí Aparece el resultado de la búsqueda -->
</div>
<div id="branding"  style="font-size:10px;display:block;clear:both"></div>

Por ultimo les dejo uno de mis blogs en el cual ya he implementado esta técnica Ubuntu Juegos para que puedan ver el resultado en la parte inferior, en la cual muestra 8 imágenes relacionadas buscadas por google tomando el texto de la entrada.

Como anotación aparte No use Jquery en mis JavaScript por que depende del tema del blog, y algunos no usan esta librería.

Espero que les sea de mucha utilidad. Saludos.

Share via email

Quizás también le interese:

Zemanta
Posted in: Html, JQuery, PHP, Programacion