Aumente a produtividade do seu blog com a ajuda da API REST e JavaScript do WordPress — aprenda como com este tutorial.

No último tutorial , você testemunhou a mágica das APIs OpenAI e Unsplash gerando conteúdo de blog. Hoje, estamos levando isso para o próximo nível usando a API REST do WordPress para facilitar o upload de conteúdo usando JavaScript. Tenho alguns exemplos práticos que mostrarão como fazer isso com facilidade. Estamos chegando perto de encerrar nossa série de automação de blogs com JavaScript, então vamos começar!

Pré-requisitos

Para trabalhar efetivamente com este tutorial amigável para iniciantes, você deve ter:

• Node.js configurado em seu computador.
• Um bom entendimento de JavaScript.
• Um site WordPress.

Neste tutorial, veremos:

• Introdução à API REST do WordPress
• Configurando o projeto do nó
• Obtendo a senha do aplicativo
• Fazendo chamadas de API — exemplos
• Publicação de postagem de blog com imagem em destaque por meio da API REST

Introdução à API REST do WordPress

A API REST do WordPress permite que você controle seu site WordPress com código. É uma forma de acessar e gerenciar os dados e funções do seu site usando endpoints de API (URLs) que correspondem a diferentes tipos de dados no WordPress. Você pode ler, escrever e publicar postagens e outras operações usando métodos HTTP padrão como GET , POST , PUT e DELETE .

A API oferece suporte a diferentes formatos de dados, como JSON e XML , para que você possa escolher aquele que funciona melhor para você.

Com a API REST do WordPress, você pode criar aplicativos personalizados, integrar-se a outras plataformas e serviços, conectar-se a ferramentas como CRMs e análises e automatizar tarefas chatas. É uma ferramenta poderosa que oferece aos desenvolvedores controle e flexibilidade sobre seu site WordPress.

Confira a documentação oficial da API REST do WordPress para obter mais informações.

Tudo bem, vamos ao que interessa!

Configurando o projeto do nó

1. Crie uma nova pasta com um nome preferido, por exemplo WORDPRESS-REST-API, .
2. Abra o editor de código e acesse o terminal.
3. Execute npm initpara configurar o projeto Node.
4. Dentro da pasta do projeto, crie dois novos arquivos, index.js e WordPress.js , que conterão a maior parte do código.
5. Instale os pacotes npm abaixo para o projeto.

npm install axios dotenv form-data

6. dotenv será usado para armazenar as chaves da API em um .envarquivo e esse arquivo será incluído .gitignorepara evitar o compartilhamento acidental no GitHub.
7. A biblioteca de dados de formulário está sendo usada aqui porque facilita o envio de arquivos e outros dados por HTTP em um formato esperado pelos servidores.

Existe uma biblioteca Node.js popular chamada node-wpapique torna mais fácil para os aplicativos JavaScript solicitar recursos do WordPress. No entanto, até o momento deste tutorial, parece que a biblioteca não é mantida desde 2021.

Então, decidi mostrar a você como criar essas chamadas de API do zero. Dessa forma, você entenderá melhor como a API funciona e poderá fazer solicitações personalizadas de acordo com suas necessidades.

Obtendo a senha do aplicativo

Para enviar solicitações autenticadas da API do WordPress, serão necessários o nome de usuário e a senha do aplicativo .

Para gerar uma senha de aplicativo, faça login no painel de administração do WordPress , vá para Users > Profile e , na seção Application Passwords , digite um nome e clique em ' Add New Application Password. '



Fazendo chamadas de API — exemplos

O endpoint https://www.your-domain.com/wp-json/wp/v2/é o núcleo da API do WordPress. Uma solicitação GET para esse endpoint retornará uma resposta JSON com informações sobre as rotas disponíveis.

Existem mais de 15 endpoints disponíveis, dependendo das necessidades de sua aplicação, mas os mais usados ​​são:

// Most commonly used WordPress REST API endpoints.
// Each endpoint provides access to all the fields within a record.

.../wp/v2/posts  
.../wp/v2/categories
.../wp/v2/tags
.../wp/v2/pages
.../wp/v2/media
.../wp/v2/comments

No arquivo WordPress.js , é criada uma classe instanciável chamada WordPressque recebe um wpConfigparâmetro contendo URL, nome de usuário e senha.

// WordPress.js

import axios from "axios";

export class WordPress {
  constructor(wpConfig) {
    // Store the URL from the wpConfig object
    this.url = wpConfig.url;
    
    // Create the headers object with the authorization and content-type headers
    this.headers = {
      Authorization: "Basic " + Buffer.from(`${wpConfig.username}:${wpConfig.password}`).toString('base64'),
      "Content-Type": "application/json",
    };
  }

}

WordPress.js manterá todos os nossos métodos de solicitação de API, enquanto index.js será o ponto de entrada para chamar métodos na classe WordPress.

// index.js

import dotenv from 'dotenv'; // Import the dotenv library to load environment variables from a .env file
dotenv.config();
import { WordPress } from './WordPress.js'; // Import the WordPress class from the WordPress.js file

// Define configuration for connecting to the WordPress API
const wpCofig = {
    url: 'https://www.your-domain.com',
    username: 'olivia-brown',
    password: process.env.WP_KEY
};

// Create an instance of the WordPress class
const wp = new WordPress(wpCofig);

Imagine que você deseja criar um novo post. Para fazer isso, adicionaremos um createPostmétodo no arquivo WordPress.js . Este método enviará uma solicitação HTTP POST para o …/wp/v2/posts endpoint, incluindo o cabeçalho de autenticação e os dados de postagem. A implementação pode ser feita da seguinte forma:

// WordPress.js

