Quiero que mi sitio HTML tenga un blog – Javascript WordPress

Cerramos el trato, me proporcionó los accesos y, ¡sorpresa sorpresa!, su panel de administración era de esos antiguos, de la era de los 2000, un poco complicado para cargar el contenido. Pero lo dejamos para después y me enfoqué en lo que me gusta: ¡programar! Y aquí vino otra sorpresa: su sitio HTML era una única página que invocaba scripts para mostrar contenido dinámico. ¡Ups!

Todo esto me llevó a preguntarme: ¿cómo crear un blog para WordPress que llame al contenido dinámico usando JavaScript?

Paso 1: Identificar la estructura del sitio

Un solo html que llama un Javascript que tiene los contenidos

Paso 2: Entender el funcionamiento del JavaScript

Un Javascript que tiene declarados los contenidos en variables, cuando ocurre un evento en el click del boton llamamos a la variable.

En resumen:

Paso 3: El paso más interesante, ¡llamar al contenido dinámico! ¿Y cómo lo hicimos? Con la poderosa API REST de WordPress y este simpático código que te comparto:

const blog = document.getElementById('blog').addEventListener('click', async (event) => {
console.log('Blog clicado');
try {
// Usar el origen del sitio actual
const baseURL = window.location.origin;
const apiEndpoint = `${baseURL}/wp-json/wp/v2/posts?_embed`;

const response = await fetch(apiEndpoint);
if (!response.ok) throw new Error('Error al obtener artículos del blog');

const posts = await response.json();
let html = `<h4 class="ml-auto pb-3 text-right mt-4" style="color: #af3829;">Últimos artículos</h4><div class="row">`;

posts.forEach(post => {
const featuredImage = post._embedded && post._embedded['wp:featuredmedia'] ? 
post._embedded['wp:featuredmedia'][0].source_url : 
'./images/default.jpg';
html += 
`<div class="col-md-4 mb-4">
  <div class="card h-100">
    <img src="${featuredImage}" class="card-img-top" alt="${post.title.rendered}">
     <div class="card-body">
     <h5 class="card-title" style="color: #af3829;">${post.title.rendered}</h5>
      <p class="card-text">${post.excerpt.rendered}</p>
      <button class="btn btn-primary view-article" data-id="${post.id}">Leer más</button>
     </div>
  </div>
 </div>`;
});

html += `</div>`;
document.getElementById('contenedor').innerHTML = html;
setActiveMenu('bt5');

// Añadir eventos a los botones "Leer más"
document.querySelectorAll('.view-article').forEach(button => {
button.addEventListener('click', async (e) => {
const articleId = e.target.getAttribute('data-id');
await viewArticle(articleId);
});
});
} catch (error) {
console.error('Detalles del error:', error);
document.getElementById('contenedor').innerHTML = '<p>Error al cargar los artículos del blog.</p>';
}
});

¿Que Tiene el index.php del theme Javascript WordPress?

Simplemente este codigo, tan pequeño:

<?php get_header(); ?>
  <div id="contenedor" class="p-0">
    <img src="<?php echo get_template_directory_uri(); ?>/images/imgHome.jpg" class="img-fluid mx-auto d-none d-md-block" alt="Responsive image">
    <img src="<?php echo get_template_directory_uri(); ?>/images/imgHomeMini.jpg" class="img-fluid mx-auto d-block d-md-none" alt="Responsive image">
  </div>
<?php get_footer(); ?>

¡Y eso es todo! Con solo esas líneas, la potencia de este script llama al contenido dinámicamente, logrando un resultado óptimo. No entraré en detalles sobre si es bueno para el SEO o no, pero lo que nunca dejará de asombrarme es la increíble potencia de WordPress cuando se lleva a su máximo potencial al lado de su inseparable amigo, JavaScript.