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

时间:2018-06-10 06:39:59

标签: wordpress themes meta-boxes 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主题二十七,当我使用此元框创建页面后检查前端时,它显示默认的短代码为showwn in image < / p>

Make PHP socket_connect timeout

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

由于

1 个答案:

答案 0 :(得分:2)

请不要将此称为“自定义元框”,这是其他内容,请阅读here

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

base函数中的vc_map()用于短代码名称。

在你的情况下,它是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

的更多信息

问候,Bjorn