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:

Este será el ShortCode de ejemplo

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.

En cada $return devolvemos lo que viene siendo las etiquetas HTML, y hay que tener en cuenta que después del primero, hay que añadir un punto delante del signo igual y la línea termina con un signo de punto y coma

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 😛

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print

9 comentarios

  1.   sobrao72 dijo

    Me gusta como va quedando, os felicito.

    1.    elav dijo

      Gracias, aún le falta mucho pero gracias.

  2.   Rogers dijo

    Muy bueno!! Un tema así me encantaría en mi WP.
    Te felicito!

    1.    elav dijo

      No lo he puesto aún, te lo puedo vender JAJAJAJAJA.. Es broma 🙂

  3.   Manuel E. dijo

    Excelente, gracias por el compartir.
    Hace mucha falta este tipo de recursos en la web, explicando las cosas de forma clara.

    Saludos!

  4.   eliotime3000 dijo

    Hermoso diseño. A ver si para mi website me pasas esa plantilla para customizarla.

  5.   cuervo291286 dijo

    eso se puede hacer en blogger ?

  6.   javier dijo

    Pues nada, lo he puesto tal y como está y no me funciona, a que se puede deber? :/

    le coloco [info]informacion[/info]

    y en mi post de wordpress me aparece solo: informacion, desaparecen los corchetes, creo que algo anda mal :/

    1.    Jhonny Silva dijo

      A lo mejor en tu plantilla los ShortCode no están definidos en el function.php como en mi caso, estos valores los agregue en un archivo llamado shortcodes.php propio de mi tema

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.