WordPress插件 | WordPress Plugin

Verge3D附带了一个用于WordPress的插件，WordPress是目前使用的最流行的内容管理系统(CMS)（全球安装量超过6000多万）。

Verge3D for WordPress插件提供以下功能：

WebGL应用托管和嵌入（直接、通过iframe或简码）。
易于使用的Elementor小部件。
与WooCommerce系统集成。您可以将Verge3D应用嵌入产品页面，并通过拼图制作功能强大的3D配置器。
WooCommerce之外的专有电子商务系统替代方案。
持久文件存储。

这些特性可以相互独立地工作。例如，您可能只需要嵌入，或者您可以处理从其他地方托管的Verge3D应用（如Verge3D Network等）接收的订单。

内容

Plugin Sandbox

要尝试插件的功能，请查看 Verge3D for WordPress沙箱。它提供了一个安全的环境，您可以用来测试您的Verge3D应用。

Installation

在安装插件之前，请确保您至少安装了 WordPress 5.0 或更新版本。要在服务器上上传应用，您需要有一个现代浏览器，如Google Chrome、Firefox、Edge或Safari。

安装方式很简单：

在WordPress管理仪表板的插件设置页面上点击 Add New 。
在WordPress.org的官方存储库中找到Verge3D插件并安装。
激活插件。Verge3D 菜单将显示在管理面板中。

在某些情况下，您可能需要从Verge3D发行版手动安装插件（例如，当您想要尝试Verge3D预览版中提供的新特性时）。为此，请执行以下步骤：

通过WordPress管理界面上传插件压缩包 verge3d/wordpress/verge3d.zip 。
在 Plugins 菜单中激活插件。Verge3D 菜单将显示在管理面板中。

激活后，试着上传您的一些应用或创建一个测试订单，以验证插件是否按预期工作。

Uploading Applications

使用 Applications 管理菜单访问 Verge3D Applications 界面：

要上传新应用，请点击 Add New 按钮，输入应用名称，然后点击 Next。您会看到 Manage Verge3D Application 对话框。点击 Choose Files，选择一个应用程序文件夹，然后点击 Upload ：

在此表单中，您还可以配置应用的iframe（画布）大小，并设置是否允许使用全屏模式。

要在WordPress页面/文章中嵌入Verge3D应用，请使用以下简码：

[verge3d id="YOUR_APP_ID"]

其中 YOUR_APP_ID 是 Verge3D Application 界面中表格里显示的应用ID。

如果您使用Elementor插件，有一个小部件可以让事情变得更简单。

Application Settings

在 Manage Verge3D Application 界面上，您可以找到以下设置：

Title: 应用名称。此值仅在WordPress管理界面中使用，例如将Verge3D应用附加到WooCommerce产品页面。要在浏览器（或Google/Bing搜索）中指定显示的应用标题，您需要编辑应用的HTML。请查看以下章节了解如何操作。
iframe width: 嵌入在WordPress页面/文章/产品页面中的应用画布宽度（像素）。请注意，实际尺寸可能会受到WordPress主题、布局、自定义CSS代码等的影响。
iframe height: 嵌入在WordPress页面/文章/产品页面中的应用画布高度（像素）。请注意，实际尺寸可能会受到WordPress主题、布局、自定义CSS代码等的影响。
Allow fullscreen mode: 允许/禁止全屏模式。如果取消选中，应用的全屏按钮将被移除，使进入全屏模式成为不可能。
Allow AR/VR: 允许/禁止应用的AR/VR会话。
Loading: 应用的加载策略。设置为 Lazy 可在应用不可见时延迟加载。使用 Eager 可强制浏览器立即加载。Auto 表示由浏览器自行决定何时加载应用。
App Image: 应用图片。此图片将替换WooCommerce产品页面图片库中显示的默认3D视图按钮。详见下方。

Elementor Widget

