Blog personal de Helmer Galvis

Cómo crear un shortcode para WordPress

Artículo publicado el jueves, enero 31, 2013. Guardado en la categoría: Wordpress

En el anterior post vimos como añadir fuera del editor de posts/páginas y widgets un shortcode en wordpress, por ejemplo en un archivo PHP del theme. Así que, para seguir con los “shortcodes” enganchamos hoy con algo que puede ser muy útil y es crear nuestros propios shortcodes.

Vamos a crear el shortcode “info” para darle estilos a un texto, sería algo así:
[shortcode]Texto dentro del shortcode[/shortcode]

Lo primero que haremos es abrir el archivo functions.php de nuestro theme y añadimos el siguiente código:


#Shortcode estilos texto
function textinfo( $atts, $content = null ) {
return '<div class="textinfo">' . $content . '</div>';
}
add_shortcode( 'info', 'textinfo' );

El código se compone de una función llamada “textinfo”, en este caso, que contiene un DIV con una clase a la que le daremos estilos en nuestro CSS “style.css”. Luego se indica el nombre que tendrá el shortcode (info) asociado a la función (textinfo).

Luego abrimos nuestro CSS, por lo general style.css y le damos los estilo que queramos a nuestro shortcode. Por ejemplo algo así:

.textinfo {
font-family: Georgia, "Times New Roman", Times, serif;
font size: 1.1em;
font-style:italic;
margin: 5px 0;
padding: 15px 10px;
text-align:center;
background: #0099FF;
color: #fff;
}

Y ya hemos terminado con nuestro shortcode utilizado en este ejemplo. Como ves, no es muy complicado y puedes crear los shortcodes que necesites, tanto para estilos como para otros usos como los de insertar vídeos, estilos para imágenes, listas, botones, etc.

Antes de terminar, veamos nuestro shortcode en funcionamiento. Resultado:

Texto dentro del shortcode “info”