Mostrar enlaces de un post en la sidebar

JMiur

Trataré de contestar lo que pregunta KIRA X92 y cumplir en lo que sea posible:

en mi blog quiero hacer lo siguiente en los post poner una etiqueta por ejemplo un "div id=Link descarga class=descarga y que ese div se vea en la sidebar y no dentro del post. ¿Es posible hacer esto?

Como para todas las cosas, hay decenas de soluciones posibles y claro, cada una de ellas será la que mejor se adapte a una situación particular así que vamos a ver una forma genérica de hacerlo y, en todo caso, luego pueden hacerse las variaciones del caso.

Evidentemente, debemos usar JavaScript ya que no hay otro lenguaje posible porque parto de la base que el enlace a mostrar posee un cierto texto. Si no lo tuviera, si sólo fuera un enlace donde lo unico importante fuera la URL, podríamos usar directamente el campo Vínculo de cada entrada.

Lo primero, entonces, es ocultar ese enlace de la entrada; no voy a usar un DIV con un ID sino simplemente un enlace al que le pondré una clase, cuanto más simple sea, mejor; así que parto de la base que tengo algo así:

<a class="asidebar" href="URL"> TEXTO/IMAGEN </a>

Podríamos poner uno, dos, cualquier cantidad, es indistinto.

Obviamente, lo ocultamos con CSS agregando la regla de estilo a la plantilla:

.asidebar {display:none;}

Ahora, deberíamos tener identificados los posts de alguna manera, es cierto que podríamos hacerlo de otro modo más global pero tal vez tardaríamos mucho en procesar todo eso; entonces, expandiendo la plantilla, buscamos el INCLUDABLE llamado post que por defecto, en una plantilla Mínima dice esto:

<b:includable id='post' var='post'>
  <div class='post hentry'>

y cambiamos esa línea de color por algo así, agregándole un ID exclusivo con el cual podremos identificarlo:

<div class='post' expr:id='&quot;post-&quot; + data:post.id'>

Un poco más abajo veremos el código que muestra las entradas y allí agregaremos el llamado a la función:

<div class='post-body entry-content'>

  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>mostrarEnlaces(&#39;<data:post.id/>&#39;);</script>

Nos falta la función en si misma que es la que debería leer esos enlaces ocultos y guardarlos en alguna parte; ponemos algo así antes de </head>:

<script type="text/javascript">

//<![CDATA[

// vamos a guardar todos los enlaces ocultos para mostrarlos luego
var asidebarHREF=new Array();
var asidebarTXT=new Array();

// esta es la función que llega con el ID del post a procesar
function mostrarEnlaces(idPOST) {
  var elPOST = document.getElementById("post-" + idPOST);
  // buscamos todos los enlaces que haya
  var lista = elPOST.getElementsByTagName("a");
  if(lista.length>0){
    // si hay alguno, buscamos todos los que tengan la clase asidebar
    var offset;
    for(var i=0; i<lista.length; ++i) {
      if(lista[i].className=="asidebar") {
        // si encontramos uno, lo agregamos a la lista que luego mostraremos
        offset = asidebarHREF.length;
        asidebarHREF[offset] = lista[i].href; // guardamos la url
        asidebarTXT[offset] = lista[i].innerHTML; // guardamos su texto o imagen
      }
    }
  }
}

//]]>
</script>

Por último los vamos a mostrar en la sidebar asi que siempre y cuando esa sidebar tenga su código DESPUÉS de los posts (digamos, que esté a la derecha), bastaría que agregáramos un elemento HTML; por el contrario, si está ANTES (a la izquierda), habrá que pesar otro método [Más información].

Entonces, en el elemento HTML que hemos creado, colocamos esto:

<div id="enlacesposts">
  <script>
    var salida = "";
    // si hay enlaces que mostrar
    if(asidebarHREF.length>0){
      // leemos la lista
      for(var i=0; i<asidebarHREF.length; ++i) {
        // y vamos armando el código HTML
        salida += "<a href='" + asidebarHREF[i] + "' target='_blank'>" + asidebarTXT[i] + "</a>";
      }
      // lo escribimos
      document.write(salida);
    }
  </script>

</div>

Y eso es todo, con un poco más de CSS podemos establecer la forma en que serán mostrados; un ejemplo:

#enlacesposts { /* el DIV contenedor */ }
#enlacesposts a {
  /* cada uno de los enlaces */
    display: block;
}
#enlacesposts a:hover { /* cualquier efecto hover */ }

Hay un ejemplo online que puede verse funcionando en este blog.