En algún momento nos hemos visto en la necesidad de insertar un pdf, doc, xls… dentro de una entrada en nuestro wordpress.
Usando al botón de «Añadir Objeto» en el menú de edición de entradas es sencillo. Lo que ocurre, es que a veces, y cada vez más, queremos que al lado del enlace aparezca un icono tal como aparece en la imagen adjunta.
Seguro que hay plugins que lo puede hacer, pero yo prefiero usar jQuery y Css3.
Lo primero es crear en nuestro style.css las clases necesarias para decorar estos enlaces.
Yo voy a crear tres clases nuevas, una para documentos pdf’s, otra para doc’s y otra para xls’s. Si necesitas más lo único que tienes que hacer es ir añadiendo las que vayas necesitando.
El código es el siguiente:
.icon_pdf { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_pdf.png') no-repeat center left }
.icon_doc { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_doc.png') no-repeat center left }
.icon_xls { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_xls.png') no-repeat center left }
Ten en cuenta que seguramente debas cambiar el path donde se encuentran los iconos y poner la ubicación donde se encuentran los tuyos.
Y ahora viene lo divertido.
¿Cómo añadimos estas clases a los distintos tipos de documentos que hay en la nueva entrada del wordpress?
Para ello vamos a usar jQuery, y por ello tienes que tener «cargado» el javascript jQuery antes. Una manera muy sencilla de cargar jQuery es poner en nuestra pagina el siguiente código:
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
P.D. Puedes usar la versión que más te guste de jQuery. Para ello lo único que tienes que hacer es cambiar la url en la linea anterior.
Pues una vez que estamos seguros que tenemos «cargado» correctamente el jQuery, añadimos el código que va a realizar la visualización del icono correspondiente al lado del enlace al documento que hemos insertado.
Este es el código:
<script type="text/javascript">
$(document).ready(function() {
var fileTypes = {
// extension:nombre de la clase
doc: 'icon_doc', xls: 'icon_xls', pdf: 'icon_pdf'
};
$.each(fileTypes, function(extension, classname) {
$('a[href$="' + extension + '"]').addClass( classname );
});
});
</script>
En la linea 2 creamos una variable cuyo nombre es ‘fileTypes‘ que es un array de registros de tipo clave/valor. Esto quiere decir, que el primer campo de cada registro es la clave y el segundo campo es el valor. Como clave usaremos la extensión del fichero (pdf, doc, xls) y en el valor guardarmos e nombre de la clase CSS que hemos creado en el fichero style.css.
En la linea 8, usamos la función .each(), para recorrer los elementos que están dentro del $(document), que es el elemento al que has hecho referencia en la linea 2.
En la linea 9, lo que hacemos es que dependiendo de la extensión que tiene el elemento que hay dentro de la entrada (el elemento que hemos insertado, ya sea el fichero pdf, fichero doc..) le añadimos la clase que le corresponde y que hemos definido dentro del array fileTypes.
Con un ejemplo, me explicaré un poco mejor:
1. El script recorre toda la entrada (o post), y encuentra un fichero pdf.
2. Con la extensión pdf, busca en la variable fileTypes el nombre de la clase que le corresponde a la extensión pdf. En este caso es ‘icon_pdf‘ ya que hemos definido la siguiente entrada dentro de fileTypes: pdf:’icon_pdf’.
3. A dicho elemento le añade la clase correcta en la linea 9: addClass( classname );
Espero que os sea útil