Comprender las bases y el punto de partida

1

Bienvenida y recomendaciones

2

¿Cómo es un entorno de desarrollo profesional en WordPress?

3

Presentación del proyecto y repaso del curso de fundamentos

Crear Post Types y Archivos

4

¿Cómo se crea y se personaliza una categoría en WordPress?

5

Creemos la UI de un archivo en la web

6

¿Por qué es importante la navegabilidad de la web y cómo se mejora?

7

¿Qué es un Post Type y cómo se pueden personalizar los diferentes tipos?

8

¿Cómo creamos la UI de un Post Type personalizado?

9

Construyamos un loop personalizado

10

¿Qué es una taxonomía y cómo se registra una nueva?

11

¿Qué es un page template y cómo se utiliza?

Utilizar AJAX

12

¿Cómo funcionan los emails en WordPress?

13

¿Cómo utilizar AJAX dentro de WordPress?

14

Empecemos a construir un filtro dinámico para la web

15

Completemos la función AJAX para darle vida a nuestro filtro

La REST-API de WordPress

16

¿Cómo se utiliza la REST-API de WordPress?

17

¿Qué son y cómo funcionan los endpoints?

18

Hagamos el primer llamado a la API

Utilizar Bloques

19

¿Qué es un bloque de Gutenberg?

20

Creando un bloque nativo con React

21

Optimicemos el bloque con componentes de WordPress

22

Creemos el primer bloque dinámico

23

Mejorando la experiencia del usuario en Gutenberg con SSR (Server Side Render)

24

Creando bloques con ACF Pro

25

Crea un bloque igual al de ACF pero de forma nativa

Deployment

26

¿Cómo se lleva un sitio a producción?

27

¿Cómo podemos optimizar la indexación y el SEO de nuestro sitio?

28

¿Cómo defiendo a mi sitio de ataques externos y lo hago más seguro?

Finalizar el Curso

29

Conclusiones

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
6 Hrs
25 Min
33 Seg

Hagamos el primer llamado a la API

18/29
Resources

How to incorporate the API and display new features in our interface?

In the world of web development, it is crucial to know how to integrate and manage data through APIs, especially when working with platforms like WordPress. A proper API not only allows you to manage data efficiently, but also improves interaction with the end user by displaying updated information in an orderly and dynamic way.

How to structure the news output on our site?

To begin with, you need to create an appropriate section in the front-page.php file where the news will be displayed. This involves modifying the HTML to add the necessary structures:

<div class="row"> <div class="col"> <h1>News</h1> </div></div></div><div id="newsresult" class="row"> <!-- This is where the news is printed --></div><div>.
  1. Create a row within your page structure to add the title "What's New".
  2. Assign an ID to the newly created row, as resultNews, which will be used to retrieve and display the news dynamically using JavaScript.

How to configure the API URL?

To link the interface with the API it is essential to properly configure the URL. This is done by adding and managing parameters using PHP functions:

$apiURL = home_url() . '/wp-json/tu_namespace/v1/tu_endpoint';
  1. Define the base URL using home_url(), followed by the address of your API namespace(tu_namespace) and the specific endpoint(tu_endpoint).
  2. Incorporate required parameters according to your API structure, such as ?per_page=3 if you need to limit the number of new items displayed.

How is the data handled with AJAX?

To automatically update the news when the page finishes loading, it is essential to use AJAX. First, create a JavaScript script that performs this request:

