En este artículo explicaremos cómo podemos incluir la nube de tags de un sitio creado con wordpress en cualquier otro sitio web. En nuestro caso, esta necesidad vino dada por el hecho de tener separada la web corporativa (en realidad, las tres webs corporativas, una para cada idioma) del blog (multilingüe). 

¿Cómo integramos el contenido en nuestro site?

La primera idea que nos vino a la cabeza fue hacer una petición Ajax desde la web estática a la página principal del blog y manipular el DOM. Sin embargo, esta opción no es viable debido a que los dominios bajo los que están alojados los dos sites son diferentes y, por lo tanto, las restricciones de seguridad del navegador no nos dejarían hacer la petición.

La segunda idea fue utilizar un IFRAME. Si bien esta opción soluciona el problema de los dominios diferentes, nos pareció, por un lado, poco elegante, y por otro lado, tiene el inconveniente de que es dificil integrar visualmente la nube de tags con la web dinámica ya que el IFRAME tendrá sus propias hojas de estilos.

Finalmente, decidimos implementar un script en javascript que manipulase el DOM de la página estática. De este modo, solucionamos el problema de los diferentes dominios y, al mismo tiempo, conseguimos que se apliquen los estilos de la página estática al contenido de la nube de tags.

Servir la nube de tags desde wordpress

Para servir la nube de tags desde wordpress, decidimos crear una plantilla de página especial (a la que llamamos “Remote Tag Cloud”) que contenga una llamada a la funcíon wp_tag_cloud() de wordpress.

1
2
3
4
<?php   
/* Template Name: Remote tag cloud
*/   wp_tag_cloud(); 
?>

A continuación creamos una nueva página en el site que utilice la plantilla “Remote Tag Cloud” como plantilla y tomamos nota del permalink, ya que será la URL a la que tenemos que llamar desde la página estática.

Incrustar la nube de tags

Para incrustar la nube de tags, necesitaremos cambiar la plantilla “Remote Tag Cloud” por un código javascript que incruste el contenido de la nube de tags en el DOM de la página que cargue el script.

Un problema que nos encontramos es que la función wp_tag_cloud devuelve código HTML y no código Javascript. Además, Javascript no soporta strings multilínea, por lo que no podemos incluir el código HTML en una variable Javascript.

Tras evaluar diferentes alternativas la que mejor se ajustaba a nuestra situación es la de crear una función Javascript e incrustar el código HTML como comentario de la misma. y ver que en firefox los comentarios de las funciones se pierden en el toString, optamos por la primera solución: utilizar \ al final de la línea.

Para ello, utilizaremos la función wp_generate_tag_cloud en lugar de wp_tag_cloud ya que ahora necesitaremos guardarnos ese html en una variable para poder llamar a str_replace. En nuestro cso, usamos la categoria como taxonomia para la nube de tags y por eso pasamos ‘category’ como primer parámetro a get_terms.

1
2
3
$tags = get_terms('category', array( 'orderby' => 'count', 'order' => 'DESC' ) );
$tagCloud=wp_generate_tag_cloud($tags);
$escapedTagCloud=str_replace("\n", "\\\n", $tagCloud);

Finalmente, nos queda manipular el DOM de la página estática para incluir la nube de tags. Para ello, la página que quiera incrustar la nube de tags incluirá, como hijo del elemento en el cual quiera incrustar la nube de tags, un tag SCRIPT que invoque a la plantilla que hemos definido anteriormente (es decir, el atributo src tiene como valor el permalink de la página que hemos creado anteriormente y a la cual le hemos asociado la plantilla “Remote Tag Cloud”).

1
2
3
4
5
6
7
<div id="text-4" class="widget widget_tag_cloud">
    <h3>Blog</h3>
    <div class="tagcloud" >
        <script language="javascript" id="remoteTagCloud"
    src="http://www.agilogy.com/remote-tag-cloud/"></script>
    </div>
</div>

Finalmente, el script que genera el wordpress buscará el elemento con id remoteTagCloud y substituirá el contenido de su nodo padre con el contenido de la nube de tags:

1
2
3
4
5
6
7
8
9
/* Template Name: Remote tag cloud
*/
$tags = get_terms('category', array( 'orderby' => 'count', 'order' => 'DESC' ) );
$tagCloud=wp_generate_tag_cloud($tags);
$escapedTagCloud=str_replace("\n", " \\\n", $tagCloud);
?>
var tagCloudContents="<?php echo $escapedTagCloud ?>";
var tagCloudDiv = document.getElementById("remoteTagCloud");
tagCloudDiv.parentNode.innerHTML=tagCloudContents;