通过我的WordPress插件以编程方式修改WordPress站点的管理页面用户界面

时间:2021-03-19 作者:Pavindu

我正在尝试开发一个WordPress插件,它可以修改WordPress站点管理面板中页面的UI。具体来说,我想从我的WP插件向woocommerce编辑产品页面添加一个自定义表单。

我浏览了很多资料,但几乎所有的事情都是在外部插件的帮助下完成的,或者以某种方式修改主题,但我想通过我自己的WordPress插件来完成。

由于我是WordPress插件的绝对初学者,我想不出怎么做。如果有人能为我指出正确的方向,我将不胜感激。提前谢谢。

1 个回复
SO网友:Nour Edin Al-Habal

我想你要找的是custom meta box 这是一种自定义HTML,您可以在Wordpress的特定管理屏幕中无缝插入。

您可以在上面的文档链接中找到所需的所有信息,但我将提供一些快速编写的代码片段,以帮助您开始。

第0步-首先创建插件。到create a custom plugin, 您需要创建一个新的PHP文件,例如:pavindu_hello_world.php 并(可选)将其放在同名目录中。

PHP文件has to start with 此PHP注释:

<?php 

/*
 * Plugin Name: Pavindu Hello World!  
 */
这个注释(又名插件标题)基本上设置了与插件相关的信息,您可以在插件列表管理页面中看到这些信息。

就在标题之后,添加您的代码,以便在Wordpress站点中执行您想要的任何操作。请注意,此文件类似于functions.php 主题的文件。几乎任何你在网上找到的内部有效的片段functions.php 也将在这个插件文件中工作(除了少数例外)。

步骤1-metabox的HTML内容接下来需要编写一个新函数来输出HTML。我们将在步骤2中使用此函数。现在,我们假设函数的第一个参数中有当前乘积作为WP\\u Post对象。

此功能可以简单到:

function pavindu_hello_world_metabox_html( $product ) {
    echo "Hello World<br/>";
}
第2步-在产品页面中显示Metabox现在剩下的就是在页面中显示HTML。在这里,您需要钩住Wordpress操作。你可以read this page 如果您不熟悉Wordpress挂钩。从那一页我引述:

动作是两种挂钩类型之一。它们提供了一种在WordPress核心、插件和主题执行的特定点上运行函数的方法。

我们要做的是add_meta_boxes. 我们还将调用Wordpress核心函数add_meta_box() 这将实际正确显示元盒。您可以查看该函数的一些有用选项。

以下是您需要添加的代码:

function pavindu_hello_world_metabox_init($type) {
    if ($type == \'product\') {
        add_meta_box(
            \'pavindu_custom_metabox\',      // Unique ID
            \'Pavindu Custom Metabox\',      // Box title
            \'pavindu_hello_world_metabox_html\',  // The function you added in Step 1
        );
    }
}
add_action( \'add_meta_boxes\', \'pavindu_hello_world_metabox_init\' );
就这样!现在将您的插件目录上传到wp内容/插件,激活它,然后转到任何产品编辑页面,您应该会在那里看到新的HTML。

步骤3-添加自定义表单好的,这有点棘手。我之前说过,您可以在pavindu_hello_world_metabox_html() 作用但是,老实说,你shouldn\'t 只需添加普通HTML<form> 这里有一个提交按钮,可以像处理普通表单一样处理它。永远不要这样做,那会破坏编辑页面的更大形式。

相反,您应该做的是只添加要添加的新字段,without 这个<form> 标记和without “提交”按钮。然后,在另一个操作中,您可以捕获保存产品时发送的字段数据。

下面是经过一些修改后的插件代码。我添加了一个文本字段,用于将元字段保存到产品中,并显示它是否有值。

<?php
/*
 *  Plugin Name: Simple Custom Products Form
 */
 
function pavindu_simple_custom_metabox_html( $product ) {
    $url = get_post_meta($product->ID, \'pavindu_custom_external_url\', true);
    
    ?>
    <label for="pavindu-external-url">External Url</label>
    <input type="text" name="pavindu-external-url" id="pavindu-external-url" value="<?=$url?>"/>    
    <?php
} 

function pavindu_simple_custom_metabox( $type ) {
    if ($type == \'product\') {
        add_meta_box(
            \'pavindu_simple_custom_metabox_id\',
            \'Simple Custom Metabox\',
            \'pavindu_simple_custom_metabox_html\'
        );
    }
}
add_action(\'add_meta_boxes\', \'pavindu_simple_custom_metabox\');

function pavindu_save_product( $product_id, $product ) {
    if ($product->post_type == \'product\') {
        if ( array_key_exists( \'pavindu-external-url\', $_POST ) ) {
            update_post_meta(
                $product_id,
                \'pavindu_custom_external_url\',
                $_POST[\'pavindu-external-url\']
            );
        }
    }
    
}
add_action( \'save_post\', \'pavindu_save_product\' , 10, 2);