jQuery(document).ready(function($) { $.ajax({ url: apiURL, method: 'GET', success: function(data) { // Use HTML structure to display what's new let html = ''; $.each(data, function(index, item) { html += '<div class="novelty">' + item.title.rendered + '</div>'; }); $('#resultNews').html(html); } } }); } );
  1. Activate the AJAX process at the end of the document loading to obtain the necessary data.
  2. Set up the method to send the request and, in case of success, directly manipulate the DOM with the retrieved data.
  3. Modify DOM elements using jQuery. Here, we are specifying that the results will be added to the container with the ID resultNews.

How to ensure a smooth user experience?

It is advisable to make use of indicators that show that data is being loaded, such as a temporary warning:

<div id="resultNews" class="row"> <p id="loading">Loading...</p></div>.

Implementing these messages provides the user with a visual indication that the application is still processing information, thus avoiding confusion or excessive clicks due to lack of immediate response.

By understanding these fundamentals, you not only manage to integrate an API effectively, but also enhance the user experience with an intuitive and responsive interface. Continue to explore how to improve and customize these interactions to take your development skills to the next level.

Contributions 19

Questions 8

Sort by:

Want to see more contributions, questions and answers from the community?

Sería muy bueno que Lucio o Cristian Ramanzin hicieran un curso de Wordpress especializado en el consumo de APIS externas y tal vez integrarlo en una tienda online. Es un poco el deseo que me quedó después de hacer el curso de Woocommerce.

Saludos

quiero lograr algo asi para un sistema externo queq uiero comercializar, pero no tiene sentido decirle a la gente que instale ese plugin y tenga que hacer todo eso de configuraciones, he estudiado otros plugins como Application passwords y no logro entender su funcionamiento interno para crear mi propio plugin de autenticacion mas directo como "Application passwords ", me pueden dar una guia de donde leer o que aprender? entiendo los conceptos basicos de API REST pero me ve perdido al querer aplicar esto en un plugin de wordpress

Hagamos el primer llamado a la API


Ahora vamos a hacer un llamado a la API que creamos así:

add_action( 'rest_api_init', 'novedadesAPI' );
function novedadesAPI() {
    register_rest_route( 
        'pg/v1',
        '/novedades/(?<cantidad>\d+)',
        [ 
            'methods' => 'GET',
            'callback' => 'pedidoNovedades'
        ]
    );
}

function pedidoNovedades($data) {
    $args = array(
        'post_type' => 'producto',
        'posts_per_page' => $data['cantidad'],
        'order'     => 'ASC',
        'orderby' => 'title',
    );

    $novedades = new WP_Query($args);

    if ($novedades->have_posts( )) {
        while ($novedades->have_posts()) {
            $novedades->the_post();

            $return[] = array(
                'imagen' => get_the_post_thumbnail( get_the_id( ), 'large' ),
                'link'   => get_the_permalink( ),
                'titulo' => get_the_title( )
            );
        }
        return $return;
    }
}

Y en el archivo de functions.php colocamos dentro de la función que envía los scripts, la función de wp_localize_script

function template_styles(){
    wp_localize_script( 'custom', 'pg', array(
        // 'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'apiurl'  => home_url('wp-json/pg/v1/')
    ) );
}

Se puede agregar autenticación, tokens o algo para usar el API desde una aplicación externa? quiero dar permiso a estas URLS solo a determinado “usuarios”

Sería bueno hacer una validación para saber si está en el home o si el div donde se cargarán los datos AJAX existe, de esa manera no se hace el llamado en todas las páginas del sitio. Algo como:

if ( $( body ).hasClass( ‘home’ ) ) { o if ( $( ‘#resultado-novedades’ ).length ) {

Para el que quiera profundizar un poco más aquí está la documentación oficial de WordPress:

https://developer.wordpress.org/rest-api/reference/posts/

Aquí en esta secesión podrás encontrar como interactuar con los “Posts” pudiendo hacer filtros avanzados, crear, actualizar y eliminar un Post. Todo esto con la API.

Quería compartir esto porque cundo necesite trabajar con esto me di cuenta que los articulos que hablan del tema están desactualizados y solo sirven con versiones anteriores al WP 4.7.

Aquí también comparto un filtro avanzado por fechas, para que te ballas familiarizando.

https://tu_web.com/wp-json/wp/v2/posts?orderby=date&order=desc&after=2021-01-13T17:00:00

No entiendo lo de method POST, GET etc. Qué curso de Platzi me recomiendan para entender eso bien? Gracias!

Lucio, nos podrías compartir tus archivos custom.js front.page.php y functions php pára hacer un rastreo de mis errores, de otra manera es sumamente complejo identificarlos mediante el video en especial porque las lineas por lo general no se ven completas.
Te lo agradecería mil veces y me ahorrarías una gran cantidad de tiempo que he estado dedicando en este curso a buscar errores.

Si cambio 3 por 1 o por cualquier numero no hay ningun cambio, me muestra siempre todas las novedades 😕

Aquí está el repo del profe. Específicamente la implementación de la API.
Hasta ahora todos mis fallos han sido por un punto, una coma, o un numeral mal puesto… todo me ha funcionado re bien.

¡A por Gutenberg!

Utilizando WordPress seguramente has escuchado que es un software muy flexible ya que podemos extender funcionalidades a nivel de plugins, themes, etc.
Sin embargo hay otra característica que hace de WordPress un software muy flexible y es precisamente que viene integrado con una funcionalidad de API REST.
El uso de este CMS no está limitado a consultar un sitio web en un navegador, sino que a través de la REST API de WordPress es posible consultar los datos de tu sitio, por ejemplo: desde una aplicación de escritorio, una aplicación móvil u otro servicio web externo.

no me ha resultado, se queda en pending y luego falla. investigare por otro lado

Desde de los correos, deje de entender, jeje siento que me falta aprender un buen de cosas para entender de que me estan hablando.

Para un llamado POST ¿Qué se debe hacer?

Todo clarísimo. Gracias

La funcionalidad REST API de WordPress consiste básicamente en que podemos hacer uso de nuestro contenido sin necesidad de consultarlo solo a través de un sitio web.

Recuerda que la dirección que escribes en la barra del navegador web es una URL, es una dirección única para cada recurso disponible en un servidor web, además los enlaces que creas como parte de tu contenido también son URLS.