Comment intégrer Visual Composer à vos thèmes WordPress

Visual Composer est un plugin WordPress qui permet de créer des pages à l’aide d’une interface glisser-déposer. Il donne aux utilisateurs le pouvoir de mettre en page facilement des pages et donne aux développeurs la possibilité d'ajouter de la valeur à leurs thèmes WordPress. Dans ce didacticiel, nous examinerons les implications juridiques et techniques de l'intégration de Visual Composer dans des thèmes prêts à la vente..

Visual Composer est livré avec:

Éditeur WordPress front-end et back-end combiné.
Plus de 40 éléments de contenu intégrés, prêts à l'emploi, et plus de 200 add-ons, conçus pour faire passer votre site Web à un niveau supérieur.
Bibliothèque de modèles permettant aux utilisateurs de WordPress d'accéder à des centaines de modèles de présentation de haute qualité.
Skin Builder pour changer rapidement l'aspect visuel du thème.
Générateur de grille avancé pour les types de publication, portefeuille, média et publication personnalisée.

Voilà donc les principales caractéristiques de Visual Composer, y compris un support professionnel pour 34 $ (licence normale à partir de décembre 2016)..

Compositeur visuel pour les développeurs de thèmes

Réfléchissons un instant sur les raisons pour lesquelles les développeurs de thèmes devraient intégrer ou étendre Visual Composer et sur les implications en termes de licence pour cela..

La vente de thèmes WordPress peut être une activité lucrative, que vous vendiez à l'unité ou sur un marché tel que ThemeForest. En tant qu'auteurs de thèmes (Thèmes Ninzio), nous comprenons les avantages, mais nous savons combien le développement de thèmes peut être difficile et ce que chaque développeur souhaite obtenir de son produit:

Réduction du temps et des coûts de développement.
Un produit de grande qualité.
Revenu maximisé des ventes
Temps d'assistance réduit
Focus sur les nouvelles fonctionnalités et le marketing

Et tu sais quoi? Visual Composer peut vous aider à atteindre ces objectifs directement ou indirectement. Laissez-moi vous expliquer comment:

De nombreux thèmes WordPress ont des générateurs de page intégrés, et leur construction est devenue une tendance des années précédentes, mais de nos jours, avec une concurrence accrue, il est extrêmement désavantageux en termes de coûts et de temps de développer une solution personnalisée pour votre thème. À la place, Visual Composer peut être intégré à votre thème et proposé gratuitement à vos acheteurs (utilisation gratuite avec votre thème uniquement)..

Si vous parcourez les principaux thèmes WordPress de Themeforest, vous remarquerez que Visual Composer est intégré dans presque tous les thèmes, même les thèmes dotés de leur propre générateur de page intégré. Visual Composer est un produit bien connu, testé des milliers de fois par plus de millions d'utilisateurs et de développeurs..

Top thèmes WordPress sur Themeforest

À ce stade, nous avons clairement expliqué pourquoi Visual Composer était devenu (presque) la connaissance indispensable des développeurs de thèmes WordPress performants, et pourquoi vous devriez envisager de l'intégrer à vos thèmes..

Les prochaines questions sont: comment intégrer Visual Composer et avons-nous le droit de le faire?

Intégration de thème: Guide juridique

Si vous êtes un développeur de thème qui songe à inclure Visual Composer dans ses thèmes, voici un bref résumé de ce dont vous avez besoin:

«Le 22 janvier 2013, Envato a mis à jour ses licences et il n’est plus possible d’utiliser des articles provenant des marchés au sein de vos propres articles qui seront en vente sur les marchés d’Envato, sans accord de partenariat entre deux auteurs. Dans ce cas entre moi (Michael M) et vous (auteur du thème). ”- Michael M

Donc… si vous voulez inclure Visual Composer dans votre thème, vous devez écrire à Michael? Heureusement non. Ce processus a été automatisé. Examinons, étape par étape, comment nous pouvons correctement attribuer une licence à Visual Composer..

Acheter une licence étendue

Vous devez d’abord acheter la licence étendue de Visual Composer auprès de CodeCanyon. Au moment de la rédaction de cet article, le prix d'une licence étendue est de 170 $..

