WordPress CMS 기반 프런트 엔드 애플리케이션 또는 프로젝트 구축
게시 됨: 2021-08-17
WordPress 기반 프런트 엔드 애플리케이션을 빌드 하려면 WP REST API 및 AngularJS에 대한 지식이 필요합니다. WordPress를 백엔드로 사용하여 모든 애플리케이션을 빌드할 수 있습니다. 워드프레스에서 유행하는 기존의 테마와 관리자 모델에서 벗어날 수 있습니다.
WordPress 기반 프런트 엔드 구축에 대한 이 기사에서는 추천 게시물, 카테고리 및 사용자 목록 페이지를 포함하는 인터페이스를 만들 것입니다.
WordPress 기반 프런트 엔드 애플리케이션을 구축하려면 와이어프레임의 도움이 필요합니다.
프로젝트 개요
요구 사항을 이해하고 전체 프로젝트를 계획해야 할 때입니다. 가장 먼저 필요한 것은 게시물, 사용자 및 카테고리에 대한 페이지와 단일 페이지를 나열하는 것입니다.
따라서 해당 페이지에 대한 템플릿이 필요합니다. 목록 페이지에는 페이지 매김과 함께 특정 수의 게시물이 표시됩니다. 다음은 목록 페이지의 대략적인 모습입니다.
다음은 단일 게시물 템플릿의 모양입니다.
와이어프레임에 있는 대부분의 기능은 WP REST API에서 사용할 수 있지만 추천 이미지 링크, 카테고리 이름 및 작성자 이름과 같이 자체적으로 추가해야 하는 몇 가지 추가 기능이 있습니다.
한 단계 더 나아가 카테고리와 게시물 와이어프레임이 어떻게 생겼는지 분석해 보겠습니다. 이것이 카테고리 템플릿의 모양입니다.
이것은 사용자 템플릿의 모양입니다.
이러한 기능 중 일부를 사용하려면 컴패니언 플러그인이 필요합니다. 또한 일부 기능은 이러한 모든 템플릿에서 공통적이므로 공통 기능을 공유할 수 있고 반복되지 않도록 공통 AngularJS 지시문을 만들어야 합니다.
요구 사항
프로젝트를 시작하기 전에 몇 가지 응용 프로그램이 설치되어 있어야 합니다.
1. 특정 명령으로 작업하기 위한 Node.js.
2. 최적화를 위한 GulpJS와 복제를 위한 Git
3. WP REST API 플러그인으로 WordPress 설치
Github 명령줄에서 HTML 패키지 저장소를 복제하려면 다음을 작성해야 합니다.
$ 자식 복제 https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd 경로/to/clone/repository 다음 줄은 Node.js 모듈을 설치합니다. $ npm 설치
설치는 시간이 걸리고 $ gulp 명령을 사용하여 소스를 실행합니다. 이렇게 하면 컴파일된 모든 소스 파일이 보관되는 'dist'라는 폴더가 생성됩니다.
Companion Plugin을 구축할 시간 –
앞서 언급했듯이 WordPress 기반 프론트 엔드 애플리케이션을 구축하기 위해 동반 플러그인을 구축해야 합니다. 다음은 컴패니언 플러그인을 빌드하여 달성하려는 것들입니다.
기능은 게시물의 추천 이미지, 게시물의 작성자 이름과 Gravatar 계정의 작성자 이미지 및 마지막으로 각 게시물의 카테고리 목록입니다.
wp-content/plugins 폴더로 이동하여 플러그인과 동일한 이름을 지정합니다. 예를 들어, 우리는 quiescent-companion으로 갈 것입니다.
폴더 내부로 이동하여 폴더와 동일한 이름의 php 파일을 만듭니다. 그것을 열고 플러그인 생성의 공식적인 시작에 불과한 다음 코드를 붙여넣습니다.
/** * 플러그인 이름: Quiescent Companion * 설명: Quiescent WP REST API 테마와 작동하는 플러그인 * 저자: 빌랄 샤히드 * 저자 URI: http://imbilal.com */
추천 이미지에 대한 사용자 정의 필드 구축
게시물의 추천 이미지를 생성하기 위한 다음 코드를 붙여넣습니다. 기본적으로 커스텀 필드가 생성되며, 위와 같은 방식으로 추천 이미지를 추가할 수 있습니다.
/**
* Post 객체에 대한 응답 수정
*/
함수 quiescent_modify_post_response() {
// 추천 이미지에 대한 필드 추가
register_rest_field( '게시', 'quiescent_featured_image', 배열(
'get_callback' = 'quiescent_get_featured_image',
'업데이트_콜백' = null,
'스키마' = null
) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );
다음 코드는 추천 이미지의 사용자 정의 필드에 이름을 지정하고 이미지를 검색하기 위한 것입니다.
/**
* 추천 이미지 링크 검색 기능
*/
함수 quiescent_get_featured_image( $post, $field_name, $request ) {
$attachment_id = $post['추천 미디어'];
$attachment_info = wp_get_attachment_image_src( $attachment_id, 'quiescent_post_thumbnail' );
$attachment_info[0] 반환;
}
마지막으로 생성된 방법을 사용하여 ID, 제목, 내용 등과 같은 게시물에 대한 많은 정보를 검색할 수 있습니다.
다음 코드는 추천 이미지에 대한 사용자 정의 크기를 생성하기 위한 것입니다. 크기는 712 x 348 픽셀로 유지되었습니다.
**
* 추천 이미지의 이미지 크기 추가
*/
함수 quiescent_add_image_size() {
add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action( '초기화', 'quiescent_add_image_size' );
첫 번째 사용자 정의 필드가 추가되었으므로 파일을 저장하십시오. 두 개 더 가야 합니다.
관련 게시물: WordPress 블록 편집기의 표지 이미지와 추천 이미지
사용자 및 범주에 대한 사용자 정의 필드 작성
다음은 작성자 이름을 표시하는 필드를 추가하는 코드입니다.
// 작성자 이름 필드 추가
register_rest_field( '게시물', 'quiescent_author_name', 배열(
'get_callback' = 'quiescent_get_author_name',
'업데이트_콜백' = null,
'스키마' = null
) );
/**
* 저자명 조회 기능
*/
함수 quiescent_get_author_name( $post, $field_name, $request ) {
return get_the_author_meta( 'display_name', $post['author'] );
}
다음 코드는 카테고리 이름을 추가하는 코드입니다.
// 카테고리 필드 추가
register_rest_field( 'post', 'quiescent_categories', array(
'get_callback' = 'quiescent_get_categories',
'업데이트_콜백' = null,
'스키마' = null
) );
/**
* 카테고리 검색 기능
*/
함수 quiescent_get_categories( $post, $field_name, $request ) {
return get_the_category( $post['id'] );
}
필드를 저장하면 quiescent_featured_image, quiescent_author_name, quiescent_categories가 기존 양식에 없는 기능에 대한 세 가지 다른 사용자 정의 필드가 됩니다.
Gravatar 이미지 Pn 207 x 207 픽셀 형식 가져오기
마지막으로 누락된 것은 Gravatar의 작성자 사진입니다. 다음 코드는 이를 위한 것입니다.
/**
* 사용자 개체에 대한 응답 수정
*/
함수 quiescent_modify_user_response() {
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );
/**
* 사용자 개체에 대한 응답 수정
*/
함수 quiescent_modify_user_response() {
// 207 X 207 아바타용 필드 추가
register_rest_field( '사용자', 'quiescent_avatar_url', 배열(
'get_callback' = 'quiescent_get_user_avatar',
'업데이트_콜백' = null,
'스키마' = null
) );
}
/**
* 사용자의 아바타 검색
*/
함수 quiescent_get_user_avatar( $user, $field_name, $request ) {
$args = 배열(
'크기' = 207
);
return get_avatar_url( $user['id'], $args );
}
이제 리소스에 대한 템플릿, 경로 및 서비스를 만들고 WordPress 기반 프런트 엔드 구축을 쉽게 완료 하기만 하면 됩니다.