Últimas noticias en la portada de WordPress

Tabla de contenidos

Vamos a crear un ShortCode que mostrará las últimas noticias de nuestro blog en la portada o en cualquier parte de nuestra web.

Utilizaremos para ello un ShortCode en el que podremos enviarle variables para definir el límite de entradas y las categorías que no queremos que muestre.

Sacar las últimas noticias de WordPress

Vamos a crear el ShortCode, para ello editamos nuestro functions.php de nuestro tema y ponemos el siguiente código:

/* shortcode últimas noticias*/
function saca_noticias($atts){
  $atts = shortcode_atts ( array (
  	//Estos son los valores por defecto
  	//Si no se les pasa ningunos paámetros usaran estos
    'limite' => 3,
    'no_mostrar' => '' //por defecto muestra todas las categorias
    ), $atts );
    
    //consulta sql que saca las últimas noticias
    //cogerá el limite de noticias por defecto o recibido
    $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  = '';
    	$noticias .= '<div id="ultimas-noticias">';

      while ($q->have_posts()) : $q->the_post();
      
        $noticias .= '<div class="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 .= '<h3>'.get_the_title().'</h3>';
        $noticias .= get_the_excerpt();
        $noticias .= '<p><a class="btn-noticia" href="'.get_permalink().'">Leer más</a></p>';
        $noticias .= '</div>';

      endwhile;

    wp_reset_query();
    $noticias .= '</div>';
    endif;
  
  return $noticias;
}
add_shortcode('ultimas_noticias','saca_noticias');
 


/* limpiar excerpt */
function change_excerpt( $text ){
    $pos = strrpos( $text, '[');
    if ($pos === false){
    	return $text;
    }
    return rtrim (substr($text, 0, $pos) );
}
add_filter('get_the_excerpt', 'change_excerpt');

 

Mostrar noticias en una página

Esto ya debería de funcionar, solo tenemos que usar el shortcode en una página donde queremos mostrar las últimas noticias de nuestra web de la siguiente forma:

Si queremos que solo saquen 3 noticias podemos utilizar el shortcode por defecto:

[ ultimas_noticias ]

Si queremos que solo saquen más noticias podemos utilizar el shortcode por defecto:

[ ultimas_noticias limite=10 ]

Ahora bien, si no queremos que aparezcan ciertas categorías, debemos marcar los ids de las categorías que no queremos mostrar, para averiguar los ids de las categorías basta con que edites la categoría y en la url aparecerá su id. El shortcode quedaría algo así:

[ ultimas_noticias limite=10 no_mostrar=33,16,30 ]

 

Dando estilos a nuestras últimas noticias de WordPress

Y con estos estilos acabamos, está maquetado para opción de 3 noticias:

.noticia {
    width: 33%;
    display: inline-block;
    vertical-align: top;
    padding: 1%;
    font-size: 14px;
}
.noticia h3 {
    font-size: 18px;
    border-bottom: 1px solid#eee;
    padding-bottom: 10px;
    min-height: 55px;
    padding-top: 5px;
    line-height: 18px;
}
.btn-noticia {
    background: #8acf3f;
    color: #fff;
    padding: 4px 15px;
    margin-top: 10px;
    float: left;
}

 

Y este es el resultado:

ejemplo ultimas noticias

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

3 respuestas

Deja una respuesta

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

Categorías

¿Necesitas una web? Contacta con nosotros.

Relacionados: