Crear Shortcodes para nuestro tema de WordPress

Desde que comenzamos con este proyecto, siempre quisimos que tuviese nuestro propio sello, y es por ello que la segunda plantilla que usamos en DesdeLinux, fue creada por nosotros al 100%.

Luego le siguieron otras versiones, y si bien podemos comprar o contratar determinados servicios web para crear nuestros diseños como los de EstudioDWeb.com, o comprar plantillas ya creadas en ThemeForest.net, siempre hemos querido tener lo nuestro, adaptado a nuestras necesidades y pasarnos por DesarrolloWeb.com puede ser de ayuda 😀

De todas formas, me apasiona esto del Diseño y Desarrollo Web, y ya estoy trabajando en el nuevo tema para DesdeLinux y les mostraré unos Pantallazos de como va quedando.

La idea es no salirnos de lo que ya estamos adaptados, por lo que muchos elementos permanecen igual o de forma parecida. Empiezo por la página de inicio

Y así se verían los artículos:

Como ven, está quedando justo a nuestra medida y hemos incluido nuevos ShortCodes para la elaboración de los artículos.

Es por ello que se me ocurrió compartir con ustedes como crear uno de ellos (el de información) por si desean incluirlos en sus temas de WordPress. O sea, algo como esto:

No soy experto en la programación con este CMS, por lo que no intentaré explicar por qué y cómo funciona de esta forma, solo les mostraré como hacerlo y punto.

Para ello hacemos uso de «la navaja suiza» de WordPress, me refiero al fichero function.php que normalmente encontramos en casi todos los temas.

Ejemplo del Function.php con los ShortCodes de DesdeLinux

Lo que haremos en este fichero es añadir la estructura de nuestro ShortCode y por supuesto, la etiqueta que lo muestra. Así que vamos a ello.

Dentro del Function.php

Dentro de nuestro fichero function.php lo que pondremos será la estructura HTML del ShortCode, pero no es simplemente poner las etiquetas HTML así como así. Nos quedaría algo como esto:

// Info
function infobox( $atts, $content = null, $code = "" ) {
    $return = '<div class="alert-info">';
    $return .= $content;
    $return .= '</div>';
    return $return;
}

// El ShortCode
add_shortcode( 'info', 'infobox' );

De acá aclaramos un par de cosas. Primero, cuando usamos dos barras comentamos la línea, por lo tanto // Info es solo un comentario.

El nombre de la función, en este caso infobox puede cambiarse por el que queramos, pero debe coincidir con el nombre que usamos en la última línea.

Ejemplo:

$return .= $content;

La variable $content que es donde va el contenido que pongamos en el ShortCode por defecto devolverá un valor nulo si no ponemos nada.

Ahora, el nombre del ShortCode es lo que establecemos con:

add_shortcode( 'info', 'infobox' );

Donde se puede cambiar info por lo que queramos. Ahora, para que quede como en el ejemplo debemos poner:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Aunque claro, sin los espacios, los cuales pongo porque evidentemente se activaría el ShortCode.

Estilo del ShortCode

Si se fijan en la línea más arriba, sin el código PHP ni las variables, el ShortCode en HTML puro sería algo como esto:

<div class="alert-info"></div>

Por lo que solo nos queda aplicarle el estilo CSS.

.alert.alert-info
{
    background:#d9edf7 url(info.png) no-repeat 7px 50%;
    border-radius:4px;
    border:1px solid #bce8f1;
    color:#3a87ad;
    font-size:14px;
    margin:15px 15px;
    padding:15px 15px 15px 50px
    text-align:left
}

Y eso es todo.. Repito, no soy programador ni nada por el estilo, y la explicación que he dado es como yo entiendo que funciona el ShortCode 😛