¿Cómo crear shortcodes en WordPress?

Muchos nos preguntamos ¿para qué sirven? ¿Cuándo y cómo utilizamos Los shortcodes en WordPress? A continuación te compartimos ejemplos prácticos y más entendibles sobre la utilidad de los shortcodes en WordPress.

Para qué utilizamos los shortcodes.

Los shortcode sirven para facilitarle al desarrollador o programador trabajos relacionados con tareas repetitivas en alguna sesión. Por ejemplo, si necesitamos una sesión que sea incluida en todas las partes de la web no es necesario ir insertando código HTML en todas las sesiones, simplemente con programar un shortcode con o sin plugins insertaremos solo el llamado en dicha sesión que queramos que se muestre.

En algunos casos tenemos que modificar una sesión que está repetida en varias Landings (páginas internas). A través de un shortcode, al modificarlo, se modificará automáticamente en todas las páginas. Con HTML tenedríamos que modificar una por una.

¿Cómo se identifica un shortcode?

Un shortcode con o sin plugin es identificado por el nombre que le brindamos a la hora de crearlo. Cuando creamos un shortcode, tenemos que darle un nombre para realizar el llamado de la función en las páginas donde sea necesario utilizarlo.

Primero debemos crear nuestra función, brindarle un nombre para ser identificado y retornado a la hora de ejecutarlo.

Como crear shortcodes para WordPress personalizados

Para crear un shortcode personalizado sin plugins es muy importante tener conocimientos básicos en la programación.

Si estas en problemas o estas en búsqueda de cualquier profesional en programación o desarrollador web que te ayuden a resolver tu dificultad no dudes en contactarlo desde aquí.

Crear shortcode en WordPress sin plugin

Iniciamos como indicamos anteriormente el nombre de la función

function mi_shortcode()

En este caso le damos como nombre mi_shortcode. Una vez que lo tengamos vamos a realizar lo que se requiere para cualquier tipo de lógica ya puede ser HTML o PHP.

Por último retornamos si es necesario la función aun que también como se indica se puede utilizar para HTML algún botón o alguna sesión.

¿Cómo retornamos la llamada al Shortcode?

add_shortcode( 'shortcodes', 'mi_shortcode' ); 

De esa forma le estamos indicamos el nombre que le hemos brindado, es decir, el nombre con el que lo vamos a llamar para que se ejecute en la vista.

[shortcodes]

Te dejaremos un ejemplo para programar algún shortcode en WordPress.

Simplemente con insertar el código en el functions.php, luego tendrás que añadirlo en la web donde lo quieras ejecutar para que aparezca.

function mi_shortcode() {



	return ' Hola Mundo';
}

add_shortcode( 'shortcodes', 'mi_shortcode' );

Insertamos para que se ejecute [shortcodes]

function sctextbox_callback( $atts, $content = null ) {
    
    // Genero los valores por defecto de los parámetros
    $params = shortcode_atts( array(
                                'text-color'        => '#000000',
                                'background-color'  => '#ffffff',
                            ), $atts );
    
    
    // Genero el string con estilos en línea
    $style = "style= 'color:{$params['text-color']}; background-color:{$params['background-color']}'";

    // Aplico el texto y el stilo a la etiqeta <p>
    return "<p class='sc-textbox' {$style}>{$content}</p>";
}
add_shortcode( 'sc-textbox', 'sctextbox_callback' );

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Crear shortcodes de contenido con un plugin

Existen muchos plugins para desarrollar shortcodes, uno que recomendamos por su calidad de código y fácil funcionalidad es Buckets.

¡Además de ser gratuito es perfecto!

Una vez se encuentre activo, veremos una nueva opción en el menú de administración, llamado “buckets”.

La funcionalidad es muy sencilla, solo tenemos que darle clic al botón “Add New” y listo, lo recomendable es darle un nombre que sea reconocible la ahora de realizar alguna modificación. La funcionalidad es el mismo de un shortcodes con código.