此功能允许您将已上传的Verge3D应用嵌入到Elementor页面中。只需从 General 标签（或使用搜索）拖放 Verge3D 小部件：

然后在 Content 面板中选择您需要的应用：

您可以在应用设置中设置画布大小和其他应用功能。

Interacting with Buttons

通过拼图，您可以轻松地将WordPress中设计的按钮（或其他类似按钮的元素）挂钩到3D场景。点击按钮可以触发场景中的各种事件，如播放动画、进行材质自定义、上传纹理、播放声音等。有时这是为应用实现UI的最直接方式，而无需开发全功能的HTML UI。

Buttons from Built-In Editor (aka Block Editor)

要处理使用WordPress内置编辑器添加的按钮的点击事件，首先分配一个 自定义CSS类。您可以通过选择按钮并在 Block → Advanced → ADDITIONAL CSS CLASS(ES) 面板中输入CSS类名来完成：

然后使用 on event of 拼图为按钮元素分配事件监听器。元素本身通过 query selector 拼图获取：

将分配给按钮的CSS类指定为选择器的第一项（点前缀表示"按CSS类获取元素"），后跟 a 表示锚标签：


    .my-button a

请注意，由于Verge3D应用嵌入在iframe中，您还必须启用 in parent doc。

Buttons from Elementor

使用Elementor创建的按钮的点击事件处理方式略有不同。您应该为按钮分配 自定义ID，而不是类名，您可以在 Edit Button → Content → Button ID 面板中完成：

然后使用 on event of 拼图为按钮元素分配事件监听器。元素本身通过 query selector 拼图获取：

将分配给按钮的元素ID指定为选择器的第一项（井号表示"按ID获取元素"），后跟 a 表示锚标签：


    #my-button a

请注意，由于Verge3D应用嵌入在iframe中，您还必须启用 in parent doc。

WooCommerce Integration

WooCommerce是一个流行的电子商务系统，它驱动了互联网中28%以上的在线商店。Verge3D通过此WordPress插件和 e-commerce拼图提供了与WooCommerce的无缝集成。

请参阅这篇教程文章了解如何使用此功能。您也可以观看以下视频。

Supported product types

此插件支持以下产品类型：

Simple
Grouped
External/Affiliate
Variable
Composite（需要 WooCommerce Composite Products 扩展）

请查看Asset Store中的 Drink Shop 和 Simple Configurator 演示，了解这些产品类型如何与Verge3D集成。

3D only vs 2D gallery + 3D

您可以选择两种将3D应用嵌入WooCommerce产品页面的方法。第一种方法是完全替换产品图片：

WebGL应用替换WooCommerce产品图片 — Verge3D沙箱中的 Spinner 产品页面。

此方法特别适用于3D可视化完全描述了产品的外观和感觉，因此不需要额外的2D图片的情况。

第二种方法是将3D视图按钮作为项目添加到2D图片库中：

WebGL应用作为WooCommerce产品图片库中的项目 — Verge3D沙箱中的 Smart TV 产品页面。

要选择使用哪种方法，您可以简单地切换 Product data 面板上的 Show as gallery item 设置（见下文）。

Product Settings

对于每个支持的产品，在 Product data 的 Verge3D 标签上有一组插件特定的设置：

Application: 将显示在产品页面上的Verge3D应用。
Show as gallery item: 在点击图片库中的3D View按钮时运行应用，或完全用3D可视化替换产品图片。
Switch to 3D on update: 当以图片库项目方式运行3D应用时，启用此设置可在产品更新时自动切换到3D视图。此功能主要用于可配置的 Grouped 或 Variable 产品。如果禁用，当用户从建议的配置中选择内容时，WooCommerce将切换到第一张2D图片。

Using Puzzles

通过 connect to WooCommerce 和 product info 拼图，您可以通过从WooCommerce产品页面检索产品或所选配置的数据来实现相当高级的应用（如3D配置器）。