// createPost method for creating a new post
async createPost(post) {
  try {
    const response = await axios.post(`${this.url}/wp-json/wp/v2/posts`, post, { headers: this.headers });
    return response.data;
  } catch (error) {
    throw new Error(`Error while creating post: ${error}`);
  }
}

// index.js

// Define a new post object
const post = {
    title: 'Hello World',
    content: 'My Post Content.',
    status: 'draft'
  };

// Call the createPost method from the WordPress instance and log the result
console.log(await wp.createPost(post));



Exemplos 2: envie uma solicitação POST para fazer upload de um arquivo de mídia

Agora vamos fazer o upload de um arquivo de imagem local usando a API. Começaremos adicionando um novo uploadMediamétodo no arquivo WordPress.js .

// WordPress.js

// uploadMedia method for uploading an image
async uploadMedia(path, attributes) {
  // create a new FormData object
  const form = new FormData();
  
  // append the image file
  form.append("file", fs.createReadStream(path));
  
  // append the title, caption, and alt text attributes
  form.append("title", attributes.title);
  // form.append("caption", attributes.caption);
  // form.append("alt_text", attributes.alt_text);
  
  try {
    // make a POST request to the media endpoint
    const response = await axios.post(`${this.url}/wp-json/wp/v2/media`, form, {
      headers: {
        ...this.headers,
        "Content-Type": `multipart/form-data; boundary=${form._boundary}`
      }
    });
    return response.data;
  } catch (error) {
    throw new Error(`Error while uploading image: ${error}`);
  }
}

Deixei de fora os campos de legenda e texto alternativo de propósito para este tutorial, pois eles não se encaixam em seu escopo. Mas não se preocupe, vou mergulhar no uso do OpenAI para gerar automaticamente esses campos no grand finale da série de automação do WordPress.

Para incluir a imagem real na solicitação, usamos o fs.createReadStreammétodo. Este método faz parte do fsmódulo (Sistema de arquivos) no Node.js e nos permite criar um fluxo do arquivo de imagem armazenado em pathnosso drive local.

Agora podemos executar uploadMedia nosso arquivo index.js e fornecer o caminho para a imagem e os atributos.

// index.js

// setting up attributes for the image
const mediaAttributes = {
  title: "Laptop with Code",
};

// specify the path to the image
const path = "/your-image-path/image.jpg";

// calling the uploadMedia method and passing in the image path and attributes
console.log(await wp.uploadMedia(path, mediaAttributes));

Vamos colocar tudo o que aprendemos à prova. Para dar ao nosso blog uma imagem em destaque, precisamos adicionar um novo campo chamado featured_media. Este campo armazenará o ID da imagem como seu valor. Podemos obter facilmente o ID da imagem a partir da resposta que obtemos após o upload da imagem.

Certo, vamos atualizar nosso arquivo index.js .

// index.js

async function createPostWithFeaturedImage() {
    // path to the image we want to set as the featured image
    const path = "/your-image-path/image.jpg";
    // upload the image to the WordPress API and get the response
    const mediaResponse = await wp.uploadMedia(path, {
        title: "sunrise meditation"
    });

    // read the content of the post from a .txt file
    const postContent = fs.readFileSync('/your-post-path/post.txt', 'utf8');

    // create an object to represent the post, including the featured_media field
    const post = {
        title: "Your Post Title",
        content: postContent,
        status: "draft", 
        // set the featured_media field to the image's ID that we got from the mediaResponse
        featured_media: mediaResponse.id
      };
    
    // create the post using the WordPress API
    const postResponse = await wp.createPost(post);
    // log a message to the console indicating that the post was created successfully
    console.log(`Post created! link: ${postResponse.link}`);
}

// call the function to create the post with the featured image
createPostWithFeaturedImage();

• Primeiro, carrega uma imagem para a API do WordPress e obtém a resposta
• Lê o conteúdo da postagem de um arquivo .txt
• Cria um objeto que representa a postagem e define o featured_mediacampo para a imagem idobtida da resposta da mídia
• Por fim, cria a postagem usando a API do WordPress

A imagem e a postagem do blog foram geradas no tutorial anterior usando OpenAI e Unsplash API e salvas na unidade local. A parte mais legal? O WordPress formata automaticamente a postagem, tudo graças às marcações HTML no arquivo .txt. Quão incrível é isso!




Deformar-se

Incrível! Se você está acompanhando, você fez um ótimo trabalho. Espero que agora você tenha uma boa compreensão de como é fácil criar seu próprio fluxo de trabalho ou aplicativos utilizando a API REST do WordPress. Neste tutorial, cobrimos apenas o básico, mas há muitos outros casos de uso interessantes para explorar.

No tutorial final da série WordPress Automation, aproveitaremos o poder do OpenAI, Unsplash e da API do WordPress para gerar automaticamente várias postagens de blog compatíveis com SEO com apenas algumas palavras-chave de tópico.

Cada postagem virá totalmente formatada com títulos, subtítulos, uma bela imagem em destaque e até uma legenda creditando o autor. Tudo isso será feito em tempo real, sem a necessidade de salvar ou preparar arquivos previamente. Portanto, fique atento e prepare-se para a melhor experiência de automação do WordPress!

Leituras Adicionais

Automação de blog com série de tutoriais de JavaScript

• API OpenAI ( Parte I e Parte II ): Geração Automatizada de Conteúdo
• Unsplash API : Seleção automatizada de imagens para postagens de blog
• API do WordPress : upload de conteúdo de blog sem esforço

Mais conteúdo em PlainEnglish.io . Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter , LinkedIn , YouTube e Discord .

Interessado em dimensionar sua inicialização de software ? Conheça o Circuito .