A Interface de Programação de Aplicativo (API) do WordPress Representational State Transfer (REST) abriu um mundo de possibilidades para proprietários e desenvolvedores de sites. No entanto, às vezes você pode precisar trabalhar com conteúdo e serviços que o REST não oferece suporte pronto para uso.
Felizmente, é possível estender essa API poderosa com um ponto de extremidade REST personalizado. Ao definir seus próprios terminais, você pode fazer o bate-papo do WordPress com praticamente qualquer aplicativo ou serviço, incluindo seus próprios aplicativos móveis personalizados.
Nesta postagem, discutiremos por que você pode querer criar um endpoint personalizado para a API REST do WordPress e, em seguida, mostrar-lhe como. Vamos começar!
O que é um endpoint REST personalizado (e por que você pode querer criá-lo)
A API REST fornece uma maneira fácil de enviar e extrair dados do WordPress. Isso dá a você a flexibilidade de integrar a plataforma com uma ampla gama de aplicativos e serviços de terceiros.
Também é popular entre os desenvolvedores que desejam usar o WordPress como parte de um sistema de gerenciamento de conteúdo (CMS) sem cabeça . Também é uma ótima solução para quem trabalha com ferramentas baseadas em React, como o framework Frontity ou o gerador de sites Gatsby .
A API REST do WordPress fornece um conjunto de rotas e terminais integrados. Eles representam as postagens, páginas, taxonomias e outros tipos de dados padrão do WordPress padrão. Você pode usar essas rotas e terminais para interagir com seu site, enviando e recebendo objetos JavaScript Object Notation (JSON). Esta é uma ótima notícia se você deseja interagir com o conteúdo do WordPress usando serviços e aplicativos externos.
No entanto, também é possível criar um ponto de extremidade REST personalizado. Esses terminais instruem a API REST a responder a uma determinada solicitação com uma função definida por você. Este pode ser um método poderoso para integrar o WordPress com aplicativos e serviços adicionais e para trabalhar com tipos de postagem personalizados.
Um endpoint personalizado também pode ser útil se você estiver desenvolvendo um aplicativo móvel e quiser usar dados do WordPress dentro dele. Por exemplo, você pode estar criando um aplicativo de comércio eletrônico para sua loja online com WooCommerce e deseja extrair dados do WordPress para usá-lo neste aplicativo móvel.
Como criar um endpoint personalizado para a API REST (em 4 etapas)
A criação de um endpoint personalizado exige que você escreva algum código, mas também abre um novo mundo de possibilidades para seus dados do WordPress. Nesta postagem, estamos usando o tutorial REST de Ahmed Bouchefra como uma referência de código, a fim de criar um endpoint personalizado em quatro etapas fáceis.
1. Crie um tema filho
Sempre que você quiser personalizar um tema, é recomendável criar um tema filho e aplicar suas alterações a ele. Se você editar o tema original, perderá todas as suas personalizações sempre que atualizá-lo. Ao usar um tema filho, você poderá adicionar endpoints personalizados sem perder a opção de atualização.
Você pode criar um tema filho usando um cliente de protocolo de transferência de arquivos (FTP) como o FileZilla . Em seu cliente FTP, navegue até a pasta app / public / wp-content / themes / e crie um novo diretório.
Ao nomear sua pasta, é uma boa ideia usar o nome do tema pai, anexado com -child:
Em seguida, é hora de criar uma folha de estilo, que chamaremos de style.css . Você pode criá-lo como um arquivo de texto normal e, em seguida, convertê-lo em um arquivo CSS, renomeando-o com a extensão .css , conforme mostrado abaixo:
Uma folha de estilo contém o código que determina o design do seu tema. Para criar um tema filho atraente e envolvente, geralmente você precisará sujar as mãos e escrever algum código. O WordPress Codex fornece alguns padrões que você pode usar para criar rapidamente um tema filho básico.
Em seguida, é hora de criar um arquivo functions.php , que você usará para adicionar recursos ao seu tema. Novamente, você pode criá-lo como um arquivo de texto simples e renomeá-lo para functions.php .
Dentro do seu arquivo functions.php , adicione o seguinte código:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
Aqui, estamos herdando informações da folha de estilo do tema pai. Agora que você possui os elementos básicos, navegue até Aparência> Temas no painel do WordPress:
Seu tema filho deve estar visível no painel. Dê um clique no botão Ativar e seu novo tema estará pronto para ser usado.
2. Defina sua rota
Nesta seção, vamos criar uma nova rota que nos permitirá recuperar as últimas postagens por ID de categoria. Usaremos o seguinte URL:
http://localhost/wp-json/twentytwentyone-child/v1/latest-posts/<category-ID>Lembre-se de modificar este URL para apontar para seu próprio domínio ou site local. Você também precisará substituir <category-id> pela categoria real que deseja consultar. Por exemplo, aqui estamos recuperando todas as postagens da categoria “1”:
http://localhost/wp-json/twentytwentyone-child/v1/latest-posts/1Se não tiver certeza sobre o ID de uma categoria, você pode verificar esse valor no painel do WordPress. Navegue até Postagens> Categorias e você verá uma lista:
Agora você pode passar o mouse sobre a categoria que deseja consultar e abri-la para edição. Você encontrará o ID da categoria no URL. Na captura de tela a seguir, o ID da categoria é “1”:
Agora você pode adicionar este ID de categoria ao seu terminal. Neste ponto, se você inserir o URL preenchido em seu navegador, verá uma mensagem de erro:
Isso porque ainda não definimos essa rota. No FileZilla, abra o arquivo functions.php do seu tema e adicione o seguinte:
add_action('rest_api_init', function () {
register_rest_route( 'twentytwentyone-child/v1', 'latest-posts/(?P<category_id>\d+)',array(
'methods' => 'GET',
'callback' => 'get_latest_posts_by_category'
));
});Agora você pode salvar suas alterações e sair deste arquivo. Em seu navegador, tente recarregar o URL. Seu navegador deve responder com um erro 500:
Como definimos essa rota, o WordPress agora a reconhece. No entanto, ainda precisamos especificar a função get_latest_posts_by_category () como nosso retorno de chamada, então vamos fazer isso agora.
3. Implemente a função de retorno de chamada para seu endpoint REST personalizado
Nossa próxima tarefa é implementar a função de retorno de chamada , que usaremos para processar e lidar com nossa solicitação GET. Dentro do seu arquivo functions.php , comece recuperando o argumento category_id do parâmetro $ request :
function get_latest_posts_by_category($request) {Em seguida, precisamos criar um array $ args com a chave de categoria definida para o valor de category_id. Este ID será extraído da rota:
$args = array(
'category' => $request['category_id']
);Em seguida, consulte as postagens com o ID da categoria especificada. Você pode fazer isso chamando o método get_posts () :
$posts = get_posts($args);Se a matriz estiver vazia, exibiremos uma mensagem de erro que contém o código empy_category , mais um código de status 404. Você pode personalizar isso com base em seus requisitos. Vamos passar todas essas informações para o construtor da classe WP_Error :
if (empty($posts)) {
return new WP_Error( 'empty_category', 'There are no posts to display', array('status' => 404) );Depois de concluir esta configuração, é hora de criar uma nova instância da classe WP_REST_Response . Podemos então passar o array $ posts e retornar a resposta REST. Ao utilizar os WP_REST_Response e WP_Error aulas, podemos garantir que o nosso ponto final retorna uma resposta JSON válido:
$response = new WP_REST_Response($posts);
$response->set_status(200);
return $response;
}Se você está acompanhando, o código completo deve ser semelhante a este:
function get_latest_posts_by_category($request) {
$args = array(
'category' => $request['category_id']
);
$posts = get_posts($args);
if (empty($posts)) {
return new WP_Error( 'empty_category', 'There are no posts to display', array('status' => 404) );
}
$response = new WP_REST_Response($posts);
$response->set_status(200);
return $response;
}
Depois de adicionar este código a functions.php , salve e feche o arquivo. Agora, a única coisa que resta é colocar seu endpoint personalizado em teste.
4. Teste seu endpoint
Na guia do seu navegador, tente visitar o URL que definimos na etapa anterior. Certifique-se de substituir <category-id> por qualquer ID de categoria válido registrado em seu site WordPress, por exemplo: http: // localhost / wp-json / thirtytwentyone-child / v1 / latest-posts / 1 :
Agora você deve ver uma lista de todas as postagens pertencentes a esta categoria. Também vale a pena inserir um ID de categoria que não está registrado em seu site. Se o seu endpoint personalizado estiver funcionando corretamente, o navegador deve exibir a mensagem de erro que você definiu no arquivo functions.php :
Isso é tudo que você precisa para criar um ponto de extremidade customizado simples para a API REST. Se você deseja continuar desenvolvendo este projeto, recomendamos fornecer callbacks de higienização e validação, além de seu callback principal. Isso pode ajudar a proteger seu site contra injeções de código , incluindo ataques Cross-Site Scripting (XSS) .
Para proteger ainda mais seu site e dados, recomendamos restringir o acesso ao seu endpoint personalizado. Você pode fazer isso usando a função permission_callback () .
Conclusão
A Interface de Programação de Aplicativo (API) Representational State Transfer (REST) foi uma virada de jogo para a comunidade do WordPress. No entanto, mesmo essa API poderosa tem seus limites e é possível que o REST não atenda exatamente às suas necessidades.
Se você está lutando contra as limitações desta API, pode criar um endpoint personalizado em quatro etapas fáceis:
- Crie um tema filho.
- Defina sua rota.
- Implemente a função de retorno de chamada para seu ponto de extremidade REST customizado.
- Teste seu endpoint.
Você tem alguma dúvida sobre como criar um ponto de extremidade personalizado para a API REST? Deixe-nos saber na seção de comentários abaixo!