{"id":21094,"date":"2021-12-09T13:18:35","date_gmt":"2021-12-09T16:18:35","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=21094"},"modified":"2021-12-09T15:05:09","modified_gmt":"2021-12-09T18:05:09","slug":"exibindo-posts-do-wordpress-usando-apenas-javascript-vanilla","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/exibindo-posts-do-wordpress-usando-apenas-javascript-vanilla\/","title":{"rendered":"Exibindo Posts do WordPress usando apenas Javascript Vanilla"},"content":{"rendered":"

Se voc\u00ea possui uma ecommerce, ou site institucional,\u00a0 algo primordial para alavancar visitas e conhecimentos em cima do seus produtos e servi\u00e7os\u00a0 s\u00e3o as publica\u00e7\u00f5es de conte\u00fado relacionado direta ou indiretamente aos produtos ou servi\u00e7os.<\/p>\n

E o CMS mais conhecimento e utilizado \u00e9 WordPress, que facilita a publica\u00e7\u00f5es de conte\u00fados.<\/p>\n

Mas muitas vezes, e algo bem comum \u00e9 separar o que \u00e9 conte\u00fado do que \u00e9 servi\u00e7os em sistemas diferentes, exemplo, voc\u00ea tem uma loja, ou hospedada por voc\u00ea como OpenCart, Magento, ou mesmo contratando servi\u00e7os como a Loja Integrada. E\u00a0 a exibi\u00e7\u00e3o de publica\u00e7\u00f5es que voc\u00ea produz nas suas lojas pode ser um chamariz para conhecer melhor o que voc\u00ea deseja vende, s\u00f3 que voc\u00ea tem esse conte\u00fado instalado em outro sistema, no caso WordPress.<\/p>\n

Uma forma interessante que pode ser feito \u00e9 exibir as publica\u00e7\u00f5es do WordPress em outro sistema, e isso pode ser feito utilizando Javascript, atrav\u00e9s da API Rest do WordPress\u00a0 .<\/p>\n

O WordPress oferece endpoint que voc\u00ea consegue recuperar informa\u00e7\u00f5es de posts, p\u00e1ginas, tipos personalizados, etc.<\/p>\n

Em nosso tutorial iremos exibir posts com as imagens.<\/p>\n

Ent\u00e3o vamos para o c\u00f3digo.<\/h2>\n

A primeira coisa que iremos fazer \u00e9 cria\u00e7\u00e3o do elemento HTML onde ser\u00e1 exibido esse conte\u00fado.<\/p>\n

\r\n<div id="posts"><\/div>\r\n<\/pre>\n
No nosso HTML ser\u00e1 apenas isso. Agora vamos para o javascript, iremos criar uma fun\u00e7\u00e3o an\u00f4nima auto execut\u00e1vel (IIFE<\/strong> – Immediately-invoked function expression), isso nos garante a defini\u00e7\u00e3o de um escopo, limitando onde as vari\u00e1veis ir\u00e3o existir apenas esse escopo, e n\u00e3o interferindo em outros elementos do site.<\/p>\n
(function(){\r\n\r\n\r\n \/*Aqui dentro ficar\u00e1 o script*\/\r\n\r\n})();\r\n<\/pre>\n
O que ser\u00e1 feito realizar um requisi\u00e7\u00e3o para um endpoint (uma URL), que ir\u00e1 retornar os posts, em formato JSON, e organizaremos para que possa ser inserida na div#posts<\/p>\n
(function(){\r\n\r\n\/*URL do site*\/\r\nconst urlSite = 'https:\/\/www.mxcursos.com\/blog';\r\n\r\n\/*definimos um endpoint para resgatar os posts, com imagens*\/\r\nconst endPoint = `${urlSite}\/wp-json\/wp\/v2\/posts?_embed`;\r\n\r\n\r\n})();<\/pre>\n
Definimos agora onde ser\u00e1 realizada a requisi\u00e7\u00e3o, separei em duas vari\u00e1veis por uma quest\u00e3o de did\u00e1tica. Repare que na vari\u00e1vel endPoint<\/strong> foi usado o acento grave<\/strong>, e n\u00e3o aspas simples ou duplas, elas s\u00e3o chamadas de Template String,<\/strong> onde voc\u00ea consegue definir m\u00faltiplas linhas, e interpolar vari\u00e1veis, que voc\u00ea precisa utilizar o sinal de cifr\u00e3o, e chaves, e dentro das chaves voc\u00ea informar a vari\u00e1vel que deseja adicionar ali.<\/p>\n
No vari\u00e1vel endpoint<\/strong>, no caminho definido, tem um sinal de ?_embed<\/strong>, esse par\u00e2metro \u00e9 adicionado para retornar as imagens tamb\u00e9m dos posts. Voc\u00ea pode utilizar outros par\u00e2metros no endpoint de acordo com necessidade, voc\u00ea pode consultar no site do WordPress para saber mais sobre a\u00a0 API REST.<\/a><\/p>\n
Agora vamos utilizar a fun\u00e7\u00e3o fetch<\/strong>, que far\u00e1 requisi\u00e7\u00e3o do tipo GET<\/strong> e retornar\u00e1 os posts.<\/p>\n
(function(){\r\n\r\n\/*URL do site*\/\r\nconst urlSite = 'https:\/\/www.mxcursos.com\/blog';\r\n\r\n\/*definimos um endpoint para resgatar os posts, com imagens*\/\r\nconst endPoint = `${urlSite}\/wp-json\/wp\/v2\/posts?_embed`;\r\n\r\n\/*faz requisi\u00e7\u00e3o do tipo GET que retornar\u00e1 os posts*\/\r\nfetch(endPoint)\r\n.then(response => response.json())\r\n.then( posts => {\r\n\r\n});\r\n\r\n})();<\/pre>\n
A fun\u00e7\u00e3o fetch <\/strong>ela retornar uma Promisse<\/strong>, que \u00e9 um objeto que representa um valor que ainda n\u00e3o est\u00e1 dispon\u00edvel. Ela \u00e9 usada em processamentos ass\u00edncronos, onde n\u00e3o precisa atualizar a p\u00e1gina para realizar uma requisi\u00e7\u00e3o. E a forma de acessar esse objeto Promisse <\/strong>\u00e9 atrav\u00e9s do m\u00e9todo then<\/strong>, esse m\u00e9todo then<\/strong>, n\u00e3o \u00e9 da fetch<\/strong>, mas sim do objeto Promisse <\/strong>. O primeiro then <\/strong>recuperamos o valor, mas retornando o json, que \u00e9 o que queremos, que tamb\u00e9m nesse caso \u00e9 um objeto Promisse<\/strong>, vimos para acessar esse Promisse <\/strong>usando o m\u00e9todo then<\/strong>, e assim acessamos os posts<\/strong> em formato de JSON<\/strong> para podermos percorrer e exibir.<\/p>\n
Agora vamos percorrer os posts, e monta nossa estrutura<\/p>\n
(function(){\r\n\r\n\/*URL do site*\/\r\nconst urlSite = 'https:\/\/www.mxcursos.com\/blog';\r\n\r\n\/*definimos um endpoint para resgatar os posts, com imagens*\/\r\nconst endPoint = `${urlSite}\/wp-json\/wp\/v2\/posts?_embed`;\r\n\r\n\/*faz requisi\u00e7\u00e3o do tipo GET que retornar\u00e1 os posts*\/\r\nfetch(endPoint)\r\n.then(response => response.json())\r\n.then( posts => {\r\n\r\n   \/*Define uma vari\u00e1vel que receber\u00e1 um array*\/\r\n    const html = [];\r\n  \r\n  \/*Percorre o posts*\/\r\n  posts.forEach( post => {\r\n  \t\t\r\n      \/*resgata o titulo*\/\r\n      const title = post.title.rendered;\r\n      \r\n      \/*resgatar o link*\/\r\n      const link = post.link;\r\n\r\n      \/*resgata as images*\/\r\n      const images = post._embedded['wp:featuredmedia'][0].media_details.sizes; \r\n\r\n      \/\/resgata a image especifica, no caso medium.\r\n      const image = images.medium.source_url;\r\n           \r\n   });\r\n\r\n});\r\n\r\n})();<\/pre>\n
Criamos uma vari\u00e1vel html<\/strong>, que defini um array <\/strong>vazio, que iremos armazenar nela cada post formatado, para no final inserir na p\u00e1gina, para que n\u00e3o precise se acessado toda hora do DOM, otimizando nosso processo no navegador.<\/p>\n
Usamos forEach<\/strong> para percorrer cada post retornado, e dentro dele definimos vari\u00e1veis para resgatar as informa\u00e7\u00f5es que desejamos: titulo, link, imagem.<\/p>\n
Agora vamos montar o HTML com vari\u00e1veis que foram definidas, e usaremos a Template Strings<\/strong> para possamos criar um string de m\u00faltiplas linhas e ter f\u00e1cil acesso as vari\u00e1veis.<\/p>\n
(function(){\r\n\r\n\/*URL do site*\/\r\nconst urlSite = 'https:\/\/www.mxcursos.com\/blog';\r\n\r\n\/*definimos um endpoint para resgatar os posts, com imagens*\/\r\nconst endPoint = `${urlSite}\/wp-json\/wp\/v2\/posts?_embed`;\r\n\r\n\/*faz requisi\u00e7\u00e3o do tipo GET que retornar\u00e1 os posts*\/\r\nfetch(endPoint)\r\n.then(response => response.json())\r\n.then( posts => {\r\n\r\n  \/*Define uma variavel que receber\u00e1 um array*\/\r\n  const html = [];\r\n  \r\n  \/*Percorre o posts*\/\r\n  posts.forEach( post => {\r\n  \t\t\r\n  \/*resgata o titulo*\/\r\n  const title = post.title.rendered;\r\n  \r\n  \/*resgatar o link*\/\r\n  const link = post.link;\r\n  \r\n  \/*resgata as images*\/\r\n  const images = post._embedded['wp:featuredmedia'][0].media_details.sizes; \r\n  \r\n  \/\/resgata a image especifica, no caso medium.\r\n  const image = images.medium.source_url;\r\n      \r\n     const article = `\r\n     \t\t   <article>\r\n                         <a href="${link}">\r\n                            <img src="${image}" alt="${title}" \/>\r\n                            <h3>${title}<\/h3>                         \r\n                         <\/a>                  \r\n                  <\/article>\r\n     `;\r\n           \r\n   });\r\n\r\n});\r\n\r\n})();<\/pre>\n
Pronto, montamos nosso HTML, de forma bem simples e diretas, tem outras forma utilizando javascript tamb\u00e9m, mas dessa forma mais f\u00e1cil de voc\u00ea visualizar o que est\u00e1 ocorrendo, mas se quiser usar outras formas n\u00e3o tem problema.<\/p>\n
Agora precisamos adicionar a nossa vari\u00e1vel <\/strong>html, e depois inserir na div#posts<\/strong>.<\/p>\n
(function(){\r\n\r\n\/*URL do site*\/\r\nconst urlSite = 'https:\/\/www.mxcursos.com\/blog';\r\n\r\n\/*definimos um endpoint para resgatar os posts, com imagens*\/\r\nconst endPoint = `${urlSite}\/wp-json\/wp\/v2\/posts?_embed`;\r\n\r\n\/*faz requisi\u00e7\u00e3o do tipo GET que retornar\u00e1 os posts*\/\r\nfetch(endPoint)\r\n.then(response => response.json())\r\n.then( posts => {\r\n\r\n\t\/*Define uma variavel que receber\u00e1 um array*\/\r\n\tconst html = [];\r\n  \r\n  \/*Percorre o posts*\/\r\n  posts.forEach( post => {\r\n  \t\t\r\n      \/*resgata o titulo*\/\r\n      const title = post.title.rendered;\r\n      \r\n      \/*resgatar o link*\/\r\n      const link = post.link;\r\n      \r\n      \/*resgata as images*\/\r\n      const images = post._embedded['wp:featuredmedia'][0].media_details.sizes; \r\n      \r\n      \/\/resgata a image especifica, no caso medium.\r\n      const image = images.medium.source_url;\r\n      \r\n      \/*defini a estrutura html*\/      \r\n      const article = `\r\n     \t\t<article>\r\n                         <a href="${link}">\r\n                            <img src="${image}" alt="${title}" \/>\r\n                            <h3>${title}<\/h3>                         \r\n                         <\/a>                  \r\n                  <\/article>\r\n     `;\r\n     \r\n     \/*Adiciona a vari\u00e1vel article no array*\/\r\n     html.push(article);\r\n           \r\n   });\r\n\r\n   \/*Seleciona o elemento posts, e inseri os posts*\/\r\n   document.querySelector("#posts").innerHTML = html.join('');\r\n\r\n});\r\n\r\n})();<\/pre>\n
Agora finalizamos o javascript, onde adicionar a vari\u00e1vel article <\/strong>no array <\/strong>html utilizado o m\u00e9todo push<\/strong>. E depois selecionamos o div#posts<\/strong>, e inserimos o posts, que est\u00e3o no array<\/strong>, e convertemos em string utilizando o m\u00e9todo join.<\/strong><\/p>\n
O posts est\u00e3o inserido no HTML, dentro de div#posts.<\/p>\n
Formatando com CSS<\/h2>\n
Agora como posts listados, vamos estiliz\u00e1-los, fazendo que fiquem em 2 colunas, e uma forma f\u00e1cil de realizar \u00e9 usando o display: grid.<\/p>\n
#posts{\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 20px 10px;  \r\n}\r\n\r\n#posts > article img{\r\n  max-width: 100%;\r\n  width: auto;\r\n}\r\n#posts > article a{\r\n  text-decoration: none;\r\n}\r\n\r\n#posts > article a h3{\r\n  color: #333;\r\n  padding: 0;\r\n  margin: 0;\r\n  font-size: 15px;\r\n}<\/pre>\n
Utilizando o display:grid<\/strong> para definimos que nossos elementos ser\u00e3o dispostos dessa forma, e definimos que tenham duas colunas usando\u00a0 grid-template-columns , <\/strong>e o espa\u00e7amento entre os itens de 20px 10px usando o gap.<\/strong><\/p>\n
Vamos ver como ficou o resultado final:<\/p>\n