¿Qué son los shortcode en WordPress?

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

Los shortchodes en WordPress son mecanismo muy poderoso que nos permite llamar o invocar a un fragmento de código desde cualquiera lado, con una sintaxis muy simple, mediante una cadena de texto entre [corchetes], que se renderiza y se muestra en pantalla de forma sorprendente.

Tipos de Shortcodes

Existen 2 tipos principales de shortcodes: Shorcodes Self-Closing y Shorcodes  Enclosing Shortcodes

Self-Closing: Estos tienen como principal característica ser un shortcode con una sola etiqueta de apertura  como: [contact_form]

 

Enclosing Shortcodes: Este tipo de shortcode tienen una etiqueta de apertura y una de cierre como: [private_content] Contenido [/private_content]

 

¿Cómo crear un shortcode en WordPress Self-Closing?

Para realizar un shortcode usamos el método add_shortcode($tag, $callback)

Dónde:

$tag es igual al nombre que le daremos al shortcode

$callback será la función que se ejecutará

 

if(!function_exists('funcion_shortcode'))
{
      function funcion_shortcode(){
         return "ok";
      }
      add_shortcode('mi_shortcode', 'funcion_shortcode');
}

Los shortcodes puedes ser agregados directamente en el archivo functions.php de nuestro tema o podemos usar el plugin Code Snippets

 

Una vez agregado nuestro shortcode podemos llamado desde el editor con [mi_shortcode] o desde php con

<?php echo do_shortcode(“[shortcode]”); ?>

 

¿Cómo crear un shortcode en WordPress Self-Closing con parámetros?

Hasta ahora hemos creado un shortcode muy simple, una de las ventajas más importantes del uso de shortcode es la posibilidad de crear contenido dinámico, todo esto es posible con el paso de parámetros.

vamor a crear un botón de descarga el cual llamaremos mediante el shortcode:

[proyeccion_btn_download href="http://localhost/listings/wp-content/uploads/2021/12/GUIA_4HABILIDADES_B2.pdf" text="DESCARGAR"]

Como podemos ver tendremos 2 atributos:

src será la ruta del archivo a descargar

text será el texto de nuestro botón

if(!function_exists('proyecciion_btn_download')){
    
    
    function proyeccion_btn_download($atts){

    

        $atts_options = shortcode_atts(array(
          'href'   => '',
          'text'  => ''), $atts , 'proyeccion_btn_download');
        
        $text = $atts_options['text'];
        $href = $atts_options['href'];
          
        return "<a href='$href' dowmload='download'>$text</a>";
        
    } 

    add_shortcode('proyeccion_btn_download','proyeccion_btn_download' );
}