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

[information]lorem ipsum[/information]

¡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í:

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:

function successbox($atts, $content=null, $code="") {
 $return = '
';
 $return .= $content;
 $return .= '
';
 return $return;
}
add_shortcode('success' , 'successbox' );

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 archivo style.css y agregas el siguiente código:

.success {
 background:url(images/success.png) no-repeat scroll 15px 15px #EEF4D4;
 border: 1px solid #8FAD3D;
 color: #596C26;
 -moz-border-radius: 6px 6px 6px 6px;
 -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
 font-size: 13px;
 line-height: 24px;
 font-weight: normal;
 font-family:Arial;
 margin-bottom: 30px;
 padding: 15px 15px 15px 80px;
 position: relative;
 width: 465px;   }

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

[success]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [/success]

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

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

¿Te gusta este artículo? Compártelo con tus amigos!