Licence étendue de Visual Composer auprès de CodeCanyon

Qu'est-ce qu'une "licence étendue"??

La licence étendue permet l’utilisation du plug-in, par vous ou par un client, dans un seul produit pour lequel les utilisateurs finaux peuvent être facturés. Le prix total comprend le prix de l'article et des frais d'achat..

Pour l’essentiel, vous achetez une licence de développeur pour utiliser Visual Composer avec l’un de vos thèmes. Les clients qui achètent ce thème ne sont pas obligés d'acheter la licence régulière de Visual Composer.

Que recouvre-t-il?

Vous ne pouvez pas utiliser une licence étendue pour plusieurs thèmes, ni partager votre licence étendue avec quelqu'un d'autre. Vous n'aurez pas à partager la clé de licence avec vos clients et vos clients n'auront pas besoin d'activer Visual Composer (la copie fournie avec votre thème)..

Qu'en est-il des mises à jour de Visual Composer?

Une des questions les plus courantes que nous entendons sur Ninzio Themes est: «Je ne peux pas mettre à jour Visual Composer». Cela ne se fait pas du côté du client; chaque mise à jour de Visual Composer doit être testée et incluse dans les mises à jour de thèmes.

La «licence en stock»

Mais attendez une minute, WPBakery a déclaré: «Il n’est plus possible d’utiliser des articles provenant de marchés au sein de vos propres articles qui seront en vente sur les marchés d’Envato». Alors, comment inclure Visual Composer dans vos thèmes en vente sur ThemeForest si votre licence étendue ne le permet pas? C’est là que l’accord spécial entre vous et Michael M entre en jeu: la «licence en stock»..

Une fois que vous avez acheté la licence étendue auprès de CodeCanyon, accédez au portail de support WPBakery et connectez-vous avec votre nom d'utilisateur Envato..

Écran de connexion WPBakery

Un message contextuel avec Autoriser le portail de support WPBakery à se connecter avec votre compte? apparaîtra; Cliquez sur Approuver. Ensuite, si vous avez déjà acheté la licence étendue, WPBakery affiche automatiquement la nouvelle licence achetée dans le tableau de bord. Sélectionnez donc la licence, entrez le nom du thème et appuyez sur Soumettre. Votre licence étendue deviendra une «licence en stock». ThemeForest le sait, WPbakery le sait, vous savez, tout est concédé sous licence. Vous pouvez donc inclure le compositeur visuel dans votre thème et vendre le thème sur ThemeForest..

À ce stade, nous avons terminé d’examiner les aspects juridiques de l’intégration de Visual Composer. Il est maintenant temps d’examiner le côté technique..

Intégration de thèmes: Guide technique

L'intégration de Visual Composer à votre thème n'est pas très complexe. Nous allons expliquer le processus en utilisant l’un de nos thèmes, Focuson, à titre d’exemple..

Se concentrer sur

Créer l'environnement requis

Nous avons besoin des choses suivantes:

Un fichier php avec des éléments personnalisés (vos shortcodes de thème). Dans notre cas, cela s'appelle “shortcodes.php” qui est situé dans le plugin “ninzio-addons” (un plugin avec une fonctionnalité de thème personnalisé). “Shortcodes.php” est responsable de la sortie finale des codes courts. Pour un guide sur la création de codes courts WordPress, consultez le tutoriel de Rohan Mehta Premiers pas avec WordPress.
Un fichier php pour intégrer le compositeur visuel. Ce fichier contient vos options d'élément personnalisé, affichées dans le menu du tableau de bord de Visual Composer. Dans notre cas, cela s’appelle «ninzio_vc.php» et se trouve à dossier de thème> comprend.
Un dossier de modèles Visual Composer, qui contiendra les fichiers php des éléments par défaut de Visual Composer, au cas où vous auriez besoin de les écraser. Ce dossier doit être nommé "vc_templates" et tous les fichiers situés à l'intérieur de ce dossier doivent être nommés exactement comme ceux du dossier Visual Composer "vc_templates". Dans notre cas, nous avons quatre fichiers qui sont étendus avec une structure et des fonctionnalités personnalisées: «vc_column.php», «vc_column_text.php», «vc_row.php» et «vc_video.php». Le dossier «vc_templates» doit être placé directement dans le dossier racine de votre thème. dossier de thème> vc_templates.

