¿Cómo crear un shortcode para WordPress?

¿Cómo crear un shortcode para WordPress?

"visitar"

Un shortcode nos permite crear un fragmento de código que podemos invocar desde cualquiera lado, con una sintaxis muy simple.

 

Ejemplo código:

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

      add_shortcode('mi_shortcode', 'funcion_shortcode');
}

Ejemplo invocación:


Método add_shortcode()

Recibe 2 parametros el primero hace referencia al tag o nombre con el cual invocaremos a ese shortcode y el segundo a la función que lo invoca.

 

Pasando parámetros a un shortcode

if(!function_exists('funcion_shortcode'))
{
      function funcion_shortcode($atts){
              
                $a = shortcode_atts( array(
                    'link'     => '',
                    'text'     => '', 
           

                 ), $atts );

              ?>
                  <a href="<?php echo $a['link']; ?>" ><?php echo $a['text']; ?></a>
              <?php
         
      }

      add_shortcode('mi_shortcode', 'funcion_shortcode');
}


Ejemplo invocación:


En el ejemplo anterior podemos observar como la función recibe un array de parámetros, los cuales pueden estar inicilizados, y en tu llamado al shortcode puedes sobreescribir esos valores.

 

 

Creando un shortcode para filtrar notas por category

 

if(!function_exists('dummies_filter_post'))
{
      function dummies_filter_post($atts){
              
                $a = shortcode_atts( array(
                    'number_post' => '3',
                    'category'    => null
                ), $atts );
    


                $the_query = new WP_Query( array(
                                   'post_count'    => $a['number_post'],
                                   'category_name' => $a['category'], 
                                   'size_image'    => $a['thumnail'] ));     

            ?>
         
                <?php if ( $the_query->have_posts() ) : ?>

                <!-- pagination here -->

                <!-- the loop -->
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  

                    <div class="grid-33 tablet-grid-50 mobile-grid-100">
                        <?php
                              if ( has_post_thumbnail() ) {
                                the_post_thumbnail('medium', array('class' => 'img-responsive'));
                              } 
                                 
                        ?>

   
                       <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        
                    </div>
                         
  
  
                <?php endwhile; ?>
                <!-- end of the loop -->

                <!-- pagination here -->

                <?php wp_reset_postdata(); ?>

                <?php else : ?>
                <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
                <?php endif; ?>

        <?php        
         
      }

      add_shortcode('filter_post', 'dummies_filter_post');
}

El código anterior permite filtrar notas por  categoria, las clases css pueden variar segun el tema, en este caso es GeneratePress.

 

Ejemplo invocación:

Leave a Comment