Mostrar últimos posts usando un Shortcode

Vamos a crear un Shortcode para poner las últimas noticias de nuestro blog en cualquier parte de nuestra web, por ejemplo en la portada, en alguna página de información, etc.

Shortcode últimas noticias, ¿cómo funciona?

El siguiente shortcode se llamará [ultimas_noticias] y estará definido como límite de noticias en 3 y como que no oculte ninguna noticia de ninguna categoría. Pero podemos decir cuantas noticias queremos que muestre así como que categorías queremos que estén descartadas para no mostrar sus noticias.

Ejemplo:
Si queremos que muestre por ejemplo 4 noticias usaremos la variable limite.

[ultimas_noticias limite=4]

Ejemplo:
Si queremos que no muestre ninguna noticia de ciertas categoría, añadiremos los IDs de las categorías a ocultar, usando la variable no_mostrar.

[ultimas_noticias limite=6 no_mostar=2,4]

Añadiendo shortcode que muestre las últimas noticias

Para ello tenemos que ir a nuestro functions.php del tema y añadir el siguiente código:

// SHORTCODE "ÚLTIMOS POSTS"

function saca_noticias($atts){
  $atts = shortcode_atts ( array (
    'limite' => 3,
    'no_mostrar' => ''
    ), $atts );
    $query = array(
      'posts_per_page' => $atts['limite'],
      'category__not_in' => explode(",", $atts['no_mostrar']),
      'orderby'=> 'date', 
      'order'=>'DESC', 
      'post_status' => 'publish'
    );
    $q = new WP_Query($query);
    if ($q->have_posts()) :
        $noticias .= '<style>p.read-more-container{margin-top: 15px;} .noticia img {width: 100%;margin-bottom: 10px;}</style>';
        $noticias .= '<div id="ultimas-noticias">';
        $noticias .= '<div class="container">';
        $noticias .= '<div class="row">';
      while ($q->have_posts()) : $q->the_post();
        $noticias .= '<div class="col-md-4">';
        $noticias .= '<div class="noticia">';
        $noticias .= '<div class="img-noticia">';
        $noticias .= '<a href="'.get_permalink().'" title="'.sprintf( "Enlace permanente a %s", get_the_title() ).'">';
        $noticias .= get_the_post_thumbnail(get_the_id(),'medium' ,array('title'=>get_the_title(),'alt'=>get_the_title(),'class'=>'imagnew'));
        $noticias .= '</a>';
        $noticias .= '</div>';
        $noticias .= '<div class="tnoticia">';
        $noticias .= '<h3>'.get_the_title().'</h3>';
        $noticias .= '<div><small>'.get_the_date().'</small></div>';
        $noticias .= get_the_excerpt();
        $noticias .= '</div>';
        $noticias .= '</div>';
        $noticias .= '</div>';
      endwhile;
    wp_reset_query();
    $noticias .= '</div>';
    $noticias .= '</div>';
    $noticias .= '</div>';
    endif;
  return $noticias;
}
add_shortcode('ultimas_noticias','saca_noticias');

 

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

Relacionados: