如果您想使用 Meta Box 创建自定义字段或设置页面而不安装它,还有另一种方法是将其捆绑到另一个插件中。

您可能想知道为什么我们需要这样做。这是因为当您为客户创建网站时,隐藏使用的插件等信息可能是个好主意。这一次,将 Meta Box 捆绑到另一个插件中将是一种有效的方法。

让我们看看怎么做。

将 Meta Box 捆绑到插件中

第 1 步:创建新插件

在wp-content文件夹 > plugin 中,创建一个名为project-demo的新文件夹,其中包含project-demo.php文件。 php文件有以下内容:

<?php/** * Plugin Name: Project Demo  * Plugin URI: https://metabox.io  * Version: 1.0 * Author: Meta Box * Author URI: https://metabox.io */

进入全屏模式 退出全屏模式

转到 Admin Dashboard 中的插件列表页面,您将看到一个名为 Project Demo 的新插件。让我们激活它。

第 2 步:将 Meta Box 捆绑到创建的插件中

我们必须将必要的 Meta Box 库下载到您创建的插件中。

在project-demo文件夹中,我们创建一个名为composer.json的文件,其内容如下:

{    "repositories":[        {            "type": "composer",            "url": "https://wpackagist.org"        }    ],    "require": {        "wpackagist-plugin/meta-box": "dev-trunk",    },    "extra": {        "installer-paths": {            "vendor/meta-box/meta-box": ["wpackagist-plugin/meta-box"],        }    },    "autoload": {        "files": [            "vendor/meta-box/meta-box/meta-box.php",        ]    }}

进入全屏模式 退出全屏模式

注意:通过此代码,我只是将Meta Box 插件(免费版)捆绑到我创建的插件中。如果您想添加其他 Meta Box 的扩展来创建高级自定义字段或设置页面,请查看这个文件。

捆绑其他扩展,尤其是高级扩展时,必须输入产品的许可证密钥(详细信息在这个文件)。

回到上面的代码,有几点我们需要注意:

• "require":这是您需要下载的库的声明。在这个例子中,我只声明了 Meta Box 库。您可以参考其他代码在此处声明扩展的库。

• "extra":这是声明我们要存储库的路径。

• "autoload":需要在我们激活插件时自动加载库。

接下来,在project-demo文件夹中运行 composer install 命令(确保已安装 Composer)。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--X_2YGruT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880 /https://cdn-images-1.medium.com/max/600/0%2AgskEDxqwQY6yJjfv.png)

之后,project-demo文件夹会包含这些文件夹和文件,如下:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--UhhPbJ0B--/c_limit%2Cf_auto%2Cfl_progressive %2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/600/0%2Avfm7H5g3udfHeYnE.png)

最后,您必须在project-demo.php文件中运行以下代码来下载您声明的库:

require 'vendor/autoload.php';

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--2PXojZ-f--/c_limit%2Cf_auto% 2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/600/0%2AkfxGESBrp8YDVOgp.png)

如果您不熟悉使用 Composer 安装 Meta Box,可以在此处了解。

现在,您已经完成了将 Meta Box 捆绑到另一个插件中。因此,从现在开始,您可以尝试使用这个新插件创建自定义字段。

通过新插件创建自定义帖子类型和自定义字段

我将使用包含 Meta Box 的已创建插件来创建一个名为Project的新自定义帖子类型。然后,我将为该帖子类型创建一个自定义字段。

实际上,这个过程与您直接在网站上安装 Meta Box 非常相似。唯一的区别是,如果您没有像我一样将提供 UI 的扩展(例如Meta Box Builder,MB Custom Post Type,MB Custom Taxonomy)捆绑到插件中,您必须编写代码手动。同时,不要将代码写入function.php文件,而必须在创建的插件 (project-demo.php) 的 .php 文件中进行。

按照以下步骤并与文章“如何使用 Meta Box 插件创建产品页面”进行比较,您会看到这一点。

第 1 步:创建新的自定义帖子类型

将以下代码添加到project-demo.php文件中:

// Create a new post typefunction frefix_register_post_type_project(){    $label = array(        'name'                => 'Projects',        'singular_name' => 'Project',    );

进入全屏模式 退出全屏模式

    $args = array(        'labels'               => $label,        'description'       => 'Post type Project',        'supports'          => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments', 'revisions' ),        'rewrite'           => array(            'slug'           => 'project',            'with_front'  => false,            'feeds'         => true,            pages'         => true,        ),        'public'                          => true,        'show_ui'                      => true,        'menu_position'            => 20,        'capability_type'           => 'page',        'map_meta_cap'          => true,        'has_archive'                => true,        'query_var'                   => 'project',        'show_in_rest'              => true,        'show_in_menu'           => true,        'show_in_nav_menus' => true,    );    register_post_type( 'project', $args );}add_action( 'init', 'frefix_register_post_type_project' );

进入全屏模式 退出全屏模式

返回 Admin Dashboard,您将看到一个名为Projects的新菜单。这是您创建的自定义帖子类型。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7TrC9_Vq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/ https://cdn-images-1.medium.com/max/600/0%2AV05bUY9BZ6DA9vgd.png)

第 2 步:为新帖子类型创建自定义字段

