¿Cómo mostrar noticias relacionadas en una 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. Para implementar este sistema de noticias relacionadas, recomendamos descargar el plugin Advanced Custom Fields desde el repositorio oficial de WordPress.
¿Cómo crear 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:
¿Cómo instalar 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.
¿Cómo 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.
¿Cómo mostrar 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:
Crear noticias relacionadas en WordPress
- Usa Advanced Custom Fields para crear un campo personalizado que almacene IDs de categorías en tus páginas
- Instala y activa el plugin Advanced Custom Fields desde el escritorio de WordPress
- Configura un grupo de campos personalizado asignado al tipo de entrada Página
- Selecciona las categorías deseadas en cada página para mostrar sus entradas relacionadas
- Edita el archivo page.php de tu tema para extraer los IDs de categorías y mostrar las noticias
