Como customizar o response da API Rest do WordPress com informações específicas?

Retornar informações customizadas, criar um plugin para manipular o retorno e consumir essa informação na aplicação!Por MARCELO MARCELINO DO NASCIMENTO

 

O que é WordPress?

 

Wordpress-gerenciamento-conteudo

 

1.1 – O WordPress é um CMS para gerenciamento de conteúdo, se não for “O” está entre os mais conhecidos e possui uma enorme comunidade de desenvolvedores. Foi inicialmente criado para se construir blogs, mas hoje em dia já temos grandes sistemas rodando com ele. Vão desde a blogs simples até loja virtual com o WooCommerce e rede social/fórum com o Buddypress.

 

1.2 – API Rest

 

Por padrão o WordPress possui temas desenvolvidos em php – assim como todo seu core – posts e páginas cadastradas por meio do painel admin, são consumidos pela API nativa do WordPress. Porém é possível consumir e manipular esses conteúdos através de API’s Rest fornecidas por padrão a partir da versão 4.7 do CMS. Nas versões anteriores ainda se faz necessário o uso de plugins para tal propósito.

 

Para saber mais sobre API Rest do WordPress confira a doc oficial.

 

Dados limitados no response

 

Como nem tudo são flores, a API Rest só expõe alguns dados específicos do post/página – vamos focar nesse post sobre os posts – fornece apenas dados públicos acessíveis a qualquer cliente, como citado na própria documentação do WordPress.

 

Por exemplo: o autor, só é retornado o id do autor. As mídias retornam apenas os id’s. Os custom fields vem apenas o id. Não sendo possível acessar os valores desses campos. Não por enquanto.

 

O poder dos plugins no WordPress

 

Plugins no WordPress são ferramentas de grande utilidade, onde é possível customizar todo o CMS para atender a necessidades específicas de cada projeto. Hoje já existe uma imensa quantidade de plugins disponíveis, e também é possível criar e/ou customizar os seus próprios plugins. Com Plugins é possível fazer quase tudo no wordpress, é uma gama infinita de possibilidades para se trabalhar com o CMS.

 

Unindo o útil ao agradável

 

Legal, mas se a API Rest é limitada a algumas informações como podemos então exibir dados que não vem por default no json do response?

 

Com Plugins. Claro!

 

Vamos customizar esse response para exibir as informações necessárias. No caso do nosso projeto em questão, vamos usar de exemplo o seguinte caso: 

Temos um plugin que adiciona foto/avatar para os autores (usuários) do WordPress (User Photo), porém essa foto não retornada por default no response da API. Vamos criar então um plugin, que vai manipular o response da API Rest e devolver o dado que precisamos no json.

Dentro do diretório wp-content/plugins criamos uma pasta chamada author_foto e dentro um arquivo chamado author_foto.php com o código da imagem abaixo.

 

wordpress-plugins

 

Alguns pontos importantes do código do plugin:

 

Linha 14: a função add_action() do WordPress é chamada durante a execução de alguns pontos do core e fornece manipular esses dados. Como diz a própria doc:

 

Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur.

 

No nosso caso só usamos a $tag ‘rest_api_init’ (dispara quando uma requisição de API é feita) e passamos uma função de callback ‘get_author_photo’ para manipular essas informações.

 

Linha 15: nossa função de callback faz a chamada da register_rest_field() que por sua vez é responsável por registrar novos campos a objetos existentes do WordPress. Um dos parâmetros dessa função é um array que permite acessar o retorno do campo previamente registrado – no nosso caso o post – e devolve os dados que passamos para a função “get_author_photo_details”.

 

Linha 26: a “mágica” acontece aqui. Acessamos a variável global do WordPress referente aos dados do autor “$authordata” e dela recuperamos via função get_userdata() os dados do usuário/autor que retorna os dados do WP_User.

 

O plugin User Photo – citado no início do item 4 – adiciona no objeto WP_User um campo a mais “userphoto_image_file” contendo o id da foto do autor cadastrada. Acessamos então o diretório de uploads via wp_upload_dir(). Tendo como base a url do uploads acessamos a pasta criada pelo plugin /userphoto e passamos o id da mídia a ser recuperada.

 

O retorno dessa função é a url da imagem do autor e será adicionada no retorno do response da API de posts, quando chamada.

 

Após criarmos o plugin e adicionar no repositório wp-content/plugins, só precisamos ativá-lo.

 

wordpress-rest-api

 

Consumindo as novas informações fornecidas pela API

 

Para consumir as informações via API Rest basta acessarmos a url base do projeto e adicionar no final os endpoints, no nosso exemplo estamos usando o /posts para recuperar o post.
http://localhost/wp-json/wp/v2/posts?slug=$slug_do_post
No retorno default vem as informações descritas aqui.

 

Retorno sem o plugin ativo:

 

plugin-ativo-wordpress

 

Retorno com o plugin ativo:

 

plugin-ativo-wordpress-1

 

Sobre o parâmetro _embedded

 

Enquanto o WordPress não está totalmente de acordo com as definições do HAL standard tem a possibilidade de fornecer no final das requisições o parâmetro _embedded e serão fornecidas algumas informações a mais relacionadas ao autor, media, tags e links do post sem a necessidade de novas requisições.

 

Visão final

 

O WordPress por si só já é um excelente CMS, e mesmo nas suas construções de temas padrões já se mostrou ser ferramenta muito boa quando falamos sobre gerenciamento de conteúdo.

 

Ao uni-lo ao Angular, podemos perceber vários novos desafios, uma vez que saímos do seu comportamento padrão. Porém o ganho de performance que o Angular oferece é muito grande em relação aos temas php.

 

O resultado foi um site/blog rodando dentro de um ecossistema de aplicações complexa e usufruindo de todos os benefícios que uma Single Page Application oferece sem perder a praticidade em manipular conteúdos que o painel admin do WordPress oferece.

 

Agradecimentos especiais:

Flávia Domingues

Por MARCELO MARCELINO DO NASCIMENTO

Desenvolvedor front-end, apaixonado por tecnologia em especial tecnologias web, internet das coisas, acessibilidade e usabilidade.

Postado em: 23 de julho de 2018

Confira outros artigos do nosso blog

A importância de uma boa documentação em projetos de sucesso

06 de julho de 2018

Marcelo Marcelino do Nascimento

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

Deixe seu comentário