Enfin, comme Visual Composer est un plugin externe, nous devons l’inclure avec le pack de téléchargement de thèmes. Ici nous avons deux options:

Incluez le fichier «js_composer.zip» dans le pack de téléchargement et demandez à vos acheteurs de l'installer manuellement.
Utilisez le TGM Plugin Activator pour automatiser ce processus.

Nous trouvons que la deuxième option est la meilleure façon d'exiger et de recommander des plugins pour les thèmes WordPress. Pour ce faire, créez un dossier «plugins» dans le dossier racine de votre thème et placez-y le fichier «js_composer.zip» (le fichier installable de Visual Composer, que vous aurez téléchargé après l'achat). Pour en savoir plus sur l'activateur de plug-in TGM, consultez le didacticiel de Barış Ünver Utilisation de la bibliothèque d'activation de plug-in TGM dans vos thèmes.

Vérification du thème WordPress

WordPress Theme Check n’aime pas quand un thème inclut des plugins emballés. Cela donnera un avertissement comme:

REQUIRED: fichier Zip trouvé. Les plugins ne sont pas autorisés dans les thèmes. Le fichier zip trouvé était js_composer.zip

Malheureusement, pour cette situation, il n'y a pas d'instructions officielles. Comme l'inclusion du dossier du plug-in sur votre serveur va à l'encontre de la licence Envato Plug-in dans Thèmes - Problème de vérification de thème, il n'y a pas d'autre meilleur moyen d'inclure le plug-in au thème.

Attraper votre souffle

Donc, pour l'instant nous avons…

… Inclus js_composer.zip dans le thème (fucoson> plugins> js_composer.zip)
… Créé le fichier php des éléments personnalisés (ninzio-addons> shortcodes> shortcodes.php). Rappelez-vous que nous avons le plugin ninzio-addons avec toutes les fonctionnalités personnalisées, et qu'il est livré avec le thème.
… A créé le fichier d'intégration Visual Composer (focuson> includes> ninzio_vc.php)
… Et créé le dossier “vc_templates” contenant les éléments Visual Composer par défaut pour une extension avec des fonctionnalités personnalisées.

Y compris les composants requis

Terminons maintenant l’intégration en incluant les composants requis. Ouvrez votre fichier de thème «functions.php» et, avec TGM Plugin Activator, ajoutez Visual Composer à la liste des plug-ins requis:

 $ plugins = array (array ('name' => esc_html __ ('WPBakery Visual Composer', 'focuson'), 'slug' => 'js_composer', 'source' => get_template_directory (). '/plugins/js_composer.zip ',' required '=> true,' force_activation '=> false,' force_deactivation '=> false,' external_url '=> "));

Incluez maintenant le fichier “shortcodes.php”. Comme dans le cas du thème Focuson, ce fichier est situé dans le plug-in “ninzio-addons”, il est déjà inclus lorsque le plug-in ninzio-addons est installé..

Ensuite, incluez le fichier d'intégration "ninzio_vc.php". Cette partie est très importante, car nous devons nous assurer que le fichier installable de Visual Composer, «js_composer.zip», se trouve dans le dossier plugins et que le plug-in de Visual Composer est correctement installé et actif:

if (defini ('WPB_VC_VERSION') && file_exists (get_template_directory (). '/ plugins/js_composer.zip')) require_once (get_template_directory (). '/includes/ninzio_vc.php');

Seulement après cela avons-nous besoin du fichier d'intégration "ninzio_vc.php".

require_once (get_template_directory (). '/includes/ninzio_vc.php');

Conclusion

C'est tout! Visual Composer est intégré à notre thème et nous disposons de tout le nécessaire pour l’étendre. Dans le prochain tutoriel, nous examinerons l'extension et la construction avec Visual Composer. On se voit là-bas!

Création de sites web