Plugins WP Visual composer – Le constructeur de page

Utilisation du plugin :

Visual composer est un outil de mise en forme de pages et d'articles, en ajoutant des modèles de texte en 2 colonnes ou trois, en mettant des accordéons, galerie d'images, ....
Il existe plusieurs fonctionnalités livrées avec ce package qu'on peut enrichir directement sur  le site officiel. Parmi les autres constructeurs de page (MotoPress, Elegant Builder,...)  c'est le plus populaire  dans la communauté WP .

visual-composer1

Ses atouts:

  • Gain de temps pour la mise en forme de vos pages,
  • Permet de créer une page complexes en quelques minutes,
  • Interface totalement drag & drop,
  • Totalement responsive, votre contenu sera aussi bien adapté sur PC, tablettes et mobiles,
  • Vendu seulement aux alentours de 20 Euros,
  • Plusieurs extensions possible en développement VC addons 

Compatibilités :

WordPress 4.0 et supérieure

Installation :

Cliquer ici

Custom extension :

Parfois, les composants du VC ne recouvrent pas forcément les besoins du client, mais il est possible de modéliser un template spécifique qui peut recouvrir ces besoins :

  • Soit par une création  d'un class (pour un travail propre):

1 -Functions à mettre dans functions.php  de WP

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
     
    //.. Code from other Tutorials ..//
 
    // Require new custom Element
    require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); 
     
}
à mettre dans functions.php

2 -La class à créer

/*
Element Description: VC Info Box
*/
 
// Element Class 
class vcInfoBox extends WPBakeryShortCode {
     
    // Element Init
    function __construct() {
        //create new element in Back office
        add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
        //create to element in Front Office
        add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
    }
     
    // Element Mapping
    public function vc_infobox_mapping() {
         
        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }
         
        // Map the block with vc_map()
        vc_map( 
            array(
                'name' => __('VC Infobox', 'text-domain'),
                'base' => 'vc_infobox',
                'description' => __('Another simple VC box', 'text-domain'), 
                'category' => __('My Custom Elements', 'text-domain'),   
                'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',            
                'params' => array(   
                         
                    array(
                        'type' => 'textfield',
                        'holder' => 'h3',
                        'class' => 'title-class',
                        'heading' => __( 'Title', 'text-domain' ),
                        'param_name' => 'title',
                        'value' => __( 'Default value', 'text-domain' ),
                        'description' => __( 'Box Title', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),  
                     
                    array(
                        'type' => 'textarea',
                        'holder' => 'div',
                        'class' => 'text-class',
                        'heading' => __( 'Text', 'text-domain' ),
                        'param_name' => 'text',
                        'value' => __( 'Default value', 'text-domain' ),
                        'description' => __( 'Box Text', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),                      
                        
                ),
            )
        );                                
        
    }
     
     
    // Element HTML
    public function vc_infobox_html( $atts ) {
         
        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'title'   => '',
                    'text' => '',
                ), 
                $atts
            )
        );
         
        // Fill $html var with data
        $html = '
        <div class="vc-infobox-wrap">
         
            <h2 class="vc-infobox-title">' . $title . '</h2>
             
            <div class="vc-infobox-text">' . $text . '</div>
         
        </div>';      
         
        return $html;
         
    }
     
} // End Element Class
 
 
// Element Class Init
new vcInfoBox();
my-first-custom-element.php

Explication des arguments API vc_map() dans la fonction "vc_infobox_mapping" :

  • "name"  (string) Nom de votre élément
  •  "base"  (string) identifiant Tag shortcode
  •  "description"  (string) Description de l'élément  créer
  •  "category"  (string) Catégorisation de votre élément  pour qu'on ne puisse pas chercher dans les autres catégories
  •  "icon"  (string) emplacement de l' icone pour votre élément 
  •  "params"  (string) listes des attributs de l’élément créer ( attributs shortcodes )
    • "type" (string) le type de champ de l'élément (textarea_html(WYSIWYG),  textfield, textarea, dropdown(menu deroulant), attach_image, colorpicker, posttypes,.... )  
    • "holder"  (string) balise HTML qui sera affichée dans l’éditeur  de texte en mode VC
    • "class"  (string) nom de classe utile si vous souhaitez cibler certaines règles css à des éléments spécifiques dans l'interface BO
    • "heading"  (string) titre affiché comme label de ce champ
    • "param_name"  (string) nom paramètre du champ (nom systeme)
    • "value" (array ou string) valeur par défaut du champ
    • "weight" (int) ordre de placement des champs
    • "group"  (string) utilisé  pour diviser vos champs au sein des groupes (onglets)

Pour plus d'information, vous pouvez voir ici

la fonction  "vc_infobox_html" :

C'est la fonction d'affichage du shortcode en front office avec "$atts" les variables associées a l'élément créer.

  • soit directement dans la functions.php (avec le plugin activé) :
add_action( 'vc_before_init', 'vc_infobox_mapping' );
function vc_infobox_mapping(){
     // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
         
    // Map the block with vc_map()
    vc_map( 
  
        array(
            'name' => __('VC Infobox', 'text-domain'),
            'base' => 'vc_infobox',
            'description' => __('Another simple VC box', 'text-domain'), 
            'category' => __('My Custom Elements', 'text-domain'),   
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',            
            'params' => array(   
                      
                array(
                    'type' => 'textfield',
                    'holder' => 'h3',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),  
                  
                array(
                    'type' => 'textarea',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Text', 'text-domain' ),
                    'param_name' => 'text',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                )                   
                     
            )
        )
    );       
}

add_shortcode("vc_infobox", "vc_infobox_html");
function vc_infobox_html( $atts ){
    // Params extraction
    extract(
        shortcode_atts(
            array(
                'title'   => '',
                'text' => '',
            ), 
            $atts
        )
    );
     
    // Fill $html var with data
    $html = '
    <div class="vc-infobox-wrap">
     
        <h2 class="vc-infobox-title">' . $title . '</h2>
         
        <div class="vc-infobox-text">' . $text . '</div>
     
    </div>';      
     
    return $html;
}
à mettre directement dans la functions.php

NB : après l'ajout du composant n'oubliez pas de l'activer  dans la page de configuration "rôle Manager" et aussi au niveau du style css du thème.

Les inconvénients rencontrés à la création du composant:

  • pas de validation propre au champ mais il faut ajouter manuellement (fichier js)
  • les répéteurs de champ ne sont pas limités, il faut en ajouter aussi

Documentation :

WPbakery Visual composer

 

Un commentaire

  1. Super article, ça m’a bien aidé,
    Visual composer est de plus en plus utilisé par la communauté, c’est un grand atout de WP.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.