aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

A veces nuestros artículos quedan excesivamente cargados de enlaces y eso, para el usuario, puede suponer un problema. Una forma de ayudar al usuario a comprender mejor la fisonomía de nuestro artículo es usando notas al pie, al igual que en las imágenes las usamos para completar la imagen o ponerle un título, podemos usarlas para especificar nuestros enlaces.

$(document).ready(function() {
    $("#wrap").append("<ol id=\"footnotes\"></ol>");
    footnote = 1;
    $("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("footnote");
    $(".footnote").each(function() {
        $(this).append("<sup>"+footnote+"</sup>");
        cite="<li>";
        url=$(this).attr("cite");
        title=$(this).attr("title");
        if(title && url) {
            cite+="<a href=\""+url+"\">"+title+"</a>";
        } else if(title) {
            cite+=title;
        } else if(url) {
            cite+="<a href=\""+url+"\">"+url+"</a>";
        }
        cite+="</li>";
        $("#footnotes").append(cite);
        footnote++;
    });
});

El script anterior nos añadirá a todos los elementos q y blockquote la clase footnote, posteriormente nos tratará todos los elementos con la clase footnote para añadirles un valor numérico que se relacionará con la nota al pie que vamos a insertar.

Si usamos la marcación correcta de estos elementos el resultado será realmente interesante.

Ejemplo de uso:

// Hacia URL
<q cite="https://www.anieto2k.com/">
 WordPress, desarrollo web y muchas cosas más...
</q>

// Explicativo
<q title="TEXTO EXPLICATIVO">
	BLA BLA BLA
</q>

Via