有关使用示例，请查看 Spinner 演示（也可在资源商店中找到）。

Prevent reloading when adding product to the cart

在将标准WooCommerce设置与Verge3D一起使用时，有一个小问题。每次客户将商品添加到购物车时，整个页面都会被强制重新加载，导致Verge3D应用也重新加载，从而影响客户体验。

要解决此问题，您可以使用插件来增强WooCommerce，实现动态添加产品，例如 AJAX Add to Cart。

Alternative E-Commerce System

Verge3D for WordPress插件附带的电子商务系统是一个自给自足的替代WooCommerce的方案。它支持：

下客户订单，通过 place order、place order+ 或 send data 拼图提交。
向客户或销售人员发送通知电子邮件。
生成报价单和收据，并将其附加到电子邮件中。
将各种数据附加到订单：PDF、自定义文本、JSON、图片、声音或视频。
通过PayPal或银行卡处理付款。
分发可下载的产品。

该系统不依赖任何第三方插件，可以通过PHP轻松定制以满足您的需求。

Receiving Orders with Order Form

要处理Verge3D应用发送的常规订单（通过 place order 或 place order+ 拼图），请使用以下简码在您的WordPress页面/文章中添加一个订单表单：

[verge3d_order]

然后将该页面/文章的链接指定为 place order/place order + 拼图的"send to"参数。每次执行此拼图时，您的应用会将用户重定向到您的订单表单：

有关使用示例，请查看 Ring 演示（也可在资源商店中找到）。

Managing Orders

使用 Orders 管理菜单访问 E-Commerce Orders 界面：

此列表中的订单在接收到来自Verge3D应用的请求时自动创建。您可以使用此界面查看和管理客户订单。

Managing Products

使用 Products 管理菜单访问 E-Commerce Products 界面：

这些产品（也可以是产品部件）用于组合由 place order+ 拼图生成的订单。它们与WooCommerce或其他电子商务解决方案中的实际 products 无关。

每个产品包含以下字段：

Title: 人类可读的产品标题，例如"Verge3D for Blender"或"Spinner"。此字段是必填的。
SKU: 产品库存单位。此值不仅用于商家管理订单，而且主要用于在 place order + 或 send data 拼图中引用产品项目。基本上，此值用作产品ID。
Price: 产品价格。可以设置为零。
Download link: 可选的可下载产品链接。

Getting Info About Products

此功能允许用户接收存储在服务器上的产品信息。

使用时请执行以下REST API方法：


    https://WP_HOST/wp-json/verge3d/v1/get_product_info/SKU

其中WP_HOST是WordPress服务器的主机名，例如 sandbox.soft8soft.com，SKU是产品的库存单位。

成功后，此方法返回以下包含产品信息的JSON文件：


    {
        "status": "ok",
        "title": "Product Title",
        "sku": "SKU",
        "price": "Product price"
        "currency": "Currency symbol, such as $"
    }

Using Puzzles

使用 load data 和 loaded data 拼图获取有关产品的信息：

Uploading Files

此功能允许用户持久存储在Verge3D应用中创建的内容，例如截图、上传的纹理和保存的配置。

要上传文件到服务器，请使用以下REST API方法：


    https://WP_HOST/wp-json/verge3d/v1/upload_file/

其中WP_HOST是WordPress服务器的主机名，例如 sandbox.soft8soft.com

成功后，此方法返回以下包含上传文件信息的JSON文件：


    {
        "status": "ok",
        "statusText": "Yay! File uploaded successfully.",
        "id": THE_ID_OF_THE_UPLOADED_FILE,
        "link": LINK_TO_THE_UPLOADED_FILE,
        "size": FILE_SIZE
    }

使用请求中提供的链接检索文件，或使用ID和 get_file REST API方法：

https://WP_HOST/wp-json/verge3d/v1/get_file/ID

Using Puzzles

