» Publicación:
27 enero 2011
/
Categoría:

Aprendiendo a usar los Shortcodes en WordPress

En varios blogs realizados bajo WordPress siempre observaba cajas “resaltadas” que después de verlas una y otra vez vi que no estaban hechas con código en duro o especialmente para ese articulo en particular, sino que los diseños eran repetitivos (y obviamente deduje que eran automaticos) al tiempo supe que a esto es lo que llaman los shortcodes. En esta nota veremos qué son, cómo sacarles provecho y en tan sólo unos pocos pasos, los utilizaremos para crear unas atractivas cajas de texto.

Si realmente, en el primer parrafo no entendiste nada… Pues bien, vamos de nuevo ¿Pero qué es un shortcode? Como el nombre lo indica, un shortcode es una manera simple y elegante de mostrar complicados códigos utilizando sólo una palabra. Por ejemplo, imagina que quieres insertar un info-box dentro de un post. Tendrías que crear div-classes tras div-classes para finalmente lograrlo. Pero un shortcode te da la posibilidad de hacerlo, sólo añadiendo, por ejemplo:

Y el resultado en nuestro blog se veria algo asi, obviamente con el texto que pongamos entre las llaves, en este caso el te:

+ Ahora diseñemos y empecemos a trabajar en nuestro código

Los shortcodes de WordPress son una serie de funciones creadas dentro de functions.php (que puedes encontrar en el directorio de tu theme de WordPress) para crear códigos macro utilizables en el contenido del post. Vamos a ver, en esta ocasión, cómo crear algunas encantadoras cajas de texto con un poco de CSS3.

La caja será un simple div que tendrá una class asignada, y puedes nombrarla como quieras. La clase tendrá asignado un estilo. Para el primer paso, abre en un editor el archivo functions.php (si no tienes un archivo llamado así dentro del directorio de tu theme de WordPress, crea uno)  y agrega el siguiente código PHP:

+ Explicando su funcionamiento:

Como puedes ver aquí arriba, la función llamada successbox crea un class de div llamado success . La última linea, add_shortcode(‘success’ , ‘successbox’ ); está definiendo la llamada de la función. Cuando lo uses, deberás agregarlo a tus posts dentro de corchetes, con la palabra info. El nombre de la función es successbox.

+ Diseñando el DIV contenedor:

Ahora crearemos el estilo. Primero deberás descargar esta imagen. Luego abres el archivo style.css del Theme de WordPress que estas ocupando y agregas el siguiente código:

Finalemente ya tenemos listo nuestro Shortcode. Ahora, para llamar al código dentro de sus mensajes, agregar las siguientes líneas y sustituir el texto de relleno con su contenido por ejemplo:

Usando el mismo principio, puedes crear múltiples cajas de texto con múltiples usos:

Este artículo lo leí en inglés en OurTuts.com

Finalmente ya aplique estos shortcodes a el Blog y quedo algo asi:

Funciona el Shortcodes expuesto en Blog.Reckless.cl de mil Maravillas. Ahora poco de texto falso: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat auctor erat a hendrerit. Donec lobortis sagittis tincidunt. Sed vitae tellus.
  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios

thanks

Fecha del comentario: 14 febrero 2011 a las 2:44
Escribe tú comentario
*
*
» Mensaje: