API REST do WordPress: o recurso CMS de próxima geração

Mais de um quarto da web é executado no WordPress. É um feito bastante notável, considerando que existe há mais de uma década, o que o torna bastante antigo nos anos de tecnologia.

Qual é o molho secreto do WordPress? Fácil – é a maneira mais simples e extensível de gerenciar seu conteúdo. No entanto, por um tempo, o WordPress parecia ter ficado para trás.

À medida que a web se tornou mais dependente do JavaScript para criar experiências imersivas e interativas, ficou cada vez mais claro que o WordPress precisaria oferecer novas maneiras para usuários e desenvolvedores interagirem com seu conteúdo.

Enquanto o WordPress é construído – e continuará sendo – PHP, a WP REST API é uma tentativa de criar uma ponte entre o legado do núcleo PHP do WordPress e o potencial e o poder dos aplicativos da web JavaScript, bem como dispositivos móveis nativos. e aplicativos de desktop.

A API REST do WordPress traz o conteúdo de qualquer site WordPress para uma API de fácil consumo, permitindo que o WordPress sirva como um sistema de armazenamento e recuperação para publicação de conteúdo na web.

Trazendo a API REST para o WordPress

Se você acha que a API REST do WP surgiu do nada, está errado.

Adicionar um recurso completamente novo ao WordPress não é tarefa simples. Por ser um software de código aberto, o desenvolvimento do WordPress depende da comunidade em geral para progredir.

O desenvolvimento da API começou há alguns anos como um plug-in de recurso separado, que permitia aos desenvolvedores experimentar e contribuir com o projeto em um ambiente controlado.

Ao longo de muitas iterações e aprimoramentos, e duas versões completamente separadas, os colaboradores por trás da API REST tiveram que testar e avaliar os benefícios e as imensas consequências de fornecer acesso aberto à API aos dados em dezenas de milhões de sites.

O WordPress 4.4, codinome “Clifford”, trouxe a infraestrutura inicial do projeto para o núcleo do WordPress, enquanto os endpoints não apareceram até o WordPress 4.7, “Vaughan”.

Essencialmente, isso permitiu que os desenvolvedores tivessem tempo para testar a funcionalidade que alimenta a API sem realmente expor os dados em si.

Agora que os endpoints de conteúdo iniciais foram mesclados em todas as versões atuais do WordPress, desenvolvedores de plugins e autores de temas podem experimentar novas maneiras interessantes de recuperar, visualizar e alterar os dados fora da experiência tradicional do wp-admin.

Separando as abreviações: de HTTP a uma API REST JSON

Para entender o significado da WP REST API, pode ser útil entender a base de como compartilhamos dados online e para onde a Internet pode estar indo.

HTTP é a base para a maior parte do tráfego da web com o qual lidamos diariamente. Se você digitar um URL em um navegador, estará fazendo uma solicitação . O servidor correspondente recebe sua solicitação e fornece uma resposta . Esta transação é a base para quase tudo o que fazemos online. Os navegadores fazem solicitações e os servidores fornecem respostas.

O tipo de solicitação que fazemos pode afetar o tipo de resposta que recebemos. Na maioria das vezes, fazemos uma solicitação GET simples: "Ok Google, GET sua página de destino para mim". O Google fornece uma resposta.

À medida que a web se tornou mais interativa, começamos a tirar proveito de outras solicitações HTTP, incluindo PUT , POST e DELETE .

Por exemplo, preenchemos uma barra de pesquisa em um site: “Ei, Google, POSTE meu endereço de e-mail e senha em sua página de login”. O Google inicia uma nova sessão para nós e fornece uma resposta diferente.

Este protocolo é a base básica sobre a qual construímos nossos sites WordPress.

Usamos formulários e PHP para GET e POST dados em nosso banco de dados. Ao contrário da opinião popular, essa base subjacente do WordPress não mudará tão cedo. Tudo o que o WordPress está fazendo agora é fornecer aos desenvolvedores uma nova maneira de interagir com seus dados do WordPress por meio de uma API RESTful.

Transferência Representacional do Estado (REST)

Os desenvolvedores do WordPress devem estar familiarizados com APIs em geral, como a API Shortcode e a API Options. Essas APIs definem a funcionalidade dos componentes que compõem o WordPress, para que os autores de temas e plugins possam expandir os principais recursos do WordPress. A API REST do WP, no entanto, é um pouco diferente.

Uma API REST , ou RESTful, trata da exposição segura de seus dados a solicitações HTTP de fontes externas. Trata-se também de configurar uma arquitetura comum e um conjunto de protocolos para responder a essas solicitações. Embora existam ideias e princípios mais avançados por trás desse tipo de serviço, eles estão além do escopo deste artigo.

A existência da WP REST API, especificamente após o WordPress 4.7, significa que todo o conteúdo do seu site, incluindo postagens, páginas, comentários e qualquer meta de postagem pública, agora está diretamente acessível como dados brutos. Isso também significa que você pode fazer alterações nesses dados de fora da tradição wp-admin, se desejar, talvez por meio de um aplicativo móvel ou de desktop.

Em vez de pensar em seus dados como simples linhas em um banco de dados, agora você pode ter acesso serializado a eles na forma de JSON.

JSON - O que aconteceu com XML?

Os veterinários do WordPress têm muita experiência com XML, um formato comum para compartilhar conteúdo entre sites.

Semelhante ao XML, o JSON é simplesmente um mecanismo que nos permite transferir dados facilmente agrupando-os em uma sintaxe específica. JSON é na verdade uma string, uma representação textual de um objeto JavaScript, armazenando seus dados em um conjunto de pares chave-valor. Uma representação JSON comum de uma postagem do WordPress pode ser assim:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Você pode usar uma ferramenta de formatação JSON para embelezar a resposta JSON, se necessário.)

Uma resposta JSON completa por meio da API WP REST incluirá informações adicionais sobre a postagem, incluindo metadados. Ao agrupar convenientemente esses dados no formato JSON, você pode interagir com seu conteúdo do WordPress de maneiras novas e interessantes.

Não é coincidência que JSON seja melhor combinado com JavaScript. À medida que mais desenvolvedores do WordPress começarem a “Aprender JavaScript Profundamente”, veremos mais e mais usos avançados do WordPress como back-end.

Como encontramos os dados: siga a rota até um endpoint

Acessar todos os dados do seu site por meio da API REST é tão simples quanto compor uma URL.

