2

我正在尝试向 Visual Composer 添加一个新的字体图标集，尽管名称出现在下拉列表中；没有加载实际字体图标的下拉菜单，我无法弄清楚下面的代码有什么缺失或错误。

任何帮助将非常感激。

// Add new custom font to Font Family selection in icon box module
function reach_add_new_icon_set_to_iconbox( ) {
  $param = WPBMap::getParam( 'vc_icon', 'type' );
  $param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
  vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'init', 'reach_add_new_icon_set_to_iconbox', 40 );

function reach_add_font_picker() {
  vc_add_param( 'vc_icon', array(
      'type'       => 'iconpicker',
      'heading'    => esc_html__( 'Icon', 'reach-rdp' ),
      'param_name' => 'icons_reach_icons',
      'settings' => array(
          'emptyIcon'    => false,
          'type'         => 'reach_icons',
          'iconsPerPage' => 20,
  ),
      'dependency' => array(
      'element'    => 'icon_type',
      'value'      => 'reach_icons',
  ),
    'group' => esc_html__( 'Icon', 'reach-rdp' ),
  )
  );
}
add_filter( 'vc_after_init', 'reach_add_font_picker', 40 );

function reach_vc_iconpicker_type_reach_icons( $icons ) {
// Add custom icons to array
  $icons['Reach Icons'] = array(
    array( "icon-arrow-left" => "Arrow Left" ),
  );

// Return icons
  return $icons;
}
add_filter( 'vc_iconpicker-type-reach_icons', 'reach_vc_iconpicker_type_reach_icons' );


/**
 * Register Backend and Frontend CSS Styles
 */
add_action( 'vc_base_register_front_css', 'leadinjection_vc_iconpicker_base_register_css' );
add_action( 'vc_base_register_admin_css', 'leadinjection_vc_iconpicker_base_register_css' );
function leadinjection_vc_iconpicker_base_register_css(){
    wp_register_style('reach_icons', get_stylesheet_directory_uri() . '/assets/css/reach-font.css');
}

/**
 * Enqueue Backend and Frontend CSS Styles
 */
add_action( 'vc_backend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
function leadinjection_vc_iconpicker_editor_jscss(){
    wp_enqueue_style( 'reach_icons' );
}
4

2 回答 2

1

看起来你做的大部分事情都是正确的，你只需要替换：

add_filter('init....)

至：

add_action('vc_after_init',....)

更新：您的依赖项的参数名称也错误。它应该是：

'element'    => 'type',

而且我也会推荐使用 weight 属性来使排序更好：

function reach_add_new_icon_set_to_iconbox( ) {
    $param = WPBMap::getParam( 'vc_icon', 'type' );
    $param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
    $param['weight'] = 90;
    vc_update_shortcode_param( 'vc_icon', $param );
}

和

function reach_add_font_picker() {
    vc_add_param( 'vc_icon', array(
            'type'       => 'iconpicker',
            'heading'    => esc_html__( 'Icon', 'reach-rdp' ),
            'param_name' => 'icons_reach_icons',
            'settings' => array(
                'emptyIcon'    => false,
                'type'         => 'reach_icons',
                'iconsPerPage' => 20,
            ),
            'weight' => 80,
            'dependency' => array(
                'element'    => 'type',
                'value'      => 'reach_icons',
            ),
        )
    );
}
于 2017-01-28T18:19:35.207 回答
1

我需要实现完全相同的目标 - 尽管我添加的图标集是从 Font Awesome Pro 集中选择的图标。使用上面几乎可行的答案，这是我的完整版本。这是在 WPBakery 的 5.5.2 版本中测试和工作的。我希望这可以帮助别人！

// In the 'Icon library' dropdown for an icon content type, add a new family of icons.
function fapro_add_to_iconbox() {
    $param = WPBMap::getParam( 'vc_icon', 'type' );
    $param['value'][ __( 'FontAwesome Pro icons', 'js_composer' ) ] = 'fapro';

    vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'vc_after_init', 'fapro_add_to_iconbox', 40 );


// This adds a new parameter to the vc_icon content block.
// This parameter is an icon_picker element,
// that displays when fapro is picked from the dropdown.
function fapro_add_font_picker() {

    $settings = array(
        'type'        => 'iconpicker',
        'heading'     => __( 'Icon', 'js_composer' ),
        'param_name'  => 'icon_fapro',
        'settings'    => array(
            'emptyIcon'    => false,
            'type'         => 'fapro',
            'iconsPerPage' => 20,
        ),
        'dependency'  => array(
            'element' => 'type',
            'value'   => 'fapro',
        ),
        'weight'      => '1',
        'description' => __( 'Select icon from library.', 'js_composer' ),
    );

    vc_add_param( 'vc_icon', $settings );
}
add_filter( 'vc_after_init', 'fapro_add_font_picker', 50 );


// Add all the icons we want to display in our font family.
function vc_iconpicker_type_fapro( $icons ) {
    // Add custom icons to array.
    $fapro_icons = array(
        array( 'far fa-bacon' => 'Bacon' ),
        array( 'fas fa-hamburger' => 'Hamburger' ),
    );

    // Return icons.
    return $fapro_icons;
}
add_filter( 'vc_iconpicker-type-fapro', 'vc_iconpicker_type_fapro' );


// Enqueue the CSS file so that the icons display in the backend editor.
function enqueue_fapro_font() {
    wp_enqueue_style( 'agilechilli-font-awesome', 'https://pro.fontawesome.com/releases/v5.7.2/css/all.css' );
}
add_action( 'vc_backend_editor_enqueue_js_css', 'enqueue_fapro_font' );
于 2019-03-02T13:22:00.197 回答