WooCommerce可以说是使用WordPress销售产品的最流行方式。 WordPress支持大约25％的Internet，而WooCommerce支持大约39％的所有在线商店，因此，如果您希望向客户销售商品，可以将两者结合使用是一个安全的选择。
但是，就像使用任何软件一样，有时我们或我们的客户通常希望将功能集扩展到开箱即用之外。
举例：使用WooCommerce，您有一个想要销售的简单产品，但是想包含更多有关要显示在前端的产品的信息。
使用WooCommerce提供的几个挂钩和我们将要编写的自定义功能，我们将了解如何做到这一点。
必备工具
在开始之前，我假设您在计算机上进行了以下设置（或类似的设置）：
- 您选择的操作系统-我将使用macOS
- 至少PHP 5.6.25，尽管我将使用PHP 7
- MySQL 5.6.33
- Apache或Nginx
- WordPress 4.7
- WooCommerce 3.9
- 您最喜欢的IDE
在本教程的其余部分中，我假定所有这些都已安装，**并正在运行。
如果您专门为本教程下载WooCommerce，则无需担心诸如结帐页面，条款和条件之类的问题。 实际上，在本教程的其余部分中，我们仅将重点放在“简单产品”元框上。
添加自定义字段
在使用WordPress时，自定义字段的概念通常带有不同的定义 ：
WordPress具有允许帖子作者为帖子分配自定义字段的功能。 这种任意的额外信息称为元数据 。
对于非开发人员，此类信息可能会更复杂且不必要。 但是，如果您习惯使用它，那么请务必注意，当我在本教程中引用自定义字段时，我所谈论的是完全不同的东西。
相反，我是在谈论一个实际的文本字段，我们将其引入“ 简单产品”类型的“ 链接的产品”选项卡中。
但是我们将在本教程的后面部分进行介绍。 现在，让我们开始吧。
1.钩子
与WordPress一样，WooCommerce提供了一个API，使我们能够融入其页面生命周期的一部分。 因此，尽管您以前可能曾经使用过WordPress元数据API，但使用WooCommerce却有所不同。
有两个重要的钩子需要了解：
- woocommerce_product_options_grouping 。 我们将使用此函数来创建描述和文本输入，以接受我们的值。
- woocommerce_process_product_meta 。 我们将使用此钩子来处理，清理和保存文本输入的值。
与WordPress中的所有挂钩一样，这些要求我们定义这些挂钩，然后为它们定义自定义功能。 尽管您可以使用过程编程来做到这一点，但本教程将使用面向对象的编程来实现该功能。
2.功能
首先，我们将定义一个类，该类将具有一个since变量作为其实例数据。 此变量将代表将出现在用户界面中的输入字段的ID：
<?php
class TutsPlus_Custom_WooCommerce_Field {
private $textfield_id;
}接下来，我们将在类的构造函数中初始化此实例变量：
<?php
class TutsPlus_Custom_WooCommerce_Field {
private $textfield_id;
public function __construct() {
$this->textfield_id = 'tutsplus_text_field';
}
}至此，我们准备开始使用上面列出的钩子。 但是，为此，我们将添加一个初始化函数，该函数将向该钩子注册两个自定义函数。
在以下两节中，我们将确切地了解如何实现自定义功能。
1.添加文本输入字段
首先，我们要添加一个挂钩到woocommerce_product_options_grouping的函数。 在上一节中定义的init函数中，我们将执行此操作。
<?php
class TutsPlus_Custom_WooCommerce_Field {
private $textfield_id;
public function __construct() {
$this->textfield_id = 'tutsplus_text_field';
}
public function init() {
add_action(
'woocommerce_product_options_grouping',
array( $this, 'product_options_grouping' )
);
}
public function product_options_grouping() {
}
} 注意，我已将函数命名为product_options_grouping 。 我发现这样做使代码更易于阅读。 尽管该功能本身可能不能很好地描述该功能的作用，但它本身与相应的挂钩相关。
接下来，我们需要实现该功能。 为此，我们需要一些信息：
- 我们需要一个ID，用于唯一地标识文本字段。 我们将在构造函数中使用实例数据集。
- 标签将用于对输入字段进行一些描述。
- 我们可以选择指定一个占位符，就我们的示例而言，我们将。
- 当用户将鼠标悬停在图标上时，可以选择显示工具提示。
- 并且我们有一个描述选项，我们将使用该描述来填充工具提示的文本。
以上所有信息都将设置为关联数组，然后将其传递给woocommerce_wp_text_input 。 这是WooCommerce API函数，旨在输出带有上述参数的文本元素。
<?php
class TutsPlus_Custom_WooCommerce_Field {
private $textfield_id;
public function __construct() {
$this->textfield_id = 'tutsplus_text_field';
}
public function init() {
add_action(
'woocommerce_product_options_grouping',
array( $this, 'product_options_grouping' )
);
}
public function product_options_grouping() {
$description = sanitize_text_field( 'Enter a description that will be displayed for those who are viewing the product.' );
$placeholder = sanitize_text_field( 'Tease your product with a short description.' );
$args = array(
'id' => $this->textfield_id,
'label' => sanitize_text_field( 'Product Teaser' ),
'placeholder' => 'Tease your product with a short description',
'desc_tip' => true,
'description' => $description,
);
woocommerce_wp_text_input( $args );
}
}至此，我们已经完成了插件的第一部分。 我们尚未编写使所有内容都运转起来的代码，并且尚未编写将信息保存到数据库的代码，所以现在让我们开始吧。
2.保存信息
接下来，将以下代码行添加到init方法中：
<?php
add_action(
'woocommerce_process_product_meta',
array( $this, 'add_custom_linked_field_save' )
); 之后，请确保添加add_custom_linked_field_save函数。
<?php
public function add_custom_linked_field_save( $post_id ) {
if ( ! ( isset( $_POST['woocommerce_meta_nonce'], $_POST[ $this->textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST['woocommerce_meta_nonce'] ), 'woocommerce_save_data' ) ) ) {
return false;
}
$product_teaser = sanitize_text_field(
wp_unslash( $_POST[ $this->textfield_id ] )
);
update_post_meta(
$post_id,
$this->textfield_id,
esc_attr( $product_teaser )
);
}在下一节中，我将讨论该功能的实现。
消毒数据
请注意，在上面的函数中，发生了三件事：
- 我们检查以确保存在几个现时值。 如果不是，则返回
false。 这是标准的安全预防措施。 通过专门查看WooCommerce在源代码中提供的内容来检测现时值。 - 清理
$_POST集合中与用户输入相对应的数据。 - 将信息保存到帖子元数据表中。
请注意，我们实际上并没有做任何事情来在前端呈现信息，因此没有调用get_post_meta 。 但是，这就是我们如何在前端呈现信息。
3.在前端显示预告片
为了在前端呈现信息，我们将需要一个类，该类将完成许多已经完成的工作。 具体来说，我们需要：
- 文本字段ID
- 在构造函数中初始化所述ID
- 一个初始化函数，用于将我们的自定义代码挂接到前端
- 呈现实际值
因为我们已经完成了设置，所以实际上并没有那么困难，因此我将在下面完整地讲授该类。 但是，对于跳转后设置此类的方式，我将发表一些评论：
<?php
class TutsPlus_Custom_WooCommerce_Display {
private $textfield_id;
public function __construct() {
$this->textfield_id = 'tutsplus_text_field';
}
public function init() {
add_action(
'woocommerce_product_thumbnails',
array( $this, 'product_thumbnails' )
);
}
public function product_thumbnails() {
$teaser = get_post_meta( get_the_ID(), $this->textfield_id, true );
if ( empty( $teaser ) ) {
return;
}
echo esc_html( $teaser );
}
}最终结果应该是这样的：
至此，我们有了一些冗余代码。 具体来说，公共类和管理类都使用textfield_ID并将其设置在其构造函数中。 这是一种代码味道，因为它违反了面向对象编程的整个DRY原理。
有许多方法可以减轻这种情况，例如在实例化类时将值传递给构造函数，使用简单的设计模式在两个类之间协调信息，等等。
在本教程随附的文件中，可以使用侧边栏中的链接下载该文件，您实际上将看到如何将值传递给构造函数以使其更易于管理。
其次，请注意，我正在使用woocommerce_product_thumbnails挂钩来帮助呈现信息。 WooCommerce提供了许多钩子，我只是从可用的钩子中选择了一个来进行渲染。 您可以随意浏览文档，以确定哪个挂钩最适合您的需求。
4.整合在一起
最后，我们要做的最后一件事是设置一个启动插件的启动文件。 我们在以前的许多教程中都做到了这一点，因此我不会花太多时间来讨论这一点。
这是我如何分解的代码：
<?php
/**
* The plugin bootstrap file
*
* This file is read by WordPress to generate the plugin information in the
* plugin admin area. This file also includes all of the dependencies used by
* the plugin, and defines a function that starts the plugin.
*
* @link https://code.tutsplus.com/tutorials/adding-custom-fields-to-simple-products-with-woocommerce--cms-27904
* @package CWF
*
* @wordpress-plugin
* Plugin Name: Tuts+ Custom WooCommerce Field
* Plugin URI: http://code.tutsplus.com/tutorials/adding-custom-fields-to-simple-products-with-woocommerce--cms-27904
* Description: Demonstrates how to add a custom field to a Simple Product.
* Version: 1.0.0
* Author: Tom McFarlin
* Author URI: https://tommcfarlin.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
defined( 'WPINC' ) || die;
include_once 'admin/class-tutsplus-custom-woocommerce-field.php';
include_once 'public/class-tutsplus-custom-woocommerce-display.php';
add_action( 'plugins_loaded', 'tutsplus_wc_input_start' );
/**
* Start the plugin.
*/
function tutsplus_wc_input_start() {
if ( is_admin() ) {
$admin = new TutsPlus_Custom_WooCommerce_Field( 'tutsplus_text_field' );
$admin->init();
} else {
$plugin = new TutsPlus_Custom_WooCommerce_Display( 'tutsplus_text_field' );
$plugin->init();
}
}请注意，我包括了依赖项，然后在函数触发后，检查是否显示了仪表板。 如果是这样，则将加载插件的适当部分；否则，将重新加载。 否则，将加载标准显示，您可以在产品页面上看到该显示。
结论
至此，我们已经介绍了本教程介绍中打算进行的所有操作：
不要忘记从此页面的侧边栏下载最终的工作演示。 这是侧边栏中的蓝色大按钮。 此外，如果您对WooCommerce感兴趣，请不要忘记查看我们的其他一些教程或我们市场上的一些商品。
像往常一样，如果您正在寻找其他与WordPress相关的材料，则可以在我的个人资料页面上找到我以前的所有教程，也可以在我的博客或Twitter 上关注我。
不要忘记在下面的Feed中留下任何问题或评论！