构建 WordPress CMS 支持的前端应用程序或项目
构建由 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 包存储库 -
|
1 2 3 4 5 6 7 |
$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd path/to/cloned/repository The following line will install Node.js modules. $ npm install |
安装需要一些时间，然后使用 $ gulp 命令执行源代码。 这将创建一个名为“dist”的文件夹，其中保存了所有已编译的源文件。
是时候构建 Companion 插件了——
正如我们之前所说，我们需要为 构建一个 WordPress 驱动的前端应用程序. 以下是我们将通过构建配套插件来实现的目标。
这些功能包括帖子的特色图片、帖子的作者姓名以及来自 Gravatar 帐户的作者图片，最后是每个帖子的类别列表。
转到您的 wp-content/plugins 文件夹并将其命名为与您的插件相同。 例如，我们将使用 quiescent-companion。
进入文件夹并创建一个与文件夹同名的 php 文件。 打开它并粘贴以下代码，这只是创建插件的正式开始。
|
1 2 3 4 5 6 |
/** * Plugin Name: Quiescent Companion * Description: Plugin to work with the Quiescent WP REST API theme * Author: Bilal Shahid * Author URI: http://imbilal.com */ |
为特色图片构建自定义字段
粘贴以下代码，该代码旨在为帖子创建特色图片。 基本上，它将创建一个自定义字段，您可以像添加特色图像一样添加特色图像。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * Modifying the response for the Post object */ function quiescent_modify_post_response() { // adding a field for the featured image register_rest_field( 'post', 'quiescent_featured_image', array( 'get_callback' ='quiescent_get_featured_image', 'update_callback' = null, 'schema' = null ) ); } add_action( 'rest_api_init', 'quiescent_modify_post_response' ); |
以下代码用于为特色图像的自定义字段命名并检索图像。
|
1 2 3 4 5 6 7 8 |
/** * Function to retrieve featured image link */ function 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' ); return $attachment_info[0]; } |
使用 last created 方法，您可以检索有关帖子的大量信息，例如其 ID、标题、内容等。
以下代码用于为特色图像创建自定义尺寸。 尺寸一直保持在 712 x 348 像素。
|
1 2 3 4 5 6 7 |
** * Adding image size for the featured image */ function quiescent_add_image_size() { add_image_size( 'quiescent_post_thumbnail', 712, 348, true ); } add_action( 'init', 'quiescent_add_image_size' ); |
保存文件，因为添加了第一个自定义字段，还有两个。
相关文章：WordPress块编辑器中的封面图片与特色图片
为用户和类别构建自定义字段
以下是添加字段以显示作者姓名的代码。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// adding a field for author name register_rest_field( 'post', 'quiescent_author_name', array( 'get_callback' = 'quiescent_get_author_name', 'update_callback' = null, 'schema' = null ) ); /** * Function to retrieve author name */ function quiescent_get_author_name( $post, $field_name, $request ) { return get_the_author_meta( 'display_name', $post['author'] ); } |
以下代码用于添加类别名称。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// adding a field for categories register_rest_field( 'post', 'quiescent_categories', array( 'get_callback' = 'quiescent_get_categories', 'update_callback' =null, 'schema' = null ) ); /** * Function to retrieve categories */ function 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 的作者照片。 以下代码仅用于此目的。
|
1 2 3 4 5 6 7 |
/** * Modifying the response for the User object */ function quiescent_modify_user_response() { } add_action( 'rest_api_init', 'quiescent_modify_user_response' ); |
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * Modifying the response for the User object */ function quiescent_modify_user_response() { // adding a field for 207 X 207 avatar register_rest_field( 'user', 'quiescent_avatar_url', array( 'get_callback' ='quiescent_get_user_avatar', 'update_callback' = null, 'schema' = null ) ); } |
|
1 2 3 4 5 6 7 8 9 10 |
/** * Retrieving the avatar for the user */ function quiescent_get_user_avatar( $user, $field_name, $request ) { $args = array( 'size' = 207 ); return get_avatar_url( $user['id'], $args ); } |
现在，您需要做的就是为资源和资源创建模板、路由和服务 完成构建一个 WordPress 驱动的前端 容易地。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 构建 WordPress CMS 支持的前端应用程序或项目
