JavaScript의 WordPress REST API 소개
WordPress REST API 및 JavaScript의 도움으로 블로깅 생산성 향상 — 이 튜토리얼을 통해 방법을 배우십시오.
지난 튜토리얼 에서 블로그 콘텐츠를 생성하는 OpenAI 및 Unsplash API의 마법을 목격했습니다. 오늘 우리는 JavaScript를 사용하여 쉽게 콘텐츠를 업로드하기 위해 WordPress REST API를 사용하여 다음 단계로 나아가고 있습니다. 이 작업을 쉽게 수행하는 방법을 보여주는 몇 가지 실용적인 예가 있습니다. JavaScript로 블로그 자동화 시리즈를 마무리하는 데 점점 가까워지고 있으므로 시작하겠습니다!
전제 조건
초보자에게 친숙한 이 튜토리얼을 효과적으로 진행하려면 다음이 필요합니다.
- 컴퓨터에 Node.js를 설정합니다.
- JavaScript에 대한 좋은 이해.
- WordPress 사이트.
이 자습서에서는 다음을 살펴보겠습니다.
- WordPress REST API 소개
- 노드 프로젝트 설정
- 애플리케이션 비밀번호 얻기
- API 호출하기 — 예
- REST API를 통해 추천 이미지로 블로그 게시물 게시
WordPress REST API 소개
WordPress REST API를 사용하면 코드로 WordPress 사이트를 제어할 수 있습니다. WordPress의 다양한 데이터 유형에 해당하는 API 끝점(URL)을 사용하여 사이트의 데이터 및 기능에 액세스하고 관리하는 방법입니다 . GET , POST , PUT 및 DELETE 와 같은 표준 HTTP 메서드를 사용하여 게시물 및 기타 작업을 읽고 쓰고 게시할 수 있습니다 .
API는 JSON 및 XML 과 같은 다양한 데이터 형식을 지원하므로 가장 적합한 형식을 선택할 수 있습니다.
WordPress REST API를 사용하면 맞춤형 앱을 구축하고, 다른 플랫폼 및 서비스와 통합하고, CRM 및 분석과 같은 도구와 연결하고, 지루한 작업을 자동화할 수 있습니다. 개발자에게 WordPress 사이트에 대한 제어 및 유연성을 제공하는 강력한 도구입니다.
자세한 내용은 공식 WordPress REST API 문서를 확인하세요.
좋아, 사업을 시작하자!
노드 프로젝트 설정
- 원하는 이름(예: )으로 새 폴더를 만듭니다
WORDPRESS-REST-API. - 코드 편집기를 열고 터미널에 액세스합니다.
npm init노드 프로젝트를 설정하려면 실행하십시오 .- 프로젝트 폴더 내에서 index.js 및 WordPress.js 라는 두 개의 새 파일을 생성합니다 . 이 파일은 대부분의 코드를 포함합니다.
- 프로젝트용 npm 패키지를 아래에 설치합니다.
- dotenv는 API 키를 파일에 저장하는 데 사용되며
.env이 파일은 GitHub에서 실수로 공유되는 것을 방지하기 위해 포함됩니다.gitignore. - 서버에서 기대하는 형식으로 HTTP를 통해 파일 및 기타 데이터를 쉽게 보낼 수 있기 때문에 양식 데이터 라이브러리가 여기에서 사용 됩니다 .
- 먼저 WordPress API에 이미지를 업로드하고 응답을 받습니다.
- .txt 파일 에서 게시물의 내용을 읽습니다.
- 게시물을 나타내는 개체를 만들고 필드를 미디어 응답에서 얻은
featured_media이미지로 설정합니다.id - 마지막으로 WordPress API를 사용하여 게시물을 생성합니다.
- OpenAI API( 1부 및 2부 ): 자동화된 콘텐츠 생성
- Unsplash API : 블로그 게시물을 위한 자동화된 이미지 선택
- WordPress API : 손쉬운 블로그 콘텐츠 업로드
npm install axios dotenv form-data
node-wpapiJavaScript 애플리케이션이 WordPress 리소스를 쉽게 요청할 수 있도록 하는 유명한 Node.js 라이브러리가 있습니다 . 그러나 이 튜토리얼 시점을 기준으로 2021년 이후로 라이브러리가 유지되지 않은 것 같습니다.
그래서 처음부터 API 호출을 생성하는 방법을 보여드리기로 했습니다. 이렇게 하면 API 작동 방식을 더 잘 이해하고 요구 사항에 맞는 사용자 지정 요청을 만들 수 있습니다.
애플리케이션 비밀번호 얻기
인증된 WordPress API 요청을 보내려면 사용자 이름 과 애플리케이션 비밀번호가 모두 필요합니다.
애플리케이션 비밀번호를 생성하려면 WordPress 관리 대시보드 에 로그인하고 사용자 > 프로필 로 이동한 다음 애플리케이션 비밀번호 섹션 에서 이름을 입력하고 ' 새 애플리케이션 비밀번호 추가'를 클릭합니다. '
API 호출하기 — 예
엔드포인트 https://www.your-domain.com/wp-json/wp/v2/는 WordPress API의 핵심입니다. 이 끝점에 대한 GET 요청 은 사용 가능한 경로에 대한 정보와 함께 JSON 응답을 반환합니다.
애플리케이션 요구 사항에 따라 15개 이상의 엔드포인트를 사용할 수 있지만 가장 일반적으로 사용되는 엔드포인트는 다음과 같습니다.
// 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
WordPress.js 파일 에서 URL, 사용자 이름 및 비밀번호를 포함하는 매개변수를 WordPress받는 라는 인스턴스화 가능한 클래스가 생성됩니다.wpConfig
// 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는 모든 API 요청 메서드를 보유하고 index.js는 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);
새 게시물을 만들고 싶다고 상상해 보십시오. 이를 위해 WordPress.jscreatePost 파일 에 메서드를 추가합니다 . 이 메서드는 인증 헤더 및 게시 데이터를 포함하여 에 HTTP POST 요청을 보냅니다 . 구현은 다음과 같이 수행할 수 있습니다.…/wp/v2/posts endpoint
// 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));
예 2: 미디어 파일을 업로드하기 위해 POST 요청 보내기
이제 API를 사용하여 로컬 이미지 파일을 업로드하는 방법을 살펴보겠습니다. WordPress.jsuploadMedia 파일 에 새 메서드를 추가하여 시작하겠습니다 .
// 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}`);
}
}
이 튜토리얼의 범위에 맞지 않기 때문에 캡션 및 대체 텍스트 필드를 일부러 생략했습니다. 하지만 걱정하지 마세요. OpenAI를 사용하여 WordPress 자동화 시리즈의 그랜드 피날레에서 해당 필드를 자동으로 생성하는 방법에 대해 자세히 설명하겠습니다.
요청에 실제 이미지를 포함하기 위해 메소드를 사용합니다 fs.createReadStream. 이 메서드는 Node.js의 (파일 시스템) 모듈의 일부 이며 로컬 드라이브에 fs저장된 이미지 파일의 스트림을 만들 수 있습니다 .path
uploadMedia 이제 index.js 파일에서 실행하고 이미지와 속성에 대한 경로를 제공할 수 있습니다.
// 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));
우리가 배운 모든 것을 시험해 봅시다. 블로그 게시물에 추천 이미지를 제공하려면 이라는 새 필드를 추가해야 합니다 featured_media. 이 필드는 이미지의 ID를 값으로 저장합니다. 이미지를 업로드한 후 받은 응답에서 이미지 ID를 쉽게 가져올 수 있습니다.
좋습니다. 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();
OpenAI 및 Unsplash API를 사용하여 이전 자습서 에서 이미지 및 블로그 게시물을 생성한 다음 로컬 드라이브에 저장했습니다. 가장 멋진 부분은? WordPress는 .txt 파일의 HTML 마크업 덕분에 자동으로 게시물 형식을 지정합니다. 얼마나 멋진 일입니까!
워프업
엄청난! 잘 따라오셨다면 수고하셨습니다. WordPress REST API를 활용하여 자신만의 워크플로 또는 애플리케이션을 구축하는 것이 얼마나 쉬운지 이제 잘 이해하셨기를 바랍니다. 이 튜토리얼에서는 기본 사항만 다루었지만 더 흥미로운 사용 사례가 많이 있습니다.
WordPress 자동화 시리즈의 마지막 자습서에서는 OpenAI, Unsplash 및 WordPress API의 기능을 활용하여 몇 가지 주제 키워드로 여러 SEO 친화적인 블로그 게시물을 자동으로 생성합니다.
각 게시물은 제목, 부제목, 아름다운 특집 이미지 및 작성자를 인정하는 캡션으로 완전한 형식으로 제공됩니다. 이 모든 작업은 미리 파일을 저장하거나 준비할 필요 없이 실시간으로 수행됩니다. 그러니 계속 지켜봐주시고 궁극의 WordPress 자동화 경험을 준비하세요!
추가 자료
JavaScript 자습서 시리즈를 사용한 블로그 자동화
PlainEnglish.io 에 더 많은 내용이 있습니다 . 무료 주간 뉴스레터를 신청하십시오 . Twitter , LinkedIn , YouTube 및 Discord 에서 팔로우하세요 .
소프트웨어 시작을 확장하는 데 관심이 있으십니까 ? 회로를 확인하십시오 .
![연결된 목록이란 무엇입니까? [1 부]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
