David CHCSe você possui uma ecommerce, ou site institucional, algo primordial para alavancar visitas e conhecimentos em cima do seus produtos e serviços são as publicações de conteúdo relacionado direta ou indiretamente aos produtos ou serviços.
E o CMS mais conhecimento e utilizado é WordPress, que facilita a publicações de conteúdos.
Mas muitas vezes, e algo bem comum é separar o que é conteúdo do que é serviços em sistemas diferentes, exemplo, você tem uma loja, ou hospedada por você como OpenCart, Magento, ou mesmo contratando serviços como a Loja Integrada. E a exibição de publicações que você produz nas suas lojas pode ser um chamariz para conhecer melhor o que você deseja vende, só que você tem esse conteúdo instalado em outro sistema, no caso WordPress.
Uma forma interessante que pode ser feito é exibir as publicações do WordPress em outro sistema, e isso pode ser feito utilizando Javascript, através da API Rest do WordPress .
O WordPress oferece endpoint que você consegue recuperar informações de posts, páginas, tipos personalizados, etc.
Em nosso tutorial iremos exibir posts com as imagens.
Então vamos para o código.
A primeira coisa que iremos fazer é criação do elemento HTML onde será exibido esse conteúdo.
<div id="posts"></div>
No nosso HTML será apenas isso. Agora vamos para o javascript, iremos criar uma função anônima auto executável (IIFE – Immediately-invoked function expression), isso nos garante a definição de um escopo, limitando onde as variáveis irão existir apenas esse escopo, e não interferindo em outros elementos do site.
(function(){
/*Aqui dentro ficará o script*/
})();
O que será feito realizar um requisição para um endpoint (uma URL), que irá retornar os posts, em formato JSON, e organizaremos para que possa ser inserida na div#posts
(function(){
/*URL do site*/
const urlSite = 'https://www.mxcursos.com/blog';
/*definimos um endpoint para resgatar os posts, com imagens*/
const endPoint = `${urlSite}/wp-json/wp/v2/posts?_embed`;
})();
Definimos agora onde será realizada a requisição, separei em duas variáveis por uma questão de didática. Repare que na variável endPoint foi usado o acento grave, e não aspas simples ou duplas, elas são chamadas de Template String, onde você consegue definir múltiplas linhas, e interpolar variáveis, que você precisa utilizar o sinal de cifrão, e chaves, e dentro das chaves você informar a variável que deseja adicionar ali.
No variável endpoint, no caminho definido, tem um sinal de ?_embed, esse parâmetro é adicionado para retornar as imagens também dos posts. Você pode utilizar outros parâmetros no endpoint de acordo com necessidade, você pode consultar no site do WordPress para saber mais sobre a API REST.
Agora vamos utilizar a função fetch, que fará requisição do tipo GET e retornará os posts.
(function(){
/*URL do site*/
const urlSite = 'https://www.mxcursos.com/blog';
/*definimos um endpoint para resgatar os posts, com imagens*/
const endPoint = `${urlSite}/wp-json/wp/v2/posts?_embed`;
/*faz requisição do tipo GET que retornará os posts*/
fetch(endPoint)
.then(response => response.json())
.then( posts => {
});
})();
A função fetch ela retornar uma Promisse, que é um objeto que representa um valor que ainda não está disponível. Ela é usada em processamentos assíncronos, onde não precisa atualizar a página para realizar uma requisição. E a forma de acessar esse objeto Promisse é através do método then, esse método then, não é da fetch, mas sim do objeto Promisse . O primeiro then recuperamos o valor, mas retornando o json, que é o que queremos, que também nesse caso é um objeto Promisse, vimos para acessar esse Promisse usando o método then, e assim acessamos os posts em formato de JSON para podermos percorrer e exibir.
Agora vamos percorrer os posts, e monta nossa estrutura
(function(){
/*URL do site*/
const urlSite = 'https://www.mxcursos.com/blog';
/*definimos um endpoint para resgatar os posts, com imagens*/
const endPoint = `${urlSite}/wp-json/wp/v2/posts?_embed`;
/*faz requisição do tipo GET que retornará os posts*/
fetch(endPoint)
.then(response => response.json())
.then( posts => {
/*Define uma variável que receberá um array*/
const html = [];
/*Percorre o posts*/
posts.forEach( post => {
/*resgata o titulo*/
const title = post.title.rendered;
/*resgatar o link*/
const link = post.link;
/*resgata as images*/
const images = post._embedded['wp:featuredmedia'][0].media_details.sizes;
//resgata a image especifica, no caso medium.
const image = images.medium.source_url;
});
});
})();
Criamos uma variável html, que defini um array vazio, que iremos armazenar nela cada post formatado, para no final inserir na página, para que não precise se acessado toda hora do DOM, otimizando nosso processo no navegador.
Usamos forEach para percorrer cada post retornado, e dentro dele definimos variáveis para resgatar as informações que desejamos: titulo, link, imagem.
Agora vamos montar o HTML com variáveis que foram definidas, e usaremos a Template Strings para possamos criar um string de múltiplas linhas e ter fácil acesso as variáveis.
(function(){
/*URL do site*/
const urlSite = 'https://www.mxcursos.com/blog';
/*definimos um endpoint para resgatar os posts, com imagens*/
const endPoint = `${urlSite}/wp-json/wp/v2/posts?_embed`;
/*faz requisição do tipo GET que retornará os posts*/
fetch(endPoint)
.then(response => response.json())
.then( posts => {
/*Define uma variavel que receberá um array*/
const html = [];
/*Percorre o posts*/
posts.forEach( post => {
/*resgata o titulo*/
const title = post.title.rendered;
/*resgatar o link*/
const link = post.link;
/*resgata as images*/
const images = post._embedded['wp:featuredmedia'][0].media_details.sizes;
//resgata a image especifica, no caso medium.
const image = images.medium.source_url;
const article = `
<article>
<a href="${link}">
<img src="${image}" alt="${title}" />
<h3>${title}</h3>
</a>
</article>
`;
});
});
})();
Pronto, montamos nosso HTML, de forma bem simples e diretas, tem outras forma utilizando javascript também, mas dessa forma mais fácil de você visualizar o que está ocorrendo, mas se quiser usar outras formas não tem problema.
Agora precisamos adicionar a nossa variável html, e depois inserir na div#posts.
(function(){
/*URL do site*/
const urlSite = 'https://www.mxcursos.com/blog';
/*definimos um endpoint para resgatar os posts, com imagens*/
const endPoint = `${urlSite}/wp-json/wp/v2/posts?_embed`;
/*faz requisição do tipo GET que retornará os posts*/
fetch(endPoint)
.then(response => response.json())
.then( posts => {
/*Define uma variavel que receberá um array*/
const html = [];
/*Percorre o posts*/
posts.forEach( post => {
/*resgata o titulo*/
const title = post.title.rendered;
/*resgatar o link*/
const link = post.link;
/*resgata as images*/
const images = post._embedded['wp:featuredmedia'][0].media_details.sizes;
//resgata a image especifica, no caso medium.
const image = images.medium.source_url;
/*defini a estrutura html*/
const article = `
<article>
<a href="${link}">
<img src="${image}" alt="${title}" />
<h3>${title}</h3>
</a>
</article>
`;
/*Adiciona a variável article no array*/
html.push(article);
});
/*Seleciona o elemento posts, e inseri os posts*/
document.querySelector("#posts").innerHTML = html.join('');
});
})();
Agora finalizamos o javascript, onde adicionar a variável article no array html utilizado o método push. E depois selecionamos o div#posts, e inserimos o posts, que estão no array, e convertemos em string utilizando o método join.
O posts estão inserido no HTML, dentro de div#posts.
Formatando com CSS
Agora como posts listados, vamos estilizá-los, fazendo que fiquem em 2 colunas, e uma forma fácil de realizar é usando o display: grid.
#posts{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 10px;
}
#posts > article img{
max-width: 100%;
width: auto;
}
#posts > article a{
text-decoration: none;
}
#posts > article a h3{
color: #333;
padding: 0;
margin: 0;
font-size: 15px;
}
Utilizando o display:grid para definimos que nossos elementos serão dispostos dessa forma, e definimos que tenham duas colunas usando grid-template-columns , e o espaçamento entre os itens de 20px 10px usando o gap.
Vamos ver como ficou o resultado final:
Pronto, dessa forma você consegue resgatar posts do WordPress para qualquer aplicação apenas usando o Javascript, você poderia utilizar alguma biblioteca javascript para renderizar também como VueJs, React, Angular, entre outros.
Espero que tenham gostado, e até a próxima
