Share
Dans le précédent tutoriel, nous avons examiné Visual Composer pour les développeurs de thèmes; licences et configuration technique. Dans ce tutoriel, nous allons plus loin en développant Visual Composer et en le configurant pour construire des pages..
Avant de créer une page, voyons quelques-unes des fonctionnalités par défaut..
Visual Composer est livré avec une vaste gamme d’éléments de contenu intégrés. En plus de cela, Visual Composer propose plus de 200 add-ons gratuits et payants..
Par défaut, Visual Composer est activé uniquement pour les pages, mais vous pouvez également l'activer pour les publications et même les types de publication personnalisés. Ces options et bien d’autres peuvent être gérées à partir de Visual Composer Role Manager. Là, vous pouvez également contrôler qui peut utiliser Visual Composer dans votre administrateur..
Le Shortcode Manager vous permet d’ajouter des éléments personnalisés avec des paramètres. À certains égards, l’équivalent centré sur l’utilisateur de la méthode de développement pour mapper de nouveaux éléments.
Le constructeur de la grille est l’un des outils les plus attrayants pour les utilisateurs. Avec celui-ci, les utilisateurs peuvent créer n’importe quel type de grille, avec des images, du texte, des boutons, des publications, etc. sans toucher au code. Des grilles de type maçonnerie sont également disponibles.
Mmm GrillesLa bibliothèque de modèles permet aux utilisateurs d'accéder aux modèles professionnels pour la structure de page. Les exemples typiques incluent les mises en page d'articles, les pages de destination, les pages de parallaxe, les portefeuilles, etc. En tant que développeur, vous pouvez même créer le vôtre et l'inclure dans le contenu de démonstration de votre thème..
Enfin, nous atteignons ce qui est sans doute la partie la plus importante de Visual Composer: l'éditeur. C'est un back-end et un éditeur frontal, avec lequel les utilisateurs peuvent créer des pages sans connaissances en programmation.
Editeur de back-end de Visual Composer
Editeur frontal de Visual ComposerAvec l'éditeur frontal, vous éditez exactement ce que vous voyez. C'est certainement plus Ce que vous voyez est ce que vous obtenez que l'éditeur WordPress WYSIWYG par défaut!
Le générateur de page fonctionne avec un système de lignes et de colonnes. Chaque élément ajouté à la page est placé dans un conteneur de lignes. Plusieurs éléments peuvent être ajoutés à la même ligne, dans des colonnes ou d'autres lignes imbriquées. La capture d'écran ci-dessous montre comment les éléments, les rangées, les colonnes peuvent être ajoutés, modifiés et supprimés..
Après avoir couvert les fonctionnalités de base disponibles, ne nous attardons pas sur certains développements. Nous allons étendre les fonctionnalités par défaut de Visual Composer et ajouter de nouveaux éléments personnalisés.
Pour remplacer tout élément de Visual Composer, vous devez d’abord copier le fichier de modèle à partir du dossier du plugin Visual Composer. (js_composer)> include> templates au yourtheme> vc_templates dossier. Dans le didacticiel précédent, vous vous souviendrez que dans notre thème Focuson, nous avons quatre fichiers:
Et comme nous en avons discuté, nommer est très important ici. Ces modèles doivent être nommés exactement comme ils sont dans le dossier du plugin VC par défaut.
Après avoir dupliqué le fichier de modèle, vous êtes prêt à l'écraser. Voyons, par exemple, le contenu du premier fichier vc_columns.php. Si vous connaissez la création de codes courts, il n'y aura rien de nouveau pour vous ici.
La structure de fichier peut être divisée en trois parties:
Mais que se passe-t-il si vous souhaitez ajouter ou supprimer des attributs de code court existants, comment vous y prendrez-vous? Répondre à trois nouvelles fonctions:
Cette fonction supprime le paramètre shortcode d'un élément existant ou personnalisé. Pour supprimer l'attribut, ciblez le shortcode spécifique avec le nom, par exemple vc_column et le nom de l'attribut, par exemple el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Cette fonction ajoute de nouveaux paramètres à un élément existant ou personnalisé. Comme avec le vc_remove_param () fonction, cible le shortcode spécifique avec son nom, par exemple vc_column et incluez le tableau de paramètres:
vc_add_param ('vc_column', array ("type" => "menu déroulant", "class" => "", "heading" => "Animate", "param_name" => "animate", "value" => array ( "False" => 'false', "True" => 'true')));Cette fonction est similaire à vc_add_param (), mais cela vous permet d'ajouter plusieurs paramètres à un élément. Vous pouvez trouver une liste de tous les types de paramètres ici.
Pour ajouter ou supprimer de nouveaux paramètres, ainsi que pour ajouter de nouveaux éléments, vous devez modifier le fichier d'intégration, qui dans notre cas est ninzio_vc.php..
vc_remove_param (); vc_add_param (); ou vc_add_params (); les fonctions.L'ajout de nouveaux éléments de contenu à Visual Composer survient lorsqu'un fichier de codes courts est présent dans votre thème ou dans votre additif de thème, comme dans notre cas. Nous devons donc d'abord vérifier avec la fonction si notre plug-in ninzio-addons est installé et actif:
if (defini ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) … le nouveau code des éléments va ici…Comment Visual Composer comprend-il que de nouveaux éléments ont été ajoutés? Avec add_action ();.
add_action ('init', 'focuson_ninzio_integrateVC'); function focuson_ninzio_integrateVC () … nouveaux élémentsNous allons utiliser l'action init, nous donnant ceci:
if (defini ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/ plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); function focuson_ninzio_integrateVC () … nouveaux élémentsNous sommes maintenant prêts à ajouter nos nouveaux éléments, pour lesquels nous avons besoin d'une autre nouvelle fonction:
Cette fonction nécessite un paramètre: un tableau d'attributs spéciaux décrivant votre shortcode. A titre d'exemple, nous allons ajouter un élément de séparation personnalisé:
"Séparateur", 'base' => "nz_sep", 'class' => 'nz-sep', 'show_settings_on_create' => false, 'category' => esc_html __ ("Ninzio", 'focuson'), 'icon' => 'icon-separator', 'description' => 'Utilisez cet élément pour séparer le contenu', 'js_view' => ", 'params' => array (… C'est beaucoup d'attributs! Soulignons le plus important:
prénom donne un nom descriptif unique à votre élément personnalisé. Les utilisateurs le verront dans l'onglet Visual Composer.base, pas moins important que prénom, est le nom de la balise shortcode. Si vous connaissez la création de codes courts personnalisés, vous saurez que tous les codes courts personnalisés comportent des balises. Par exemple, notre séparateur personnalisé a un nz_sep étiquette. L'élément de base devrait être unique et il devrait être nommé exactement comme le nom de shortcode est dans votre fichier shortcodes.php (comme dans notre thème Focuson):'20', 'bottom' => '20', 'type' => 'solide', 'color' => '#eeeeee', 'align' => 'left', 'width' => ", 'height '=> "), $ atts)); $ styles = ""; if (isset ($ color) &&! empty ($ color)) $ styles. = 'border-bottom-color:'. $ color. ';'; if (isset ($ width) &&! vide ($ width)) $ styles. = 'width:'. absint ($ width). 'px;'; else $ styles. = 'width: 100%;'; if (isset ($ height) &&! vide ($ height)) $ styles. = 'border-bottom-width:'. absint ($ height). 'px;'; if (isset ($ type) &&! empty ($ type)) $ styles. = 'border-bottom-style:'. $ type. ';'; if (isset ($ top) &&! empty ($ top)) $ styles. = 'margin-top:'. absint ($ top). 'px;'; if (isset ($ bottom) &&! vide ($ bottom)) $ styles. = 'margin-bottom:'. absint ($ bottom). 'px;'; $ output = ''; return $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
classe n’est pas critique, mais une option importante, servant d’identifiant non unique. La dénomination doit être descriptive et sans espaces, utilisez des tirets ou des traits de soulignement..show_settings_on_create est un paramètre booléen et auto-descriptif.Catégorie c'est tres important. Si vous souhaitez regrouper vos éléments personnalisés dans un onglet de menu personnalisé du menu Éléments de Visual Composer, vous devez ajouter une catégorie personnalisée. Si vous souhaitez inclure des éléments dans un existant category utilise le nom de cet onglet de menu existant: 
icône est similaire à classe. Nous ajoutons un nom d'icône pour pouvoir appeler le shortcode dans le menu Visual Composer. Par exemple:i.icon-separator, .nz-sep .vc_element-icon image d'arrière-plan: url (… /images/shortcodes/sep.png)!important;
la description ajoute une petite description à votre élément personnalisé. Les utilisateurs verront cela.js_view est un paramètre très important. Lorsque vous avez des éléments comprenant des composants parent et enfants (par exemple, les zones de contenu, qui ont des éléments parent et enfant de conteneur principaux, les éléments parent et enfant ayant des attributs distincts), cet attribut doit avoir la valeur VcColumnView. Nous allons examiner les détails les plus complexes dans un instant.params est le tableau de paramètres à ajouter à votre élément personnalisé. Il se comporte de la même manière que le vc_add_params () fonction, mais imbriquée dans le vc_map () une fonction.Les éléments de conteneur avec des éléments enfants nécessitent une configuration spécifique avant d'être ajoutés. dans le vc_map () fonction, nous devons ajouter quelques paramètres supplémentaires pour que nos éléments soient un conteneur ou l’enfant d’un autre élément.
Par exemple, supposons que nous voulions ajouter un nouvel élément «Zones de contenu». Notre élément de contenu contient deux parties:
Une zone de contenu peut avoir un nombre illimité d'éléments de boîte enfant. Nous avons donc deux problèmes à résoudre:
Pour éviter autant que possible toute confusion, examinons un élément existant. Dans notre thème Focuson, nous avons un élément «Contenu», avec deux paramètres supplémentaires d’intérêt particulier:
"as_parent" => array ('only' => 'nz_box')Se souvenir du base paramètre de notre vc_map () une fonction? Ci-joint en tant que parent, nous enregistrons le nz_content_box élément en tant que parent seulement pour un nz_box élément enfant.
"js_view" => 'VcColumnView'
Quand js_view est réglé sur VcColumnView Visual Composer ajoute des fonctionnalités d'interface utilisateur supplémentaires à l'élément dans l'éditeur afin que nous puissions ajouter un nouvel élément enfant..
Dans le même esprit, notre nz_box Le code d'élément a un paramètre supplémentaire:
"as_child" => array ('only' => 'nz_content_box'),Avec as_child nous enregistrons le nz_box élément comme un enfant, mais seulement pour un nz_content_box élément parent.
Si vous visitez maintenant le menu Visual Composer et cliquez sur le nouveau fichier ajouté Zone de contenu élément, vous verrez… ça ne marche pas. Aucune fonctionnalité parent / enfant n'a été ajoutée, car il reste encore une chose à faire: nous devons étendre les classes:
WPBakeryShortCodesContainerWPBakeryShortCodeLa première classe est responsable des éléments parents, la seconde des éléments enfants. Donc, juste après la fonction action, ajoutez:
if (class_exists ('WPBakeryShortCodesContainer')) classe WPBakeryShortCode_nz_Content_Box étend WPBakeryShortCodesContainer Comme vous vous en souvenez, la base de l'élément parent de la zone de contenu était nz_content_box, ce nom devrait également être présent dans le nom de la classe qui étend la WPBakeryShortCodesContainer classe. Dans notre cas, le nouveau nom de la classe est WPBakeryShortCode_nz_Content_Box.
if (class_exists ('WPBakeryShortCode')) class WPBakeryShortCode_nz_Box étend WPBakeryShortCode La même chose est vraie pour l'élément enfant. Le nom de base était nz_box et le nouveau nom de la classe sera WPBakeryShortCode_nz_Box.
Quoi que vous nommiez votre élément de base, il devrait être présent dans le nouveau nom de la classe.
Maintenant, si vous jetez de nouveau un coup d'œil à l'éditeur de page, vous verrez que le nouvel élément de zone de contenu a une fonctionnalité enfant / parent..
Après un travail acharné, nous pouvons récolter les fruits de notre travail. Jetez un coup d'œil à la page d'accueil principale de Focuson Theme. Construisons cette page d'accueil avec Visual Composer.
La structure peut être divisée en plusieurs sections:
Recréer ceci n'est que le travail d'un moment avec Visual Composer.
Nous allons envelopper chaque bloc à l'intérieur de l'élément séparé «Row» avec au moins un élément «Column». Comme nous en avons discuté, il s'agit de la structure minimale et obligatoire des pages de Visual Composer..
Thème Focuson a intégré le curseur de la révolution. Le curseur n'est pas ajouté à Visual Composer. Cependant, une fois que vous avez installé Revolution Slider et Visual Composer, vous remarquerez un nouvel élément, le «curseur Revolution». Il s'agit d'un module complémentaire gratuit du curseur Revolution. Cet élément vous permet de placer un curseur dans la page, même si votre thème n'est pas intégré à Visual Composer..
Vous souvenez-vous de l'exemple d'élément «Contenu»? Nous pouvons créer des boîtes de contenu incroyables avec notre élément personnalisé:
Dans cette section, nous utilisons
Presque tous les éléments ici sont personnalisés.
Pour les compteurs, nous avons utilisé des options d’arrière-plan de lignes (image et couleur) pour des raisons esthétiques. Toutes ces options sont personnalisées depuis Ninzio. Nous mettons l'élément de compteur personnalisé à l'intérieur de cette ligne de style.
Avec les colonnes Visual Composer, nous pouvons ajouter un contenu à deux colonnes:
Presque tous ces éléments sont ajoutés de manière personnalisée, seul l'élément «En-tête personnalisé» est fourni par défaut avec Visual Composer. Dans l’éditeur de back-end, il semble asymétrique, mais sur le front-end, vous verrez une belle structure. La gestion de contenu ne consiste pas simplement à remplir des pages, c'est aussi un processus logique et créatif. Vous devez prendre en compte les dimensions des images et du texte, ainsi que leur apparence sur différents appareils. Des corrections réactives sont parfois nécessaires. Heureusement, Visual Composer dispose des outils nécessaires. Dans les options d'édition des colonnes, vous pouvez trouver le Options réactives onglet où vous pouvez ajuster la taille de la colonne en fonction des groupes de périphériques.
Ce n’est rien de plus qu’une rangée avec une image d’arrière-plan et un effet de parallaxe, une petite quantité de contenu contenant une info-bulle, un titre et des boutons.
C'est un élément supplémentaire de Ninzio; un carrousel de membres de l'équipe.
Encore une fois il n'y a rien d'inhabituel ici; un élément de ligne ordinaire avec deux colonnes, chacune contenant du contenu.
Mais ici, l’astuce est que l’image de droite ne se trouve pas dans la deuxième colonne, elle est en fait définie comme une image d’arrière-plan de ligne, la colonne de droite est donc vide..
Nous avons également créé un élément personnalisé pour ajouter des témoignages. Encore une fois, rien d'inhabituel au jeu ici.
Et la dernière section concerne les logos des sponsors. C'est un carrousel de logos dans une rangée avec un fond gris. Cet élément est également personnalisé..
C'est tout! Vous savez maintenant tout ce dont vous avez besoin pour intégrer Visual Composer à votre thème et créer des pages rapidement et facilement. En tant que ressource pour des études ultérieures, je vous suggère de jeter un coup d'œil à la page officielle du wiki de Visual Composer. Si vous avez des questions, n'hésitez pas à laisser un commentaire ci-dessous!
