如何在前端的视觉作曲家中显示新的自定义元框

Question

我已经为 visual composer 创建了一个自定义元框，它在管理部分工作正常

add_action( 'vc_before_init', 'custome_team_section_createWithVC' );


function custome_team_section_createWithVC() {
   vc_map( array(
      "name" => esc_html__( "Custome Team Box", "custome" ),
      "base" => "team_box",
      "category" => "Custome",
      "params" => array( 

        array(
            'type' => 'attach_image',
            'heading' => esc_html__( 'Member Image', 'custome' ),
            'param_name' => 'image_url',
            'description' => esc_html__( 'Add Member Image', 'custome' ),
        ),  

        array(
            "type" => "textfield",
            "heading" => esc_html__("Name", "custome"),
            "param_name" => "name",
            "description" => esc_html__("Add member name.", "custome"),
        "adm    in_label" => true,
        ),    

        array(
            "type" => "textfield",
            "heading" => esc_html__("Job", "custome"),
            "param_name" => "position",
            "description" => esc_html__("Add member position.", "custome"),
        ),

        array(
            "type" => "textarea",
            "heading" => esc_html__("About Member", "custome"),
            "param_name" => "contentm",
            "description" => esc_html__("Add content about the member.", "custome"),
        ),

        array(
            'type' => 'param_group',
            'heading' => esc_html__( 'Social', 'custome' ),
            'param_name' => 'social',
            'value' => urlencode( json_encode( array(
                array(
                    'title' => esc_html__( 'facebook', 'custome' )
                ),
            ) ) ),
            'group' => 'Social',
            'params' => array(
                array(
                    'type' => 'vc_link',
                    'heading' => esc_html__( 'URL (Link)', 'custome' ),
                    'param_name' => 'link',
                    'description' => esc_html__( 'Add a url for social box.', 'custome' ),
                ),  

                array(
                    'type' => 'iconpicker',
                    'heading' => esc_html__( 'Icon', 'custome' ),
                    'param_name' => 'icon_fontawesome',
                    'value' => 'fa fa-info-circle',
                    'settings' => array(
                        'emptyIcon' => false, // default true, display an "EMPTY" icon?
                        'iconsPerPage' => 200, // default 100, how many icons per/page to display
                    ),
                    'description' => esc_html__( 'Select icon from library.', 'custome' ),
                    'admin_label' => true,
                ),

            )
        ),

      ),
   ) );
}

但我不知道它将如何在前端显示内容我正在使用默认的 wordpress 主题 2017，当我在使用此元框创建页面后检查前端时，它显示默认的短代码，如 shownwn图片

我必须在 functions.php 或 page.php 中使用什么代码才能在前端正确显示自定义元框

谢谢

Answer 1

请不要将此称为 'custom meta box'，那是另外一回事，阅读 here。

您正在使用 vc_map() 将自定义 shortcode 添加到 WPBakery Page Builder（以前称为 Visual Composer），但您忘记注册短代码。这就是您在前端看到短代码的原因。 Page Builder 基本上是一个巨大的简码生成器。

vc_map()函数中的base，用于简码名称。

你的情况是 team_box。

像这样添加简码：

add_shortcode( 'team_box', 'team_box_callback' );
function team_box_callback( $atts ) {
  extract( shortcode_atts( array(
    'image_url' => 'image_url',
    'name' => 'name',
    // add your other field param_name here
  ), $atts ) );

  $your_html_shortcode_output = 'u can now use the shortcode attributes like normal params, like this: ' . $name;

  return $your_html_shortcode_output;
}

您可以找到有关 vc_map() here 的更多信息。

此致，比约恩

如何在前端的视觉作曲家中显示新的自定义元框

How to show new custom meta box in visual composer in front end

wordpress

themes

meta-boxes

visual-composer