使用 send data 和 loaded data 拼图上传文件。使用 dict get key 拼图解析API响应的JSON字段。

以下示例将用户在 opened file 拼图中选择的文件上传到Soft8Soft沙箱，然后将文件的网址保存到HTML链接（<a href="...">）元素中。

要从服务器检索/下载文件，您也可以使用 load data 和 loaded data 拼图。

有关使用示例，请查看 Custom Image 演示（也可在资源商店中找到）。

Plugin Settings

使用 Settings 管理菜单修改插件全局设置：

这些设置大多数用于插件附带的电子商务系统。如果您只想使用WooCommerce，则不需要这些设置。

General Tab

Currency: 用于存储/显示价格的货币。
Price decimals: 显示价格的小数位数。
Merchant info: 商家信息：公司/品牌、地址、联系人、标志等。
Order form fields: 订单中应包括的字段。
Order success text: 订单成功提交后显示的文本。
Order failed text: 订单失败时显示的文本。

Mail Tab

Order notification e-mail: 用于指定负责管理订单的人员的电子邮件地址。当客户下新订单时，您将在此电子邮件中收到有关此订单的通知。
Order e-mails "From": 用于指定负责与客户通信的个人/组织的名称/电子邮件。这可以是一个销售经理的电子邮件，或一些常见的地址，如 sales@yourcompany.com，或只是一个无回复地址，如 noreply@yourcompany.com。
New order notifications: 使用这些选项配置新订单通知邮件的收件人，以及此类邮件的主题、内容和附件。
Updated order notifications: 使用这些选项配置订单更新通知邮件的收件人，以及此类电子邮件的主题、内容和附件。
Sales quotes: 使用这些选项配置发送给客户的报价邮件的主题和内容。
Invoices: 使用这些选项配置发送给客户的账单邮件的主题和内容。

Documents Tab

要正确使用此功能，您需要在服务器上安装Chrome/Chromium浏览器。它将在所谓的 headless mode 中运行，将HTML订单转换为PDF格式。如果您在某个自定义目录中安装了Chrome/Chromium可执行文件，请指定路径；如果安装在系统默认路径，可将路径字段留空。

请注意，要以系统范围安装Chrome，您需要对服务器具有管理员访问权限。如果没有，请下载最新的Chromium版本，将其解压到服务器上的某个用户可访问的目录中，然后在路径字段中指定Chromium可执行文件的路径（例如 /home/ubuntu/chrome-linux/chrome）。

PDF Generator: Chrome/Chromium浏览器的路径，用于执行PDF转换。如果以系统范围安装，请留空。
Quotes: 报价文档中显示的附加内容，及报价被确认为有效的时间。
Invoices: 收据文档中显示的附加内容。

Payment Tab

Paid status: 成功付款后设置的订单状态。例如，如果您正在销售实体商品，您可能希望将订单状态设置为 Processing，这意味着您正在处理订单以便发货。如果您正在销售数字商品，您可能希望将状态设置为 Completed。在这种情况下，下载链接将通过电子邮件发送给客户。
PayPal: PayPal付款方式激活检查器和应用客户端ID。请使用以下页面了解如何获取。

Security Tab

为了使您的服务器更安全，请始终禁用您不使用的功能。

Enable REST APIs

用于启用/禁用插件提供的订单管理、持久文件存储或产品API的选项。

Cross-domain requests

用于启用/禁用插件提供的REST API的跨域请求（来自不同主机）的选项。

Custom products

允许接收带有自定义产品价格和/或SKU的订单。

Allowed MIME types

允许由插件上传和托管的应用文件类型。默认列表包含您可能需要的大多数类型，但如果您需要更具体的类型，可以随时将MIME和相应的扩展名（用空格字符分隔）添加到列表中。要查找某个文件的MIME，您可以使用在线工具，如这个。

上传常见图片格式（如JPEG、PNG、WebP等）始终由WordPress允许。

Got Questions?

欢迎在论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。