要创建自定义字段,有 2 个选项供您选择:手动编码或使用Online Generator生成代码。然后,将此代码(如下例)复制并粘贴到project-demo.php文件中:

// Add custom fields for the Project post typefunction prefix_add_fields_project( $meta_boxes) {    $meta_boxes[] = [        'title'             => 'Information project',        'post_types' => 'project',        'fields'          => [            [                'id'       => 'investors',                'name' => 'Investors',            ],            [                'id'       => 'customer',                'name' => 'Customer',            ],            [                'id'       => 'description',                'name' => 'Description',                'type'   => 'textarea',            ],            [                'id'       => 'image',                'name' => 'Images',                'type'   => 'image_advanced',            ],        ],    ];    return  $meta_boxes;}add_filter( 'rwmb_meta_boxes', 'prefix_add_fields_project' );

进入全屏模式 退出全屏模式

现在,尝试创建/编辑一篇文章类型为Project的文章,字段将如下所示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qw_IAXfn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// cdn-images-1.medium.com/max/600/0%2Ax8hxoOzHH5JSQPZg.png)

第 3 步:在前端显示自定义字段的值

为项目帖子类型的单页创建模板

将以下代码添加到project-demo.php文件中:

// Register a new template for the single page of Project post typefunction prefix_project_template( $template ) {    if(  is_singular( 'project' )) {

进入全屏模式 退出全屏模式

        $new_template = plugin_dir_path( __FILE__ ) . 'project-template.php';

进入全屏模式 退出全屏模式

        if ( '' != $new_template ) {            return $new_template ;        }    }    return $template;}add_filter( 'template_include', 'prefix_project_template', 99 );

进入全屏模式 退出全屏模式

接下来,在project-demo文件夹中创建一个名为project-template.php的新文件(它必须具有我们上面声明的名称),其内容如下:

<?php get_header(); ?><div class="content">    <h3><a href="<?php  the_permalink() ?> " title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>    <p><span class="uabb-meta-date"> <?php echo get_the_date('d.m.Y'); ?> </p></h5></div><?php get_footer(); ?>

进入全屏模式 退出全屏模式

在创建的模板中显示自定义字段的值

将以下代码添加到模板文件(project-template.php)的内容中:

<div class="img-post">        <div>            <?php                 $images = rwmb_meta( 'image', array( 'size' => 'full' ) );                foreach ( $images as $image ) {                    echo '<img src="'. $image['url']. '">';                }            ?>        </div>    </div>    <div class="infomation">        <?php            $investors = rwmb_meta( 'investors', '', get_the_ID() );            $customer = rwmb_meta( 'customer', '', get_the_ID() );            $description = rwmb_meta( 'description', '', get_the_ID() );        ?>        <table>            <tr>                <td class="col-1">Investors</td>                <td><?php echo $investors; ?></td>            </tr>            <tr>                <td class="col-1">Customer</td>                <td><?php echo $customer; ?></td>            </tr>            <tr>                <td class="col-1">Description</td>                <td><?php echo $description; ?></td>            </tr>        </table>    </div>

进入全屏模式 退出全屏模式

此时,在Project帖子类型的单篇帖子页面中,内容会显示如下:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--z3TkkeMn--/c_limit% 2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/600/0%2AzVTHOUwBKtqvc5K9.png)

字段及其值不能很好地显示,因此我们需要对其进行一些样式设置。

使用 CSS 设置字段显示样式

我在project-demo文件夹中再创建一个名为style.css的文件。然后,我将它排入project-demo.php文件,如下所示:

function prefix_project_styles() {    wp_register_style( 'prefix_main-style', plugin_dir_url( __FILE__ ) . '/style.css', 'all' );    wp_enqueue_style( 'prefix_main-style' );}add_action( 'wp_enqueue_scripts', 'prefix_project_styles' );

进入全屏模式 退出全屏模式

project-demo文件夹的结构是这样的:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7jjwMRIo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://cdn-images-1.medium.com/max/600/0%2AvvLQcZHaX12q6ybi.png)

根据您想要显示自定义字段的方式,将相应的代码添加到style.css文件中。例如:

.information table, td{    border: 1px solid black;}

进入全屏模式 退出全屏模式

img {    display: inline-block!important;    height: auto;    max-width: 200px!important;    margin-right: 15px!important;    margin-bottom: 20px;}

进入全屏模式 退出全屏模式

.content {    width: 800px;    margin: 0 auto;}

进入全屏模式 退出全屏模式

.col-1 {    width: 30%;}

进入全屏模式 退出全屏模式

之后,字段的值将显示如下:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KNH3dAcR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://cdn-images-1.medium.com/max/600/0%2AakxCKlvjVtaAAFcc.png)

所以你已经完成了创建一个新的自定义帖子类型和自定义字段,然后通过包含 Meta Box 的新插件将它们显示到前端。

您可以在此处参考我在本文中使用的整个源代码:

https://github.com/wpmetabox/tutorials/tree/master/plugin-bundle-metabox

遗言

希望您有另一种方法可以将 Meta Box 用于您的WordPress 主题或在客户的网站上,您不必在 Admin Dashboard 中安装或显示 Meta Box 菜单。如果您有任何疑问,请发表评论。最后,请记得关注我们即将发布的文章,以深入了解开发中的高级技术。

--- --- ---

该出版物位于Meta Box。