如何创建自定义 WordPress 插件

已发表: 2022-02-24

寻找创建自定义 WordPress 插件的方法？在本教程中，我们将向您展示如何从头开始构建一个 WP 插件，该插件将允许您从 WooCommerce 产品页面中删除一些元素。

在我们完成这个过程之前，让我们先看看为什么您可能需要先创建一个自定义 WordPress 插件。

为什么要在 WordPress 中创建自定义插件？

我们都知道 WordPress 中有大量的免费和付费插件。所有这些都具有各种功能，以增加您网站的功能。但是，该插件的某些功能可能对您的网站来说是不必要的，并且可能会成为您框架的额外重量。

有时，您所需要的只是具有非常特定功能的工具。但是有些插件的附加功能太多了，以至于您无法充分发挥它们的潜力。在这些情况下，您可以创建自己的自定义 WordPress 插件。

例如，假设您想使用专用插件删除产品页面或任何其他 WooCommerce 页面上的元素。除了删除元素之外，大多数插件都会为您提供更多附加功能。这将增加插件大小以及网站存储空间，这也会影响您的网站性能。

当然，您也可以使用 CSS 脚本或 WooCommerce 挂钩来删除元素。但是，如果您在没有正确执行的情况下更新 WordPress 主题，它们可能会给您的网站带来一些问题。但是，如果您创建自定义插件，则修改在任何情况下都不太可能妨碍您的网站。

如何创建自定义 WordPress 插件？

创建自定义 WordPress 插件的整个过程比您想象的要容易得多。但是，让我们从创建自定义插件之前应该记住的几件事开始。

1. 准备开始

创建自定义 WordPress 插件需要满足许多要求。他们是：

在 localhost 服务器上安装 WordPress

虽然您可以在实时服务器上开发插件，但在网站在线时这样做是一种非常糟糕的做法。如果您对网站进行任何不必要的更改，它可能会遇到一些严重的问题。因此，为了防止它们，如果您还没有自定义 WordPress 插件，您将需要设置一个 localhost 测试环境来创建自定义 WordPress 插件。

使用代码编辑器

WordPress 带有一个内置的插件编辑器，可以为您的插件添加和修改代码。您也可以使用它来创建自定义 WordPress。但我们建议使用代码编辑器 (IDE)，例如 Sublime Text、Visual Studio Code 或任何类似的编辑器。

他们具有构建自定义插件所需的多种工具和功能。因此，使用 IDE 会更舒服，因为它们比使用 WP 代码编辑器要好得多。

一些基本的WP开发知识。

要创建自定义 WordPress 插件，我们将使用 WP 挂钩、PHP 函数，并且我们将定义自己的函数。因此，我们建议您仅在具备 WordPress 开发基本知识的情况下继续学习本教程。否则，您可能很难自己开发自定义插件。

这些是创建自定义插件所需的一些基本要求和资源。在继续本教程之前，请确保满足所有这些要求。

2. 为自定义 WordPress 插件创建主文件

创建自定义 WordPress 插件的第一步是创建插件的主文件。实际上，创建插件只需要一个主文件。它必须有一个带有插件名称的注释块。

这是 WP 要求的唯一值，因此它可以识别这是一个插件。但是，为了遵循良好实践并避免出现问题，我们需要在此处输入一些其他信息。

主文件创建自定义wordpress插件

所以让我们开始处理它并创建这个文件。

打开您的 localhost 公共文件夹并前往您将要进行的 WP 安装。然后，导航到“ wp-content/plugins ”文件夹，您将在那里看到所有已安装的插件

我们只是在这里添加新的自定义插件文件。

在 WP 安装的 wp-content/plugins 文件夹下创建一个新文件夹。为了便于理解，我们在本教程中将插件命名为QuadLayers_custom_products 。

插件名称

在此文件夹中，将找到所有插件文件。所以，让我们在刚刚创建的文件夹中创建我们的主文件。它应该是.php文件格式

主文件

这个主文件，我们命名为QuadLayers_cp.php ，一切从这里开始。它是插件的入口。您可以使用代码编辑器来创建该文件，但只需确保它具有 PHP 扩展名并且它已正确格式化为 PHP 文件。

将此代码复制并粘贴到文件中：

 <?php

/**
 * @link https://quadlayers.com/
 * @since 0.0.1
 * @package QuadLayers 定制产品
 * 插件名称：QuadLayers 定制产品  
 * 插件 URI：https://quadlayers.com/
 * 描述：通过移除元素自定义产品单页
 * 版本：0.0.1
 * 作者：QuadLayers
 * 文本域：qlcp
 */
 
if(!defined('ABSPATH')){die('-1');}

函数开始（）{ 		
        如果（is_admin（）==真）{
        需要 plugin_dir_path( __FILE__ ).'includes/Backend/QuadLayers-backend-init.php';
        }
        需要 plugin_dir_path( __FILE__ ).'includes/Frontend/QuadLayers-frontend-init.php';
 }  
函数运行（）{
    add_action('init','start');
}
运行（）;

如您所见，我们只是从这里调用了另外两个文件： QuadLayers-frontend-init.php和QuadLayers-backend-init.php 。显然，一个将在前端工作，另一个将分别在后端工作。你可以用他们的文件名清楚地推断出来。

其中，我们可以确保后端文件只能在后端工作，因为我们使用的是带有is_admin()函数的条件。这意味着只有当管理员在 WP 管理员仪表板上时才会触发它。

现在，您的网站上会出现一些错误，因为前端和后端文件都不存在。因此，让我们继续创建它们。

在名为includes的插件目录中创建一个新文件夹。然后，在其中添加另外两个文件夹： backend和frontend 。

为了摆脱错误的路径错误，请在每个文件夹中创建两个空文件： QuadLayers-backend-init.php在后端文件夹中， QuadLayers-frontend-init.php在前端文件夹中。

所以，这将是我们最终的插件文件结构：

 QuadLayers_custom_products
    __QuadLayers_cp.php
    __包括
       __后端
          __QuadLayers-backend-init.php
       __前端
          __QuadLayers-frontend-init.php

3. 后端选项

添加主文件后，我们可以开始添加插件的后端选项。在这里，我们将在 WP 管理仪表板上创建一个插件菜单选项卡。这将允许用户选择一些选项来隐藏或显示前端的元素。

我们将使用 WP 提供的设置 API 进行此演示。如果您还不理解这一点，请不要担心，因为它并不难学习，并且有大量关于它的文档。

如果您想了解更多信息，这里是 WP Settings API 的完整指南

现在，只需将以下代码复制并粘贴到QuadLayers-backend-init.php文件中

<?php 
add_action('admin_init', 'QuadLayers_display_options'); 
add_action('admin_menu', 'QuadLAyers_cp_AdminMenu'); 
函数 QuadLAyers_cp_AdminMenu(){ 
    add_menu_page( __('QuadLayers Custom Products', 'qlcp'), __('QuadLayers Custom Products', 'qlcp'), 'manage_options', 'qlcp', 'QuadLayersOptionsPage' ); 
} 
函数 QuadLayersOptionsPage() { 
    ?> <form action="options.php" method="post"> <?php 
    settings_fields('plugin_QL_Page'); 
    do_settings_sections('plugin_QL_Page'); 
    提交按钮（）； 
    </form><?php
}

函数 QuadLayers_display_options(){
        
    register_setting('plugin_QL_Page', 'qlcp_options', 'callbackValidation');

    add_settings_section(
        'QuadLayers_pluginPage_section',
        __('QuadLayers 后端选项', 'qlcp'),
        'QuadLayersSettingsSectionCallback',
        'plugin_QL_Page'
    );
    添加设置字段（
        'QuadLayers_checkbox_field_1',
        esc_attr__('标题', 'qlcp'),
       'QuadLayersCheckboxRender_1',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    添加设置字段（
        'QuadLayers_checkbox_field_2',
        esc_attr__('数量', 'qlcp'),
       'QuadLayersCheckboxRender_2',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    添加设置字段（
        'QuadLayers_checkbox_field_3',
        esc_attr__('SKU', 'qlcp'),
       'QuadLayersCheckboxRender_3',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    添加设置字段（
        'QuadLayers_checkbox_field_4',
        esc_attr__('Meta', 'qlcp'),
       'QuadLayersCheckboxRender_4',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    添加设置字段（
        'QuadLayers_checkbox_field_5',
        esc_attr__('描述标签', 'qlcp'),
       'QuadLayersCheckboxRender_5',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    添加设置字段（
        'QuadLayers_checkbox_field_6',
        esc_attr__('价格', 'qlcp'),
       'QuadLayersCheckboxRender_6',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
}

函数 QuadLayersSettingsSectionCallback(){
    echo wp_kses_post('QuadLAyers 自定义插件的设置页面');
}

函数 QuadLayersCheckboxRender_1(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_1]" type="checkbox" /> 
    检查 <?php } ?>value = "1">    
}

函数 QuadLayersCheckboxRender_2(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_2]" type="checkbox" /> 
    检查 <?php } ?>value = "1">    
}

函数 QuadLayersCheckboxRender_3(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_3]" type="checkbox" /> 
    检查 <?php } ?>value = "1">    
}

函数 QuadLayersCheckboxRender_4(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_4]" type="checkbox" /> 
    检查 <?php } ?>value = "1">    
}

