{"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 […]<\/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 […]","_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}]}}