Para qualquer site WordPress executando pelo menos a versão 4.7, adicione a seguinte string ao final do URL do seu site: /wp-json/wp/v2 (por exemplo, http://example.com/wp-json/wp/v2 ). Coloque esse URL no seu navegador e veja o que aparece.

O resultado provavelmente parece uma grande confusão de dados, a menos que você tenha instalado uma extensão do navegador que limpe o JSON. Essa grande confusão de dados é o conteúdo e as metainformações do seu site WordPress específico no formato JSON.

Ao carregar esse conteúdo, você acabou de definir uma rota e pediu ao seu navegador para GET para você.

Uma rota é uma URL mapeada para um método específico. O núcleo do WordPress lê essa rota, com cada barra '/' representando um caminho ou parâmetro específico que deve ser seguido.

O caminho termina em um endpoint , onde as funções dentro do núcleo do WordPress podem tomar decisões sobre quais dados fornecer e o que fazer com os dados fornecidos.

Um exemplo de endpoint pode ser '/wp-json/wp/v2/posts/1', onde adicionamos os caminhos '/posts' e '/1'. Esse endpoint específico diz ao nosso site para analisar nossos dados, acessar nossas postagens e acessar a postagem com o ID 1.

O que torna a API REST tão útil é o fato de ser extensível, o que significa que você pode pegar qualquer dado em seu site e adicioná-lo como um endpoint. A maioria das principais funcionalidades do WordPress atualmente é (ou em breve será) suportada.

No entanto, os desenvolvedores de temas e plugins podem começar a adicionar seu conteúdo e configurações personalizadas como endpoints, permitindo que os usuários interajam com seus sites de novas maneiras.

Se você está curioso sobre os endpoints atualmente disponíveis em seu site WordPress, um aplicativo de navegador como o Postman fornece uma GUI especificamente para explorar APIs.

Cabeçalhos e autenticação

Digitar endpoints de URL no navegador parece simples, mas na verdade inclui um conjunto de cabeçalhos padrão junto com a solicitação. Por sua vez, um conjunto de cabeçalhos também é enviado de volta com a resposta. Esses cabeçalhos incluem muitas informações úteis, mas as mais importantes para nossos propósitos têm a ver com o tipo de solicitação que estamos fazendo e se estamos ou não autenticados.

Se você acessar as “ferramentas de desenvolvedor” do seu navegador, poderá examinar os cabeçalhos HTTP de qualquer ativo carregado na janela do navegador, incluindo arquivos HTML, folhas de estilo CSS, imagens e muito mais.

O primeiro cabeçalho a ser considerado é o Request Method , que corresponde diretamente às solicitações HTTP que aprendemos anteriormente. Aqui você provavelmente verá GET como o método de solicitação, se estivermos simplesmente visualizando uma página.

Um aplicativo que chama sua API REST pode optar por alterar o método de solicitação do cabeçalho para POST.

Um método POST informa ao seu site para inserir novos dados ou alterar os dados existentes no banco de dados do WordPress. Ao enviar informações através do método POST, outros aplicativos têm a capacidade de alterar seus dados, sem fazer login no wp-admin.

No entanto, não precisa se preocupar porque, a menos que eles também incluam cabeçalhos que forneçam as credenciais adequadas para autenticação , seu site os negará.

NOTA: Os métodos para autenticar chamadas para sua API REST ainda não foram finalizados, o que torna a autenticação a maior barreira de entrada para desenvolvedores que desejam trabalhar com a API REST para adicionar ou alterar dados.

Por enquanto, existem opções disponíveis, incluindo um plugin dos desenvolvedores por trás da API REST. À medida que os procedimentos padrão em torno da autenticação chegam ao núcleo, os últimos obstáculos ficarão claros para o uso generalizado da API WP REST.

Aplicativo de exemplo da API REST WP

O que torna a API REST do WP tão poderosa é o fato de ser consistente, então podemos esperar os mesmos resultados básicos de qualquer site executando o WordPress 4.7 ou superior. No entanto, o WordPress é uma API distribuída, o que significa que não há apenas um lugar para obter todos os dados.

Cada site que executa o WordPress é um aplicativo único, com usuários e autenticação únicos. Embora possa exigir técnicas de autorização distintas para editar conteúdo por meio da API REST, podemos acessar as postagens da maioria dos blogs executados pelo WordPress com bastante facilidade.

Para demonstrar, faremos uma demonstração rápida do codepen que carrega trechos das últimas postagens de alguns blogs populares relacionados ao WordPress que, é claro, todos são executados no WordPress. Enquanto estamos nisso, incluiremos um formulário de pesquisa, para que possamos pesquisar todos esses sites de uma só vez e obter os artigos relevantes de cada um.

Por fim, incluiremos o link para ler o texto completo do artigo no site original.

Fase 1: Obtendo postagens recentes

Começaremos configurando uma instância Vue rápida e montando-a em um elemento. Também incluiremos o Bootstrap para que possamos ter uma grade e um estilo básico nos elementos do formulário que adicionaremos mais tarde.

Quando definirmos os dados, desejaremos um local para armazenar o nome do site (que não está incluído na resposta padrão), a URL e as postagens assim que as obtivermos. Aqui está um exemplo:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Você notará que também incluímos nosso primeiro parâmetro no final do URL, per_page . Normalmente, a API REST do WP paginará os resultados seguindo as mesmas regras que faria para paginar um loop WP_Query normal. Limitaremos nossas consultas aos três primeiros posts.

Em seguida, definiremos o método loadPosts() , que percorrerá nossa lista de fontes, obterá os resultados com vue-resource e preencherá o array de posts vazio de cada fonte com os resultados.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Também incluiremos uma chamada inicial para loadPosts() quando nossa instância Vue for montada com sucesso.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Manter loadPosts() como um método separado será útil no futuro quando começarmos a fazer várias chamadas para a API. Em nosso HTML, usaremos as diretivas de renderização de lista simples do Vue e a sintaxe de modelo para gerar todos os nossos posts.

Veja a caneta incorporada para uma demonstração de trabalho:

Veja o exemplo de pesquisa da API REST WP da caneta (fase um) por Brian Coords (@bacoords) no CodePen.

Fase 2: Filtrando Resultados

Vamos adicionar uma barra lateral e criar alguns filtros para mostrar/ocultar as várias fontes. Para fazer isso, adicionamos uma nova propriedade ao objeto sources , um booleano que nomearemos em .

Enquanto adicionamos filtros, vamos gerar um filtro Vue para nos ajudar a exibir a data corretamente também. O WordPress armazena a data e a hora da postagem como um carimbo de data/hora Unix.

Usaremos a biblioteca de terceiros Moment.js para converter a data em um formato mais legível.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Veja a caneta incorporada para uma demonstração de trabalho:

Veja o exemplo de pesquisa da API REST WP da caneta (fase um) por Brian Coords (@bacoords) no CodePen.

Fase final: consultas de pesquisa

Aqui adicionaremos um novo parâmetro à nossa solicitação de API. Já adicionamos o parâmetro per_page=3 para limitar o número de resultados que obtemos de cada site. Se houver algo escrito na barra de pesquisa, adicionaremos como um parâmetro adicional.

Isso nos permitirá usar a funcionalidade de pesquisa integrada de cada site, como se estivéssemos consultando a barra de pesquisa desse site.

Adicionaremos uma barra de pesquisa e a vincularemos a uma variável usando a diretiva v-model do Vue.

Em vez de chamar imediatamente todas as APIs, quando o usuário começar a digitar, adicionaremos um botão e vincularemos um evento ao envio do formulário. Em seguida, adicionaremos um método à nossa instância do Vue que adiciona os parâmetros de pesquisa (codificados em URL, é claro) à URL.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Veja a caneta incorporada para uma demonstração de trabalho:

Veja o exemplo de pesquisa da API REST WP da caneta (fase um) por Brian Coords (@bacoords) no CodePen.

Embora este seja um exemplo simples da API REST do WP, poderíamos imaginar um aplicativo em potencial para algo assim dentro do próprio WordPress. Por exemplo, já existe a metabox 'WordPress News'.

Poderíamos facilmente transformar esta demonstração em um plugin do WordPress, exibindo-o no painel do WordPress. Agora, integramos a capacidade de procurar ajuda em alguns dos principais sites de tutoriais de WordPress e web design diretamente do nosso próprio site.

Potencial futuro da API REST

Embora o exemplo acima apenas arranhe a superfície dos recursos da WP REST API, ele deve transmitir algumas das possibilidades que começam a surgir quando você começa a brincar com os dados. Seja para aprimorar a experiência do usuário no próprio site ou para coletar e manipular os dados de uma fonte externa, é uma ferramenta poderosa.

Embora alguns especialistas do setor tenham manifestado preocupações sobre a possibilidade de ter seu conteúdo "raspado" e exibido em outro lugar, é importante lembrar que essa funcionalidade é semelhante aos feeds RSS e é vital que os mantenedores do site tenham controle claro de quais dados são e são privado.

À medida que a API REST do WP se tornar mais arraigada no tecido do WordPress, começaremos a ver seus efeitos, talvez sem perceber. Os exemplos variam de simples (Chris Coyier's Quotes on Design) a aplicativos complexos de página única (site do Guggenheim).

Outro caso de uso popular para a WP REST API é o desenvolvimento de aplicativos móveis.

Como o conteúdo é tão acessível por meio da API REST, os desenvolvedores podem criar aplicativos nativos para iOS e Android e evitar a criação de fontes de dados duplicadas.

À medida que os usuários interagem com esses aplicativos móveis, eles poderão recuperar e transformar diretamente os dados do site original, sem que o desenvolvedor precise criar nenhuma infraestrutura complexa para dar suporte a isso.

No entanto, esses aplicativos voltados para o visitante da API REST são apenas o começo, pois as implicações reais são muito mais profundas. Um dos objetivos da equipe de desenvolvimento principal é começar a usá-lo em toda a interface wp-admin.

Com futuras atualizações do WordPress, começaremos a ver o admin-ajax substituído em favor da API, aumentando a velocidade de funções básicas, como editar menus ou publicar posts.

Isso poderia ir de mãos dadas com o foco maior do WordPress no Personalizador e no Editor como pontos de partida fáceis de usar para iniciantes do WordPress.

Embora a API REST do WP seja tremendamente útil, ainda há mais a ser feito. A API não está completa. Ainda há mais recursos e endpoints para adicionar.

Eventualmente, você poderá interagir com seu site WordPress sem sequer visitá-lo. E enquanto muitos serviços agora usam APIs personalizadas para interagir com o WordPress, a mudança para uma API REST padrão do WordPress significa que mais sites e serviços podem se interconectar, falando o mesmo idioma.

O WordPress começou como uma plataforma de blogs, uma maneira de os blogueiros se conectarem e compartilharem seus pensamentos e ideias. Com o desenvolvimento da API REST do WordPress, começaremos a ver um novo nível de conexão e compartilhamento nos bastidores. Isso permitirá que os usuários desenvolvam seus pensamentos e ideias de maneiras nunca consideradas anteriormente, levando o WordPress e seus usuários a fronteiras totalmente novas.