Cómo usar shortcodes en WordPress para crear cajas de texto

Diseño Web, Wordpress

Buscando una cosilla sobre los shortcodes llegue a un artículo muy interesante de elwebmaster para crear cajas de texto. Lo pego tal cual:

Si utilizamos WordPress para desarrollar nuestro sitio web, los shortcodes pueden resultarnos muy útiles. En esta nota veremosqué son, cómo sacarles provecho y en tan sólo unos pocos pasos, los utilizaremos paracrear unas atractivas cajas de texto.

Fuente original del artículoOur Tuts
Traducción realizada por
 elWebmaster.com

¿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:

¡Es genial!

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.

Empecemos con la caja de texto. Haremos un gran caja verde de éxito, que se verá así:

Shortcodes en wordpress-success

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 archivofunctions.php (si no tienes un archivo llamado así dentro del directorio de tu theme deWordPress, crea uno)  y agrega el siguiente código PHP:

[codesyntax lang=”php”]

[/codesyntax]

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 success. El nombre de la función es successbox.

Ahora crearemos el estilo. Primero deberás descargar esta imagen >> . Luego abres el archivostyle.css y agregas el siguiente código:

[codesyntax lang=”css”]

[/codesyntax]

(Nota del Aprendiz (o sea mía xD): para compatibilidad entre navegadores aparte de -moz-border-radius y -moz-boz-shadow se podría usar los mismos pero aparte sustituyendo moz por o (para opera) y webkit (para navegadores basados en webkit como chrome, safari))

Ahora, para llamar al código desde tus posts, debes agregar las siguientes lineas (reemplazando el texto lorem ipsum con el verdadero contenido):

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

Shortecodes en wordpress - Ejemplos Caja de Texto

Eso fue todo, esperamos que te sea de utilidad. ¡Hasta la próxima!

Fuente original del artículoOur Tuts
Traducción realizada por
 elWebmaster.com

Deja un comentario

  • (will not be published)


8 + = 11