≫ Pintar las noticias desde una API en nuestro WordPress

Índice de contenidos

Traer las noticias de otro WordPress a través de su API

En algunos desarrollos WordPress el cliente solicita que «se pinten» las noticias de otras webs.

Esto se puede hacer fácilmente gracias a la API de WordPress, que nos permite consultar esta información.

Para ello, se deben consular una URL similar a la siguiente:

https://todocamarasdevigilancia.com/wp-json/wp/v2/posts

Esta URL, llamdo técnicamente endpoint, devuelve las últimas 10 noticias de esa web.

Para obtener las últimas noticias de cualquier web WordPress, si tiene habilitada su API, tan solo hay que añadir /wp-json/wp/v2/posts al dominio del que se quieran obtener dichas noticias.

En el caso del código, que se detalla un poco más adelante, se han consultado otros endpoints, así podemos traer también la imagen de la noticia y sus categorías:

/wp-json/wp/v2/media/ ID de la imagen destacada –> Para obtener la imagen destacada de la noticia.
/wp-json/wp/v2/categories?post= ID del post –> Obtenemos las categorías de esa noticia.

El código aunque es funcional, es mejorable y lo tienes que adecuar a tus necesidades.

El CSS en línea habría que eliminarlo.

Se tendría que revisar si existe la imagen destacada y las categorías o controlar que sucede si fallan esos datos.

Recuerda que el objetivo es enseñar a traer las noticias desde otras webs WordPress.

El código a usar

Este código lo debes insertar en el fichero functions.php de tu tema, siendo mejor, incluirlo en tu tema hijo.

Aquí te explico cómo instalar el tema hijo de Avada.

Copiar

/**
 * Muestra las 4 últimas noticias de una web WordPress
 */
function get_4_posts_wordpress_api() {

$html = '';
	
    // Hace una peticion a la url pasada, si quieres pintar 10 noticias, quita esto --> ?per_page=4
	$posts_request = wp_remote_get('https://todocamarasdevigilancia.com/wp-json/wp/v2/posts?per_page=4');

// Si hay error en la petición, sale
	if (is_wp_error($posts_request)) {
		return;
	}

// Obtenemos los posts.
	$posts = json_decode(wp_remote_retrieve_body($posts_request));

// Si hay información, la pintamos
	if (!empty($posts)) {

$html = '<div class="news-container" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)">';
		
		// Vamos a obtener la información por cada noticia.
		foreach ($posts as $post) {
			
			$id = $post->id;
			$response = wp_remote_get( 'https://todocamarasdevigilancia.com/wp-json/wp/v2/posts/'.$id );
			$data = json_decode( wp_remote_retrieve_body( $response ) );
			
			// Obtenemos la imagen
			$featured_media_id = $data->featured_media;	
			$image = wp_remote_get( 'https://todocamarasdevigilancia.com/wp-json/wp/v2/media/'.$featured_media_id );
			$image_data = json_decode( wp_remote_retrieve_body( $image ) );
			$image_url = $image_data->source_url;
			
			// Obtenemos las categorías
			$categories = wp_remote_get( 'https://todocamarasdevigilancia.com/wp-json/wp/v2/categories?post='.$id );
			$categories_data = json_decode( wp_remote_retrieve_body( $categories ) );
			$categories_name = '';			
				
			foreach ($categories_data as $category) {
				$categories_name .= $category->name;
				$categories_name .= ', ';
			}
			
			$categories_name = substr($categories_name, 0, -2); //Quitamos la última coma
		
			// Fecha de la noticia
			$date = date( 'j/n/Y', strtotime( $post->modified ) );
			
			// Pintamos la información.
			$html .= '<div class="blog-notice" style="padding:20px 10px;">
							<div style="background-color:white;box-shadow: 0px 60px 70px -20px #e6e6e6;padding:10px 10px;" class="detail-notice">
							<a href="' . esc_url( $post->link ) . '" target=\"_blank\"><img class="lazyload" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="' . $image_url .'"></a> 
							<div style="margin-top:10px;margin-bottom:10px;"><span style="font-weight:bold;text-transform:uppercase;font-size:0.8rem;" "category-notice">'. esc_html($categories_name) . '</span></div>
							<a style="font-size:1.1rem;line-height:1.1rem;font-weight:bold;margin-top:20px;" href="' . esc_url( $post->link ) . '" target=\"_blank\">' . esc_html( $post->title->rendered ) . '</a>
							<br/> ' . esc_html( $date ) . ' 
							</div>
						</div>';

}// fin foreach
		
		$html .= '</div>';	
	}
	
  	return $html;
}

// Registramos el shortcode "shortcode_ultimas_noticias" para que al usarlo, llame a la función get_4_posts_wordpress_api
add_shortcode( 'shortcode_ultimas_noticias', 'get_4_posts_wordpress_api' );

El resultado

El resultado final de usar el shortcode «shortcode_ultimas_noticias» es la presentación de las 4 últimas noticias de esta web, que habla de cámaras de vigilancia.

Conclusión

Traer noticias de otros WordPress hacia el nuestro, no es una tarea complicada.

Existen también varios plugins dentro del repositorio de WordPress que realizan esta misma función, pero considero que es interesante saber hacerlo de forma manual.

Así no se dependen de terceros y además, conseguiremos un punto de diseño que igual los plugins no nos pueden brindar.

¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!

(Votos: 1 Promedio: 5)

¡Comparte esta noticia!

WhatsApp Facebook Email LinkedIn X (Twitter) Telegram

8 Comentarios

Lis 12/08/2022 en 08:56 - Responder

Buenos días… muy bueno el reportaje…
me gustaría me dijera algún plugin que haga esto porte tengo muchas web y a código tardaría mucho.

un saludo y gracias anticipadas
- Lis 12/08/2022 en 09:17 - Responder
  
  Con el código suyo acabo de probarlo pero no se ven las imágenes, que hago mal?
  - Javier Vallejo 12/08/2022 en 10:13 - Responder
    
    Hola Lis,
    
    ¿Podrías poner la página donde has metido el código?
    
    Aquí puede pasar que la otra web «bloquee» que se pinte la imagen o puede que tenga que retocar el código por error mío.
    
    ¡Un saludo!
- Javier Vallejo 12/08/2022 en 10:12 - Responder
  
  Hola Lis,
  
  En su momento usé algún plugin pero no recuerdo el nombre, miro algo y te digo.
  
  PD: Mira a ver si te vale este: https://es.wordpress.org/plugins/smart-recent-posts-widget/
  
  ¡Un saludo!
Ariel 29/10/2022 en 16:14 - Responder

https://prnt.sc/WiHiZEN09i-U las fotos cargan por que?
- Javier Vallejo 31/10/2022 en 16:53 - Responder
  
  Hola Ariel, en algunos casos la página de origen puede bloquear la carga de imágenes.
  
  Puede ese sea tu caso, si entras a la web que estás haciendo y e inspeccionas los elementos, en la pestaña de «consola», ¿aparece algún error?
  
  ¡Un saludo!
Ariel 24/07/2023 en 18:27 - Responder

LO use en otra pagina pero carga muchos casi un minutos cargando por que y sin imagenes se toma tiempo para abrir https://lajevifm.com/
- Javier Vallejo 26/07/2023 en 12:24 - Responder
  
  Tal vez se podría adecuar para hacer la petición por JavaScript, de forma que hasta que no reciba toda la información salga un mensaje similar a «Cargando datos…»
  
  Lo apunto para hacer la misma entrada pero con este lenguaje.

Pintar las noticias desde una API en nuestro WordPress