raheleh/inpsyde

WordPress 插件,用于展示用户的美观表格

安装次数: 2

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言:JavaScript

类型:wordpress-plugin

dev-main 2023-08-16 20:01 UTC

This package is auto-updated.

Last update: 2024-09-16 22:12:29 UTC


README

Wordpress-React

WP+React 插件

此 WordPress 插件在访问自定义端点 '/my-lovely-users-table/' 时显示一个简单的用户表格。前端采用 React 实现,后端采用 PHP 5.3+,符合 WordPress 标准。

描述

安装插件并激活后,您可以在网站前端访问 http://your_website.com/my-lovely-users-table/。您将看到一个由第三方 API 提供的3列(ID、USERNAME、NAME)的用户列表,该列表作为测试 API 存在于 https://jsonplaceholder.typicode.com/users。点击选中用户的信息项的超链接,将在表格顶部显示详细信息卡片。

插件的前端

https://example.com/my-lovely-users-table/

插件的前端

https://example.com/my-lovely-users-table/

缓存 HTTP 请求

WordPress Transients API 用于缓存 HTTP 请求以提高性能,并应用后端方法进行缓存。这样做背后的两个主要原因如下

  • 后端 WordPress 亲和力
  • 简单且易于实现

应用 Transients API 无需安装其他工具,并且简单地在 WordPress 中实现。正如文档中解释的那样,以及我在任务中尝试的那样,这种方法提供了一种简单且标准化的方式来在数据库中临时存储缓存的通过自定义名称和时间框架可访问的数据。

嵌入 REACT 组件

由于我的前端方法有大量前端选项可供选择,我决定在项目中嵌入一个 React 组件,因为我之前没有在 WordPress 中使用过它。因此,这对我是一个新的挑战。当然,我知道在客户工作项目和真实世界中,需要考虑一些因素,例如灵活性、与主题和其他插件的兼容性以及用户的需求。

前端样式

Bootstrap css 用于美化美观的表格。

Brain Monkey

我尝试学习如何应用和使用 Brain Monkey 进行单元测试。这也是我尝试参与的一个巨大挑战。这个方法在技术上很有趣,而且对我来说是一个新的经验,所以我尽量保持简单,应用一个可行的测试。因此,我应用了聪明的猴子工具来模拟插件主类的 4 个方法。

安全

禁止直接访问插件文件,并应用像 esc_html() 这样的转义函数以及修复 PHPCS 警告等实践。

任务要求

  • Composer 亲和力
  • 应用了 Brain Monkey 提供的 PHPUnit 测试(4 个从插件主类考虑的方法):我的第一次独立单元测试 WordPress)
  • 应用 React 组件开发作为前端开发选择:我在 WordPress 插件开发中嵌入 React 项目的第一次实践
  • WordPress Transients API 用于缓存 HTTP 请求。在开发插件时,我考虑了“保持简单、使其工作、解释原因、关注细节”的指南和技巧。

由 Raheleh Yoosefzadeh 开发

安装

要求

  • 推荐使用 WordPress 最新版本。
  • PHP 5.3 或更高版本。

安装

  1. 解压下载的包。
  2. 将包含文件的文件夹上传到 /wp-content/plugins/ 目录。
  3. 通过 WordPress 的 插件 菜单激活插件。

或者使用git说明来安装。

Composer安装

运行以下命令

composer require raheleh/inpsyde:dev-main

安装composer包,Inpsyde插件文件夹将在以下位置找到:

vendor/raheleh/

截图

截图

我可爱的用户表看起来像这样:my-lovely-users-table