{"id":1643,"date":"2024-08-02T10:51:57","date_gmt":"2024-08-02T08:51:57","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1643"},"modified":"2024-08-02T10:51:58","modified_gmt":"2024-08-02T08:51:58","slug":"10-wordpress-rest-api-y-fetch","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/17-ejercicios-con-ajax\/10-wordpress-rest-api-y-fetch\/","title":{"rendered":"10. WordPress REST API y Fetch"},"content":{"rendered":"\n

En el cap\u00edtulo de hoy vamos a trabajar con la API REST<\/strong> que ofrece WordPress<\/strong>. Si tenemos acceso a un sitio hecho con WordPress<\/strong>, podemos crear un frontend<\/strong> absolutamente con las caracter\u00edsticas que necesitemos, muy al estilo de como hacen los generadores de sitios est\u00e1ticos como Gatsby<\/strong><\/a>, Jekyll<\/strong><\/a>, Hugo<\/strong><\/a>, VuePress<\/a>, Pelican<\/strong><\/a>…  Para ello lo primero que vamos a hacer es ir a la p\u00e1gina oficial de WordPress<\/strong>, https:\/\/wordpress.org<\/a>, nos vamos a la documentaci\u00f3n, hay un concepto denominado the loop<\/strong> (The_Loop<\/em><\/strong>), que de hecho es la funci\u00f3n que tiene WordPress<\/strong> para traer la informaci\u00f3n de cada uno de las p\u00e1ginas o entradas de nuestro sitio. Es muy importante comprender qu\u00e9 es lo que ofrece esta funci\u00f3n<\/strong>. El enlace directo es https:\/\/codex.wordpress.org\/The_Loop<\/a>. Todo lo que podamos modificar<\/strong>, insertar<\/strong>, eliminar<\/strong>… en definitiva, todo el CRUD<\/strong> que podemos hacer desde la interfaz de WordPress<\/strong>, lo podemos hacer desde la API REST<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Para consumir la informaci\u00f3n no son necesarias credenciales, va a depender de la seguridad que implementemos a nuestro WordPress<\/strong>, y si permitimos peticiones de tipo REST<\/strong>.<\/p>\n\n\n\n

En este ejercicio consumiremos tan s\u00f3lo informaci\u00f3n de tipo REST<\/strong>, no vamos a hacer peticiones para insertar una nueva entrada o un nuevo usuario, pero s\u00ed que podr\u00edamos publicar entradas<\/strong>, modificar categor\u00edas<\/strong>, hacer login con nuestro usuario… es decir, acceder a los dem\u00e1s verbos adicionales del m\u00e9todo GET<\/strong>.<\/p>\n\n\n\n

La funci\u00f3n The_Loop<\/h2>\n\n\n\n

Esta funci\u00f3n tiene la caracter\u00edstica de traer informaci\u00f3n de cada una de las entradas o p\u00e1ginas de nuestro blog. Informaci\u00f3n que nos puede dar son el t\u00edtulo de la publicaci\u00f3n (the_title()<\/em><\/strong>), la fecha en la cual fue creada (the_time()<\/em><\/strong>), la lista de categor\u00edas (the_cathegory()<\/em><\/strong>), la URL del art\u00edculo que estamos leyendo (the_permalink()<\/em><\/strong>), un peque\u00f1o contenido (the_excerp()<\/em><\/strong>), el contenido (the_content()<\/em><\/strong>) que es lo que escribimos en el editor de texto de WordPress<\/strong>, o en el editor de bloques Gutemberg<\/strong> si estamos trabajando a partir de la versi\u00f3n 5, la lista de etiquetas<\/strong>, el nombre del autor<\/strong>, incluso el avatar<\/strong> (imagen) del autor.<\/p>\n\n\n\n

\n

Nota<\/strong>: Son varias las p\u00e1ginas escritas en WordPress<\/strong>, como son https:\/\/css-tricks.com\/<\/a>, la web de la Casa Blanca<\/strong> en EEUU, la web de jQuery<\/strong>, la web de WordPress.org<\/strong>…<\/p>\n<\/blockquote>\n\n\n\n

Podemos acceder a los endpoints<\/strong> desde el enlace https:\/\/developer.wordpress.org\/rest-api\/reference\/<\/a>. De todo lo que podemos hacer con WordPress<\/strong>, en este cap\u00edtulo aprenderemos a consumir los posts<\/strong>, para lo cual comenzamos a trabajar creando el archivo wp-api-rest.html<\/em>, el cual tendr\u00e1 la siguiente sintaxis.<\/p>\n\n\n\n

\n

Nota<\/strong>: cuando instalamos un sitio WordPress<\/strong>, por defecto tenemos el acceso libre para consumir el contenido. Existen varias rutas (endpoints<\/strong>) hacia la API WordPress<\/strong> que nos permiten acceder a posts<\/strong>, pages<\/strong>, users<\/strong>, categories<\/strong>. tags<\/strong>… del WordPress<\/strong><\/p>\n<\/blockquote>\n\n\n\n

Vamos a trabajar una t\u00e9cnica para guardar los endpoints<\/strong> que vayamos a consumir. La sintaxis que tenemos en nuestro archivo wp-api-rest.html<\/em> es la siguiente<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Wordpress REST API<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n    <link\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@100;700&display=swap\"\n      rel=\"stylesheet\"\n    \/>\n    <style>\n      html {\n        box-sizing: border-box;\n        font-family: \"Raleway\", sans-serif;\n        font-size: 16px;\n      }\n      *,\n      *::after,\n      *::before {\n        box-sizing: inherit;\n      }\n      a {\n        color: #01579b;\n        transition: all 0.3s ease-out;\n      }\n      a:hover {\n        opacity: 0.75;\n      }\n      img {\n        max-width: 100%;\n        height: auto;\n      }\n      h1 {\n        text-align: center;\n      }\n      hr {\n        border: thin solid #01579b;\n        margin: 3rem auto;\n        width: 80%;\n      }\n      .site {\n        margin: 1rem auto;\n        padding: 1rem;\n        max-width: 50%;\n        text-align: center;\n      }\n      .post {\n        margin: 1rem auto;\n        padding: 1rem;\n        border-radius: 0.5rem;\n        max-width: 80%;\n        text-align: center;\n        background-color: #eceff1;\n      }\n      .post-author img {\n        border-radius: 50%;\n      }\n      .post-date {\n        margin: 1rem auto;\n        display: block;\n      }\n      .post-excerpt,\n      .post-categories,\n      .post-tags,\n      .post-content {\n        text-align: left;\n      }\n      .post-content summary {\n        font-size: 1.5rem;\n        font-weight: bold;\n      }\n      .post-content > article {\n        padding: 1rem;\n        background-color: #e3f2fd;\n      }\n      .post-content img {\n        display: block;\n        margin: auto;\n      }\n      .loader {\n        display: none;\n        margin: 2rem auto;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <h1>Wordpress REST API<\/h1>\n    <article id=\"site\" class=\"site\"><\/article>\n    <section id=\"posts\" class=\"posts\"><\/section>\n    <img src=\"loader.svg\" alt=\"Cargando\" class=\"loader\" \/>\n    <template id=\"post-template\">\n      <article class=\"post\">\n        <img class=\"post-image\" \/>\n        <aside>\n          <h2 class=\"post-title\"><\/h2>\n          <figure class=\"post-author\"><\/figure>\n          <small class=\"post-date\"><\/small>\n          <a target=\"_blank\" class=\"post-link\">Ver publicaci\u00f3n original<\/a>\n          <p class=\"post-excerpt\"><\/p>\n          <div class=\"post-categories\"><\/div>\n          <div class=\"post-tags\"><\/div>\n          <details class=\"post-content\">\n            <summary>Ver contenido de la publicaci\u00f3n<\/summary>\n            <article><\/article>\n          <\/details>\n        <\/aside>\n      <\/article>\n      <hr \/>\n    <\/template>\n    <script>\n      \/\/ Declaramos las variables que vamos a utilizar\n      const d = document,\n        w = window,\n        $site = d.getElementById(\"site\"),\n        $posts = d.getElementById(\"posts\"),\n        $loader = d.querySelector(\".loader\"),\n        $template = d.getElementById(\"post-template\").content,\n        $fragment = d.createDocumentFragment();\n\n      \/\/ Creaci\u00f3n de constantes ya que no se van a modificar los datos\n      const DOMAIN = \"https:\/\/sutilweb.eu\",\n        SITE = `${DOMAIN}\/wp-json`,\n        API_WP = `${SITE}\/wp\/v2`,\n        POSTS = `${API_WP}\/posts?_embed`,\n        PAGES = `${API_WP}\/pages`,\n        CATEGORIES = `${API_WP}\/categories`;\n\n      let page = 1,\n        perPage = 5;\n\n      function getSiteData() {\n        fetch(SITE)\n          .then((res) => (res.ok ? res.json() : Promise.reject(res)))\n          .then((json) => {\n            console.log(json);\n            $site.innerHTML = `\n            <h3>Sitio Web<\/h3>\n            <h2>\n                <a href=\"${json.url}\" target=\"_blank\">${json.name}<\/a>\n            <\/h2>\n            <p>${json.description}<\/p>\n            <p>${json.timezone_string}<\/p>\n            `;\n          })\n          .catch((err) => {\n            console.log(err);\n            let message = err.statusText || \"Ocurri\u00f3 un error\";\n            $site.innerHTML = `<p>Error ${err.status}: ${message}<\/p>`;\n          });\n      }\n\n      function getPost() {\n        $loader.style.display = \"block\";\n        fetch(`${POSTS}&page=${page}&per_page=${perPage}`)\n          .then((res) => (res.ok ? res.json() : Promise.reject(res)))\n          .then((json) => {\n            console.log(json);\n            json.forEach((el) => {\n              \/\/ Variables para recoger las categor\u00edas y las etiquetas\n              let categories = \"\",\n                tags = \"\";\n              el._embedded[\"wp:term\"][0].forEach(\n                (el) => (categories += `<li>${el.name}<\/li>`)\n              );\n              el._embedded[\"wp:term\"][1].forEach(\n                (el) => (tags += `<li>${el.name}<\/li>`)\n              );\n              $template.querySelector(\".post-image\").src = el._embedded[\n                \"wp:featuredmedia\"\n              ]\n                ? el._embedded[\"wp:featuredmedia\"][0].source_url\n                : \"\";\n              $template.querySelector(\".post-image\").alt = el.title.rendered;\n              $template.querySelector(\".post-title\").innerHTML =\n                el.title.rendered;\n              $template.querySelector(\".post-author\").innerHTML = `\n              <img src=\"${el._embedded.author[0].avatar_urls[\"48\"]}\" alt=\"${el._embedded.author[0].name}\">\n              <figcaption>${el._embedded.author[0].name}<\/figcaption>\n              `;\n              $template.querySelector(\".post-date\").innerHTML = new Date(\n                el.date\n              ).toLocaleDateString();\n              $template.querySelector(\".post-link\").href = el.link;\n              $template.querySelector(\".post-excerpt\").innerHTML =\n                el.excerpt.rendered;\n              $template.querySelector(\".post-categories\").innerHTML = `\n                <p>Categor\u00edas: <\/p>\n                <ul>${categories}<\/ul>\n                `;\n              $template.querySelector(\".post-tags\").innerHTML = `\n                <p>Etiquetas: <\/p>\n                <ul>${tags}<\/ul>\n                `;\n              $template.querySelector(\".post-content > article\").innerHTML =\n                el.content.rendered;\n              let $clone = d.importNode($template, true);\n              $fragment.appendChild($clone);\n            });\n            $posts.appendChild($fragment);\n            $loader.style.display = \"none\";\n          })\n          .catch((err) => {\n            console.log(err);\n            let message = err.statusText || \"Ocurri\u00f3 un error\";\n            $posts.innerHTML = `<p>Error ${err.status}: ${message}<\/p>`;\n            $loader.style.display = \"none\";\n          });\n      }\n\n      d.addEventListener(\"DOMContentLoaded\", (e) => {\n        getSiteData();\n        getPost();\n      });\n\n      w.addEventListener(\"scroll\", (e) => {\n        const { scrollTop, clientHeight, scrollHeight } = d.documentElement;\n        console.log(scrollTop, clientHeight, scrollHeight);\n        if (scrollTop + clientHeight >= scrollHeight) {\n          console.log(\"Cargar mas posts\");\n          page++;\n          getPost();\n        }\n      });\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
En el cap\u00edtulo de hoy vamos a trabajar con la API REST que ofrece WordPress. Si tenemos acceso a un sitio hecho con WordPress, podemos crear un frontend absolutamente con las caracter\u00edsticas que necesitemos, muy al estilo de como hacen los generadores de sitios est\u00e1ticos como Gatsby, Jekyll, Hugo, VuePress, Pelican…  Para ello lo primero […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1609,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1643","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En el cap\u00edtulo de hoy vamos a trabajar con la API REST que ofrece WordPress. Si tenemos acceso a un sitio hecho con WordPress, podemos crear un frontend absolutamente con las caracter\u00edsticas que necesitemos, muy al estilo de como hacen los generadores de sitios est\u00e1ticos como Gatsby, Jekyll, Hugo, VuePress, Pelican…  Para ello lo primero…","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1643"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1643\/revisions"}],"predecessor-version":[{"id":1645,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1643\/revisions\/1645"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1609"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}