WordPress插件
Verge3D附带了一个用于WordPress的插件,WordPress是目前使用的最流行的内容管理系统(CMS)(全球安装量超过6000多万)。
Verge3D for WordPress插件提供以下功能:
- 应用托管和发布(嵌入)。
- 与WooCommerce系统集成。
- 持久文件存储。
- 用于处理客户订单的通用电子商务系统,使用 place order 拼图提交数据。
- 可完全自定义的电子商务系统,用于处理以JSON格式提交的订单 send data 拼图。
这些特性可以相互独立地工作。例如,您可能只需要嵌入,或者您可以处理从其他地方托管的Verge3D应用(如Verge3D Network等)接收的命令。
内容
插件沙箱
要尝试插件的功能,请查看 Verge3D for WordPress沙盒。它提供了一个安全的环境,您可以用来测试您的Verge3D应用。
安装
在安装插件之前,请确保您至少安装了WordPress4.7或更新版本。要在服务器上上传应用,您需要有一个现代浏览器,如Google Chrome、Firefox、Edge或Safari11.1+。
安装方式很简单:
- 在您的WordPress管理仪表板的插件设置页面上点击 Add New 。
- 在WordPress.org的官方 存储库 中找到Verge3D插件并安装。
- 激活插件。Verge3D 菜单将显示在管理面板中。
在某些情况下,您可能需要从Verge3D发行版手动安装插件(例如,当您想要尝试Verge3D预览版中提供的新特性时)。为此,请执行以下步骤:
- 通过WordPress管理界面上传插件压缩包 verge3d/wordpress/verge3d.zip 。
- 在 插件 菜单中激活插件。Verge3D 菜单将显示在管理面板中。
激活后,试着上传您的一些应用或创建一个测试命令,以验证插件是否按预期工作。
请注意,您的WordPress服务器配置可能有严格的上传限制。如果您在上传应用时遇到问题,您需要调整php.ini文件中的以下设置:
upload_max_filesize = 128M
post_max_size = 128M
查看官方 PHP文档 有关php.ini配置的更多信息。
上传应用
使用 Applications 管理菜单查看 Verge3D应用 界面:

要上传您的应用,请单击应用的标题下的 Edit ,并在 Update Verge3D Application 表单中单击 Choose Files :

在此表单中,您还可以配置应用的iframe(画布)大小,并设置是否允许使用全屏模式。
要在WordPress页面/文章中嵌入Verge3D应用,请使用以下短代码:
[verge3d id="YOUR_APP_ID"]
其中 your_app_id 是 Verge3D Applications 页面中显示的应用ID。
与WooCommerce整合
WooCommerce是一套流行的电子商务系统,它驱动了互联网中28%以上的在线商店。从版本2.16开始,Verge3D通过WordPress插件和 e-commerce拼图提供了与WooCommerce的无缝集成。
请参阅 此教程文章 中介绍的电商功能特性。您还可以查看此教学 视频。
上传文件
此特性允许用户持久存储在Verge3D应用中创建的内容,例如屏幕截图、上传的纹理和保存的配置等。
要向服务器上传文件,请使用下面的REST API方法:
https://HOSTNAME/wp-json/verge3d/v1/upload_file/
其中HOSTNAME是WordPress服务器的主机名,例如 sandbox.soft8soft.com
成功后,此方法返回以下JSON文件,其中包含上传文件的信息:
{
"id": THE_ID_OF_THE_UPLOADED_FILE,
"link": LINK_TO_THE_UPLOADED_FILE,
"size": FILE_SIZE
}
使用请求中提供的链接或使用ID与 get_file REST API方法来检索文件:
https://HOSTNAME/wp-json/verge3d/v1/get_file/ID
使用拼图
使用 send data 和 loaded data 拼图来上传文件。使用 in dict ... get key ... 拼图解析API响应的JSON字段。
在下面的示例中,将用户在“opened file”拼图中指定的文件上载到Soft8Soft沙箱中,然后把web地址保存到 link 变量里:

若要检索/下载文件,请使用 load data 和 loaded data 拼图。
接收基础订单
要处理Verge3D应用中由 place order 拼图生成的订单,在您的WordPress页面/文章中使用以下短代码添加一个订单表单:
[verge3d_order]
然后将指向该页面/应用的链接指定为“place order”拼图的“send to”参数。每次执行此拼图时,您的应用都会将用户重定向到您的订单表单:

管理订单
使用 E-Commerec 管理菜单来访问 E-Commerce Orders 页面:

此列表中的订单会在接收到来自Verge3D应用的请求时自动创建。您可以使用此屏幕查看和管理客户订单。
高级电子商务应用
在某些情况下,您可能希望扩展电子商务系统的功能。例如,如果您开发了3D配置器,或者需要从客户端获得更多信息以正确处理订单,则需要向请求添加更多数据,并在服务器上处理这些数据。对于这种情况,您需要使用“send data”拼图将数据编码为JSON格式,然后为您的电子商务系统创建自定义模板表单。
假设您想创建一个基本的表单定制器。以下是数据的外观:
{
"width": 120,
"length": 150,
"height": 100,
"color": "Redwood",
"title": "Custom Table",
"price" 100,
"user_name", "John Smith",
"user_email", "john.smith@example.com",
"user_phone", "+123456789"
}
您可以使用字典拼图来组合这个结构,然后使用“send Data”拼图将其发送到服务器。之后,您需要为订单管理管理页面创建自定义模板,以及将发送给客户和销售人员的电子邮件。为此,请将以下模板源文件复制到 verge3d 子目录:
WORDPRESS/wp-content/plugins/verge3d/templates/order_admin_form.php -> THEME/verge3d
WORDPRESS/wp-content/plugins/verge3d/templates/order_email_body.php -> THEME/verge3d
其中WORDPRESS是WordPress安装的根目录,而THEME是当前主题的目录。根据为您的订单指定的结构编辑这些文件。
最后一部分是为您的“send data”拼图分配一个适当的URL。类似这样:
https://HOSTNAME/wp-json/verge3d/v1/place_order/
其中HOSTNAME是WordPress服务器的主机名,例如 sandbox.soft8soft.com
插件设置
使用 Settings 管理菜单修改插件全局设置:

Order notification e-mail 选项用于指定负责管理订单的人员的电子邮件地址。当客户下新订单时,您将在此电子邮件上收到有关此订单的通知。
Order e-mail "From" 选项用于指定负责与客户通信的人员/组织的名称/电子邮件。这可以是销售经理的电子邮件,比如 sales@yourcompany.com 或只是一个无回复地址,如 noreply@yourcompany.com.
Order e-mail PDF attachments 选项用于在您的订单电子邮件中启用PDF附件。此附件包含了可打印的订单内容。
要正确使用此功能,您需要在服务器上安装Chrome/Chromium浏览器。它将在被称为 headless mode 中执行将HTML订单转换为PDF格式的操作。如果您在某个自定义目录中安装了Chrome/Chromium可执行文件,请指定路径;如果时安装在系统默认路径,可将路径字段留空。
请注意,要安装Chrome到系统默认路径,您需要对服务器具有管理员访问权限。如果没有,请下载 最新的Chromium版本,将其解包到服务器上的某个用户可访问的目录中,然后在path字段中指定到Chromium可执行文件的路径(例如 /home/ubuntu/chrome-linux/chrome).
Enable REST APIs 选项用于启用或禁用插件提供的订单管理和持久文件存储API。
跨域请求(Cross-domain requests) 选项用于启用或禁用对插件提供的REST API的跨域请求(源自不同主机)。
定制电子商务表单
若要修改电子商务表单,请复制位于Verge3D插件目录的 template 到WordPress主题目录下 verge3d 子目录。
例如,如果需要修改订单电子邮件模板:
WORDPRESS/wp-content/plugins/verge3d/templates/order_email_body.php -> THEME/verge3d
其中WORDPRESS是WordPress安装的根目录,而THEME是当前主题的目录。
下面是可以自定义的模板列表:
模板文件 | 说明 |
---|---|
order_admin_form.php | WordPress管理仪表板上的订单管理表单。 |
order_email_body.php | 订单电子邮件正文模板。此模板用于发送给您和客户的订单通知。 |
order_email_pdf.php | 订购电子邮件PDF附件模板。此模板用于生成即将被转化为订单邮件中PDF格式附件的HTML文件。 |
order_form.php | 订单表单模板。此表单将在 [verge3d_order] 短代码所在页面中显示给客户: |
order_success.php | 接受订单时显示的消息。 |
order_failed.php | 拒绝订单时显示的消息。 |
安全措施
在为电子商务应用使用自定义表单时,请确保正确地转义客户发送的输出数据。参见此 指南 了解更多信息。
电子商务协议规范
本节针对具有高级服务器端编程经验的用户。
“place order”拼图使用基础协议处理订单。使用带有如下参数的HTTP POST请求,将订单从浏览器发送到服务器:
POST参数 | 说明 |
---|---|
v3d_title | 订单标题。此字段用于描述订单。此处数值对客户没有用处,仅对负责处理订单的人员有意义。 |
v3d_content | 订单内容。此文本字段包括完整的订单信息,并且对客户和销售经理都可见。 |
v3d_price | 订单总价。它可以是一个数字或字符串,例如99、99.99、“$99.99”。 |
v3d_screenshot | 订单截图。此可选值必须是表示图像的数据URI。此值由 HTMLCanvasElement.toDataURL() 方法生成。 |
更高级的基于JSON的协议使用以下一组默认参数:
JSON字段 | 说明 |
---|---|
title | 订单标题。此字段用于描述订单。此处数值对客户没有用处,仅对负责处理订单的人员有意义。 |
price | 订单总价。它可以是一个数字或字符串,例如99、99.99、“$99.99”。 |
user_name | 客户的全名。 |
user_email | 客户的电子邮件地址。 |
user_phone | 客户的电话号码。 |
user_comment | 订购备注。 |
screenshot | 订单截图。此可选值必须是表示图像的数据URI。此值由 HTMLCanvasElement.toDataURL() 方法生成。 |
由于此协议是可扩展的,您可以添加任何您想要的参数,如附加配置选项、产品属性、送货地址、帐单信息、税项、折扣等。
遇到问题?
欢迎您随时在 论坛上提问!您还可以加入中文用户社区QQ群(171678760),在线寻求帮助。