函数 QuadLayersCheckboxRender_5(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_5]" type="checkbox" /> 
    检查 <?php } ?>value = "1">    
}

函数 QuadLayersCheckboxRender_6(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_6]" type="checkbox" /> 
    检查 <?php } ?>value = "1">    
}

现在，重新加载后端屏幕或激活您的插件，您将在仪表板菜单侧边栏上看到一个新选项卡。

创建自定义 wordpress 插件管理后端

WP 设置 API 将在wp_options数据库表中存储一个包含所有这些选项的数组。您可以通过在本地主机上打开 PHPMyAdmin 并在表格中搜索来检查它。

因为这是新创建的数据，所以应该在表的末尾找到

qlcp 选项数据库

当然，上面截图中数据库中的qlcp_options数组是空的。这是因为此时所有复选框都未选中。您可以尝试检查其中一些并返回 PHPMyAdmin 以查看 WP 设置 API 如何存储数据。

qlcp 选项测试
现在我们可以将选项数组存储在数据库中，我们需要获取这些选项并在前端使用它们。这些选项将允许用户隐藏或显示您网站的各种元素。

4. 前端选项

要添加前端选项，只需将以下代码复制并粘贴到QuadLayers-frontend-init.php文件中。

这将从数据库中获取数据，这些数据由后端文件存储在一个数组中。

在此之后，它将隐藏产品页面的特定元素，基于选项数组上的哪些选项为真。

 <?php

$options = get_option('qlcp_options');

if(!is_string($options)):
    // 标题
    if(isset($options['QuadLayers_checkbox_field_1'])){       
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    }

    // 数量
    if(isset($options['QuadLayers_checkbox_field_2'])){        
        add_filter('woocommerce_is_sold_individually',
            函数 ($return, $product) {
                返回真；
            }, 10, 2 
        );
    }

    // SKU
    if(isset($options['QuadLayers_checkbox_field_3'])){        
        add_filter('wc_product_sku_enabled', 
            功能（$启用）{          
                返回$启用；
            } 
    );
    }
    
    // 元
    if(isset($options['QuadLayers_checkbox_field_4'])){
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
    }
    
    // 描述选项卡
    if(isset($options['QuadLayers_checkbox_field_5'])){
        add_filter('woocommerce_product_tabs', 
        功能（$标签）{
            未设置（$tabs['description']）；
            返回$标签；
            }, 11 
        );         
    }

    // 价格
    if(isset($options['QuadLayers_checkbox_field_6'])){
        add_filter('woocommerce_get_price_html', 
        功能（$价格）{         
            返回 ;
            }
        );        
    }
万一;

我们将所有代码包含在if(is_string($options))条件中。因此，我们可以检查是否没有选中的复选框，在这种情况下，数据库值将是一个字符串。然后，我们根本不需要运行这段代码。

另外，请注意我们使用的是匿名函数。它的工作原理与命名函数完全相同。但是我们只是为这个适合初学者的指南制作了一个更简短的代码。

因此，如果数据库中存储了一些值，则此代码的每个函数都将根据存在的数据库数组的特定索引删除特定元素。

作为初学者，了解我们如何与数据库交互对您来说很重要。我们的两个文件与之交互，但这些文件之间无论如何都没有连接。您甚至可以删除一个文件，而另一个文件仍然可以工作，因为数据库仍然具有所需的值。

就这样。此时，您应该能够创建一个自定义 WordPress 插件来选择在产品页面上隐藏或显示哪些元素。

后端

后端自定义 wordpress 插件

前端

前端自定义wordpress插件

结论

这是我们关于如何创建自定义 WordPress 插件的指南。如果您想为您的网站提供非常具体的功能并且不想让您的网站因专用 WP 插件的压倒性功能而混乱，自定义插件非常有用。

总而言之，这些是创建自定义插件的主要步骤：

创建主插件文件
添加后端选项
添加前端选项

主插件文件本身应包含自定义插件的后端和前端文件。然后，您可以进一步添加插件的后端选项，然后是其前端选项。我们创建了一个自定义插件来隐藏产品页面的元素。但是，您可以进一步修改这些文件以创建具有您需要的特定功能的插件。

尽管如此，如果您仍想使用专用插件，您也可以这样做。但是对于付费插件，您必须手动安装插件。您甚至可以使用 WooCommerce Direct Checkout 和 WooCommerce Checkout Manager 等插件来隐藏结帐页面等其他页面中的元素。

同时，这里还有一些您可能感兴趣的帖子：

最佳 WooCommerce 结帐插件
如何创建 WooCommerce 直接结帐链接
自动完成 WooCommerce 订单的最佳插件

我们希望您现在可以在 WooCommerce 中开发自定义插件而不会出现任何问题。请在评论中与我们分享您的经验。