首页 > 解决方案 > CMB2 灵活内容字段控件不起作用。帮我创建一个可重复的组并添加拖放控件

问题描述

我的任务是构建一个使用 CMB2 管理自定义字段的站点。

自然,我试图对其进行过度设计,因此这是一个简化的过程,因此一直在尝试利用此资源:https ://github.com/reaktivstudios/cmb2-flexible-content

我已经安装了 CMB2 WordPress 插件。

我已经提取、上传并启用了上面指定的 CMB2 扩展插件。

我现在正在尝试将其模块化构建到我的主题中,以便可以无缝地将其拖放到另一个网站。这是文件夹的结构:

文件夹结构

我现在将向您展示文件的内容,以及它们是如何连接的。

FC-FUNCTIONS.PHP - 这是创建一个可以在页面模板上调用以启动内容创建的函数:

function flexible_content() {
    require_once(get_stylesheet_directory().'/modules/flexible-content/flexible-content.php');
}

LAYOUTS.PHP - 此文件将包含所有字段组,按布局分组:

add_action( 'cmb2_admin_init', 'fc_register_flexible_content_cmb2_field' );
function fc_register_flexible_content_cmb2_field() {

    $prefix = '_fc_';

    // Basic CMB2 Metabox declaration
    $cmb = new_cmb2_box(
        array(
            'id'            => $prefix . 'flexible_content_types',
            'title'         => __( 'Flexible Content Types' ),
            'object_types'  => array( 'page', ),
        )
    );

    // Then add your flexible field definition. Each layout group should be defined in the layouts array, with the `ID` for that group as its key. Each layout group can contain a `title` and a list of CMB2 `fields`.

    $cmb->add_field(
        array(
            'name'          => __( 'Flexible Content', 'flexible_content' ),
            'desc'          => __( 'Add flexible content layouts', 'flexible_content' ),
            'id'            => $prefix . 'flexible_content',
            'type'          => 'flexible',
            'priority'      => 'high',
            'show_names'    => true,
            'options'       => array(
                'flexible_title'=> __( 'Row {#}', 'flexible_content' ),
                'add_button'    => __( 'Add Row', 'flexible_content' ),
                'remove_button' => __( 'Remove Row', 'flexible_content' ),
                'sortable'      => true,
            ),
            'layouts'       => array(
                'hero_banner'   => array(
                    'title'         => 'Hero Banners',
                    'type'          => 'group',
                    'description'   => __( 'Add slides into the hero banner', 'hero_banners' ),
                    'repeatable'    => true,
                    'options'       => array(
                        'group_title'   => __( 'Banners {#}', 'hero_banners' ),
                        'add_button'    => __( 'Add Another Banner', 'hero_banners' ),
                        'remove_button' => __( 'Remove Banner', 'hero_banners' ),
                        'sortable'      => true,
                    ),
                    'fields'        => array(
                        array(
                            'type'      => 'text',
                            'name'      => 'Heading',
                            'desc'      => 'Hero Slide Title',
                            'id'        => 'heading'
                        ),
                        array(
                            'type'      => 'textarea',
                            'name'      => 'Subheading',
                            'desc'      => 'Hero Slide Subheading Textarea',
                            'id'        => 'subheading'
                        ),
                        array(
                            'type'      => 'text',
                            'name'      => 'Hero Slide Link Text',
                            'id'        => 'link_text'
                        ),
                        array(
                            'type'      => 'text_url',
                            'name'      => 'Hero Slide Link URL',
                            'id'        => 'link_url'
                        )
                    )
                ),
                'fc_free_text'  => array(
                    'title'         => 'Text Group',
                    'fields'        => array(
                        array(
                            'type'      => 'text',
                            'name'      => 'Title text',
                            'id'        => $prefix . 'title',
                        ),
                        array(
                            'type'      => 'textarea',
                            'name'      => 'Description textarea',
                            'id'        => $prefix . 'description',
                        )
                    )
                ),
            )
        )
    );
}

FLEXIBLE-CONTENT.PHP - 这决定了在 WordPress 页面后端填充的 layouts.php 中声明的每个选定和填充字段要抓取的布局。

$prefix = '_fc_';
$flexible_fields = get_post_meta( get_the_ID(), $prefix . 'flexible_content', true );

if ($flexible_fields != '') {

    echo '<div class="fc-content">';

    foreach( $flexible_fields as $field ) {

        if ( 'fc_free_text' === $field['layout'] ) {

            // Free Text
            require('layouts/inc/templates/fc-free-text.php');

        }

    }

    echo '</div><!-- fc-content -->';

}

我面临的主要问题是按钮不会显示给我,向上/向下箭头和转发器组“添加另一个横幅”按钮。然而,我能够查看字段、添加/删除布局、填充内容并将其输出到前端。

请帮助我使 Hero Banner 组字段可重复并且每个布局都可拖放。

这是正在处理的其中一个页面的后端图像,您可以看到它们不可排序,并且没有选项(在创建中指定)在同一分组下重复和创建多个英雄横幅:

灵活的内容页面后端

标签: phpwordpresscustom-fieldscmb2

解决方案


推荐阅读