Noticias relacionadas en un página de WordPress
Vamos a crear un bloque de noticias relacionadas en una página de WordPress.
Imaginemos que tenemos una web en la que tenemos varios servicios, por ejemplo: servicios de diseño web, de diseño gráfico, de programación, etc, y queremos mostrar, debajo de cada una de estas páginas de información, un bloque de las últimas noticias relacionadas con cada servicio, por ejemplo debajo de la página de servicios de diseño web queremos mostrar las últimas noticias de nuestra categoría diseño web. Para ello necesitaremos configurar un custom field para poder añadir el id de la categoría que queremos que muestre cada página para posteriormente, mediante código, podamos sacar las últimas entradas de esa categoría.
Creando un campo personalizado con Advanced Custom Fields
El plugin Advanced Custom Fields es muy fácil de utilizar, tan solo tenemos que instalarlo, crear un nuevo campo y asignarlo a tipo de entrada: Página. Veamos los pasos:
Instalación de Advanced Custom Fields
Buscamos el plugin, le damos a instalar y activamos el plugin:
Ahora vamos al enlace que se ha creado en el menú de nuestro escritorio de WordPress llamado Campos personalizados, le damos al botón de Añadir nuevo y cargará una página para crear nuestro grupo de campos personalizados, ahora le ponemos el nombre que queramos, seleccionamos que se aplique a Páginas y pinchamos en +Añadir campo.
Al pinchar en Añadir campo nos abre un desplegable con todas las opciones disponibles, en nuestro caso vamos a configurarlo de esta forma y damos a publicar.
Añadir las categorías en nuestra página
Ya tenemos nuestro grupo de campos creado. Ahora, cuando editemos cualquier página podremos ver nuestro nuevo campo de Noticias relacionadas, y podremos seleccionar las categorías de las que queremos mostrar sus entradas.
Bien, ahora tenemos que añadir un poco de código a nuestra plantilla de page.php de nuestro tema. Para saber que página tienes que editar te recomiendo usar el plugin what the file el cual te dirá que archivo .php te encuentras mientras navegas logueado en tu web, por defecto suele ser page.php pero esto puede cambiar en función del tema instalado y la plantilla seleccionada.
Noticias relacionadas en page.php
Lo primero que tenemos que hacer es sacar los IDs de las categorías y posteriormente sacaremos las noticias relacionadas a los ids de las categorías obtenidas de la página, para ello vamos a poner el siguiente código justo debajo de la función the_content().
<?php
//SACAR LOS IDS DE LAS CATEGORÍAS
$terms = get_field('id_categoria');
$categorias=array();
if( $terms ){
foreach( $terms as $term ){
$categorias[]= $term;
}
echo implode(',', $categorias);
}
//SACAR ÚLTIMAS NOTICIAS
$limite=3;
$longitud_titulo=90;
$limite_palabras=22;
$thumbnail=true;
$tamano=65;
$query = array('posts_per_page' => $limite,'cat' => array($categorias), 'orderby'=> 'date', 'order'=>'DESC', 'post_status' => 'publish');
$q = new WP_Query($query);
if ($q->have_posts()) :
$salida = '';
$salida .= '<div id="ultimas-noticias-v2"><h2>Noticias relacionadas</h2>';
while ($q->have_posts()) : $q->the_post();
$salida .= '<div class="lista-v3">';
$salida .= '<div class="img-v3">';
$salida .= get_the_post_thumbnail(get_the_id(),'medium' ,array('title'=>get_the_title(),'alt'=>get_the_title(),'class'=>'imagnew'));
$salida .= '</div>';
$salida .= '<h3><a href="'.get_permalink().'" title="'.sprintf( "Enlace permanente a %s", get_the_title() ).'">';
$salida .= wp_html_excerpt (get_the_title(), $longitud_titulo );
$salida .= '</a></h3><div class="home-3-separador"></div>';
$salida .= '<div class="lista-textos-v3">';
$salida .= '<div class="lista-descripcion-v3">';
$salida .= wp_trim_words( get_the_excerpt(), $num_words = $limite_palabras, $more = null );
$salida .= '</div>';
$salida .= '<div class="read-more2">';
$salida .= '<div class="btn-jh btn-jh-border btn-jh-read"><a href="'.get_permalink().'" alt="">Leer más</a><div class="btn-jh-fondo"></div></div>';
//$salida .= '<a class="btnborder" href="'.get_permalink().'" >Leer más</a>';
$salida .= '</div>';
$salida .= '</div>';
$salida .= '</div>';
endwhile;
wp_reset_query();
$salida .= '</div>';
endif;
echo $salida;
echo "<div style='clear:both;margin-bottom:40px'></div>";
// Fin noticias relacionadas
?>
Y por último añadimos a nuestro styles el siguiente código css:
#ultimas-noticias-v2 {
width: 800px;
margin: 0 auto;
}
#ultimas-noticias .lista-textos {
width: 420px!important;
}
#ultimas-noticias .lista-textos h3{
margin-top: 5px;
margin-bottom:7px;
font-size:18px;
}
#ultimas-noticias .lista-textos .read-more {
clear: none;
}
.lista-v3 {
width: 31%;
display: inline-block;
border: 1px solid #ccc;
margin-right: 2%;
padding: 0;
vertical-align: top;
margin-bottom: 20px;
}
.img-v3 {
width: 100%;
height: 90px;
overflow: hidden;
border-bottom: 4px solid #7baf3f;
}
.lista-v3 h3 {
margin: 20px 0 7px 0;
}
.lista-v3 h3 a {
color: #666;
padding: 0 20px 0 20px;
display: block;
text-transform: uppercase;
font-size: 15px;
line-height: 15px;
min-height: 46px;
}
.home-3-separador {
height: 4px;
width: 90px;
background: #666666;
margin-left: 20px;
}
.lista-descripcion-v3 {
line-height: 16px;
font-size: 12px;
margin-top: 8px;
padding: 0 20px 0 20px;
min-height: 90px;
line-height: 17px;
margin-bottom:20px;
}
.read-more2 a {
background: #7baf3f;
width: 100%;
display: block;
text-align: center;
color: #fff;
padding: 10px 5%;
}
.read-more2 a:hover {
background: #608832;
transition: 0.3s;
}
div#ultimas-noticias-v2 h2 {
text-align: center;
text-transform: uppercase;
color: #444;
margin-bottom: 30px;
}
Y ya tenemos nuestras entradas relacionadas en nuestras páginas de WordPress:
