構建 WordPress CMS 支持的前端應用程序或項目
已發表: 2021-08-17
構建一個 WordPress 驅動的前端應用程序需要 WP REST API 和 AngularJS 的知識。 您可以使用 WordPress 作為後端構建任何應用程序。 您可以擺脫 WordPress 中流行的傳統主題和管理模式。
在這篇關於構建由 WordPress 驅動的前端的文章中，我們將創建一個包含特色帖子、類別和用戶列表頁面的界面。
您將需要線框的幫助來構建由 WordPress 驅動的前端應用程序。
項目概況
是時候了解需求並規劃整個項目了。 我們需要的第一件事是列出帖子、用戶和類別的頁面和單曲頁面。
因此，我們需要這些頁面的模板。 列表頁面將顯示一定數量的帶有分頁的帖子。 以下是列表頁面的大致外觀。
以下是單個帖子模板的外觀。
WP REST API 提供了線框中的大部分功能，但我們必須自己添加一些附加功能，例如特色圖像鏈接、類別名稱和作者姓名。
讓我們更進一步，分析類別和帖子線框應該是什麼樣子。 這就是類別模板的外觀。
這就是用戶模板的外觀。
要擁有其中一些功能，您需要一個配套插件。 您還會注意到，所有這些模板中的某些功能都是通用的，因此，我們應該創建通用的 AngularJS 指令，以便可以共享通用功能並且沒有重複。
要求
在開始項目之前，您需要安裝一些應用程序。
1. Node.js 用於處理某些命令。
2. GulpJS 用於優化和 Git 用於克隆
3. 使用 WP REST API 插件安裝 WordPress
在 Github 命令行中，您必須編寫以下代碼來克隆 HTML 包存儲庫 -
$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd 路徑/到/克隆/存儲庫 以下行將安裝 Node.js 模塊。 $ npm 安裝
安裝需要一些時間，然後使用 $ gulp 命令執行源代碼。 這將創建一個名為“dist”的文件夾，其中保存了所有已編譯的源文件。
是時候構建 Companion 插件了——
正如我們之前所說，我們需要構建一個配套插件來構建一個 WordPress 驅動的前端應用程序。 以下是我們將通過構建配套插件來實現的目標。
這些功能包括帖子的特色圖片、帖子的作者姓名以及來自 Gravatar 帳戶的作者圖片，最後是每個帖子的類別列表。
轉到您的 wp-content/plugins 文件夾並將其命名為與您的插件相同。 例如，我們將使用 quiescent-companion。
進入文件夾並創建一個與文件夾同名的 php 文件。 打開它並粘貼以下代碼，這只是創建插件的正式開始。
/** * 插件名稱：靜止伴侶 * 描述：與 Quiescent WP REST API 主題配合使用的插件 * 作者：比拉爾·沙希德 * 作者 URI：http://imbilal.com */
為特色圖片構建自定義字段
粘貼以下代碼，該代碼旨在為帖子創建特色圖片。 基本上，它將創建一個自定義字段，您可以像添加特色圖像一樣添加特色圖像。
/**
* 修改 Post 對象的響應
*/
功能 quiescent_modify_post_response() {
// 為特色圖片添加一個字段
register_rest_field（'post'，'quiescent_featured_image'，數組（
'get_callback' ='quiescent_get_featured_image',
'update_callback' = null,
'模式' = null
));
}
add_action('rest_api_init', 'quiescent_modify_post_response');
以下代碼用於為特色圖像的自定義字段命名並檢索圖像。
/**
* 檢索特色圖片鏈接的功能
*/
功能 quiescent_get_featured_image( $post, $field_name, $request ) {
$attachment_id = $post['featured_media'];
$attachment_info = wp_get_attachment_image_src($attachment_id, 'quiescent_post_thumbnail');
返回 $attachment_info[0];
}
使用 last created 方法，您可以檢索有關帖子的大量信息，例如其 ID、標題、內容等。
以下代碼用於為特色圖像創建自定義尺寸。 尺寸一直保持在 712 x 348 像素。
**
* 為特色圖片添加圖片尺寸
*/
函數 quiescent_add_image_size() {
add_image_size('quiescent_post_thumbnail', 712, 348, true );
}
add_action('init', 'quiescent_add_image_size');
保存文件，因為添加了第一個自定義字段，還有兩個。
相關文章：WordPress塊編輯器中的封面圖片與特色圖片
為用戶和類別構建自定義字段
以下是添加字段以顯示作者姓名的代碼。
// 添加作者姓名字段
register_rest_field（'post'，'quiescent_author_name'，數組（
'get_callback' = 'quiescent_get_author_name',
'update_callback' = null,
'模式' = null
));
/**
* 檢索作者姓名的功能
*/
函數quiescent_get_author_name（$post，$field_name，$request）{
返回 get_the_author_meta('display_name', $post['author']);
}
以下代碼用於添加類別名稱。
// 為類別添加一個字段
register_rest_field（'post'，'quiescent_categories'，數組（
'get_callback' = 'quiescent_get_categories',
'update_callback' =空，
'模式' = null
));
/**
* 檢索類別的功能
*/
功能 quiescent_get_categories( $post, $field_name, $request ) {
返回 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',
'update_callback' = null,
'模式' = null
));
}
/**
* 獲取用戶頭像
*/
功能 quiescent_get_user_avatar( $user, $field_name, $request ) {
$args = 數組（
'大小' = 207
);
返回 get_avatar_url( $user['id'], $args );
}
現在，您需要做的就是為資源創建模板、路由和服務，並輕鬆完成構建 WordPress 驅動的前端。