php 将自定义图标字体添加到WPBakery页面构建器

Posted 2021-05-04

/* UPDATE THE SELECT DROPDOWN AND ADD YOUR FONT ICON TO IT */
add_filter( "vc_after_init", function(){

    $param = WPBMap::getParam( "vc_icon", "type" ); // get the vc_icon type param ... this is the select dropdown
    $param[ "value" ][ "Custom Name" ] = "customname"; // add your new font icon to the dropdown
    vc_update_shortcode_param( "vc_icon", $param ); // update vc_icon with your new font icon in the select dropdown

} );

/* ADD A FONT FIELD FOR YOUR NEW FONT ICON - WHERE YOU SELECT THE ACTUAL ICON */
add_filter( "vc_after_init", function(){

    vc_add_param( "vc_icon", array(
        'type' => 'iconpicker',
        'heading' => __( 'Icon', 'js_composer' ),
        'param_name' => 'icon_customname',
        'value' => 'icon icon-home', // default value to backend editor admin_label
        'settings' => array(
            'emptyIcon' => true,  // default true, display an "EMPTY" icon?
            'iconsPerPage' => 4000, // default 100, how many icons per/page to display, we use (big number) to display all icons in single page
            'type'  => "custoname" // need to add this so that it calls vc_iconpicker-type-customname ... if this isnt here it would call vc_iconpciker-type-fontawesome(yes really, annoying).
        ),
        'dependency' => array(
            'element' => 'type',
            'value' => 'customname', // tie this field back to the dropdown
        ),
        'description' => __( 'Select icon from library.', 'js_composer' ),
    ) );

} );

/* MAP THE ICON CLASSES TO HUMAN READABLE TITLES -> notice how the type in the settings array in vc_add_param is part of this filter name */
add_filter( "vc_iconpicker-type-customname", function( $icons ){
    // (output simple array ( key=> value ), where key = icon class, value = icon readable name ).

    $readable_icons = array(
        array( "icon class" => "readable title" ), // essentially you are mapping the font classes to titles
        array( "icon class"  => "readable title" ),
        ...
    );

    return array_merge( $icons, $readable_icons ); 
} );

/* LOAD THE FONT FILES FOR THE NEW ICON FONT */
add_action( "vc_backend_editor_enqueue_js_css", function() {

        wp_enqueue_style( "customname" );

} );

add_action( "vc_frontend_editor_enqueue_js_css", function() {

        wp_enqueue_style( "customname" );

} );

/* REGISTER THE FONT FILES FOR THE NEW ICON FONT */

add_action( 'vc_base_register_front_css',  function() {
    wp_register_style( "customname", get_stylesheet_directory_uri() . "/css/icons/fontfile.css" );
} );

add_action( 'vc_base_register_admin_css', function() {
    wp_register_style( "customname", get_stylesheet_directory_uri() . "/css/icons/font-file.css" );
}  );