So integrieren Sie Visual Composer in Ihre WordPress-Themes

Visual Composer ist ein WordPress-Plugin, mit dem Seiten mithilfe einer Drag & Drop-Oberfläche erstellt werden können. Es gibt Benutzern die Möglichkeit, Seiten einfach zu gestalten, und Entwickler haben die Möglichkeit, ihren WordPress-Themen einen Mehrwert zu verleihen. In diesem Tutorial betrachten wir die rechtlichen und technischen Auswirkungen der Integration von Visual Composer in verkaufsfertige Themen.

Visual Composer enthält:

• Kombinierter Front-End- und Back-End-WordPress-Editor.
• 40+ integrierte Inhaltselemente sind sofort verfügbar und 200+ Add-Ons, die Ihre Website auf die nächste Stufe bringen.
• Vorlagenbibliothek, mit der WordPress-Benutzer auf Hunderte von hochwertigen Layoutvorlagen zugreifen können.
• Skin Builder zum schnellen Ändern des Erscheinungsbildes des Themas.
• Erweiterte Rastererstellung für Beiträge, Portfolio, Medien und benutzerdefinierte Beitragstypen.

Das sind also die wichtigsten Funktionen von Visual Composer, einschließlich professioneller Unterstützung für 34 US-Dollar (reguläre Lizenz ab Dezember 2016).. 

Visual Composer für Theme-Entwickler

Lassen Sie uns einen Moment darüber nachdenken, warum Designentwickler Visual Composer integrieren oder erweitern sollten, und welche Auswirkungen die Lizenz dafür hat.

Der Verkauf von WordPress-Themes kann ein lukratives Geschäft sein, unabhängig davon, ob Sie einzeln oder über einen Marktplatz wie ThemeForest verkaufen. Als Theme-Autoren (Ninzio-Themes) verstehen wir die Belohnungen, wissen aber, wie schwierig die Theme-Entwicklung sein kann und was jeder Entwickler von seinem Produkt erwartet:

• Reduzierte Entwicklungszeit und -kosten.
• Ein qualitativ hochwertiges Produkt.
• Maximiertes Einkommen aus Verkäufen
• Reduzierte Supportzeit
• Konzentrieren Sie sich auf neue Funktionen und Marketing
  

Und weisst du was? Visual Composer kann Ihnen helfen, diese Ziele direkt oder indirekt zu erreichen. Lassen Sie mich erklären, wie:

Viele WordPress-Themes verfügen über integrierte Seitenersteller, deren Erstellung sich in den vergangenen Jahren zu einem Trend entwickelte. Heutzutage ist es jedoch angesichts des zunehmenden Wettbewerbs äußerst nachteilig, die Kosten und den Zeitaufwand zu beeinträchtigen, um eine benutzerdefinierte Lösung für Ihr Thema zu entwickeln. Visual Composer kann stattdessen in Ihr Design integriert und Ihren Käufern kostenlos angeboten werden (nur zur freien Verwendung mit Ihrem Design)..

Wenn Sie die Top-WordPress-Designs von Themeforest durchsuchen, werden Sie feststellen, dass in fast jedes Theme Visual Composer integriert ist. Dies gilt auch für Designs, die über einen eigenen benutzerdefinierten Seitenersteller verfügen. Visual Composer ist ein bekanntes Produkt, das tausende Male von mehr Millionen Benutzern und Entwicklern getestet wurde. 

Top WordPress-Themes auf Themeforest

An dieser Stelle haben wir deutlich gemacht, warum Visual Composer (fast) erforderliches Wissen für erfolgreiche WordPress-Theme-Entwickler geworden ist und warum Sie es in Betracht ziehen sollten, es in Ihre Designs zu integrieren.

Die nächsten Fragen sind: Wie integrieren wir Visual Composer, und haben wir das Recht dazu??

Themenintegration: Legal Guide

Wenn Sie als Entwickler eines Themas daran denken, Visual Composer in Ihre Designs einzubeziehen, finden Sie hier eine kurze Zusammenfassung der Anforderungen:

„Am 22. Januar 2013 hat Envato seine Lizenzen aktualisiert und es ist nicht mehr möglich, Artikel von Marktplätzen innerhalb Ihrer eigenen Artikel zu verwenden, die auf Envato-Marktplätzen zum Verkauf stehen, ohne eine Partnerschaftsvereinbarung zwischen zwei Autoren. In diesem Fall zwischen mir (Michael M) und Ihnen (Motivautor). “- Michael M

Also… wenn Sie Visual Composer in Ihr Design aufnehmen möchten, müssen Sie an Michael schreiben. Zum Glück nein. Dieser Prozess wurde automatisiert. Lassen Sie uns Schritt für Schritt untersuchen, wie wir Visual Composer richtig lizenzieren können.

Erweiterte Lizenz erwerben

Zunächst müssen Sie die erweiterte Lizenz von Visual Composer von CodeCanyon erwerben. Zum Zeitpunkt des Schreibens beträgt der Preis für eine erweiterte Lizenz 170 US-Dollar.

Die erweiterte Lizenz von Visual Composer von CodeCanyon

Was ist eine "Erweiterte Lizenz"??

Die erweiterte Lizenz ermöglicht die Nutzung des Plugins durch Sie oder einen Client in einem einzigen Produkt, für das Endbenutzer in Rechnung gestellt werden können. Der Gesamtpreis beinhaltet den Artikelpreis und eine Käufergebühr.

Im Wesentlichen erwerben Sie eine Entwicklerlizenz, um Visual Composer mit einem Ihrer Designs zu verwenden. Kunden, die dieses Design kaufen, müssen keine reguläre Lizenz von Visual Composer erwerben. 

Was deckt es nicht ab??

Sie können eine erweiterte Lizenz nicht für mehrere Designs verwenden, und Sie können Ihre erweiterte Lizenz auch nicht mit einer anderen Person teilen. Sie müssen den Lizenzschlüssel nicht mit Ihren Kunden teilen, und Ihre Kunden müssen Visual Composer (die mit Ihrem Design gelieferte Kopie) nicht aktivieren.. 

Was ist mit Visual Composer-Updates?? 

Eine der häufigsten Fragen, die wir bei Ninzio Themes hören, lautet: "Ich kann Visual Composer nicht aktualisieren". Dies erfolgt nicht vom Client aus; Jedes Visual Composer-Update sollte getestet und in Design-Updates enthalten sein.

Die "In-Stock License"

Aber warte mal, die WPBakery sagt: „Es ist nicht mehr möglich, Gegenstände von Marktplätzen innerhalb deiner eigenen Gegenstände zu verwenden, die auf Envato-Marktplätzen zum Verkauf stehen“. Wie können Sie also Visual Composer in ThemeForest zum Verkauf anbieten, wenn Ihre erweiterte Lizenz dies nicht zulässt? Hier kommt die spezielle "Vereinbarung" zwischen Ihnen und Michael M (Visual Composer Plugin Author) ins Spiel: die "In-Stock License".

Wenn Sie die erweiterte Lizenz von CodeCanyon erworben haben, rufen Sie das WPBakery-Supportportal auf und melden Sie sich mit Ihrem Envato-Login an.

WPBakery-Anmeldebildschirm

Eine Popup-Nachricht mit Autorisieren Sie das WPBakery Support Portal, um sich mit Ihrem Konto zu verbinden? wird auftauchen; klicken Genehmigen. Wenn Sie die erweiterte Lizenz bereits erworben haben, zeigt WPBakery automatisch Ihre neu erworbene Lizenz im Dashboard an. Wählen Sie die Lizenz aus, geben Sie den Namen des Themas ein und klicken Sie auf einreichen. Ihre erweiterte Lizenz wird in eine In-Stock-Lizenz umgewandelt. ThemeForest weiß, WPbakery weiß, dass Sie wissen, dass alles lizenziert ist. Sie können also den Visual Composer in Ihr Design aufnehmen und das Theme auf ThemeForest verkaufen.

An diesem Punkt haben wir uns mit den rechtlichen Aspekten der Visual Composer-Integration befasst. Nun ist es an der Zeit, die technische Seite zu untersuchen.

Themenintegration: Technischer Leitfaden

Bei der Integration von Visual Composer in Ihr Design ist nicht viel zu tun. Wir werden den Prozess am Beispiel eines unserer Themen, Focuson, erläutern.

Konzentrieren Sie sich auf

Erforderliche Umgebung erstellen

Wir brauchen folgende Dinge:

1. Eine PHP-Datei mit benutzerdefinierten Elementen (Ihre Kurzwahlcodes). In unserem Fall wird dies als "shortcodes.php" bezeichnet, die sich im Plugin "ninzio-addons" befindet (ein Plugin mit benutzerdefinierten Funktionen für das Design). „Shortcodes.php“ ist für die endgültige Ausgabe von Shortcodes verantwortlich. Eine Anleitung zum Erstellen von WordPress-Shortcodes finden Sie in Rohan Mehtas Tutorial Erste Schritte mit WordPress-Shortcodes.
2. Eine PHP-Datei zum Einbinden des Visual Composer. Diese Datei enthält Ihre benutzerdefinierten Elementoptionen, die im Visual Composer-Dashboard-Menü angezeigt werden. In unserem Fall heißt das "ninzio_vc.php" und befindet sich in Themenordner> enthält.
3. Ein Ordner für Visual Composer-Vorlagen, der PHP-Dateien der Standardelemente von Visual Composer enthält, falls Sie diese überschreiben müssen. Dieser Ordner muss den Namen "vc_templates" haben, und alle Dateien in diesem Ordner sollten genauso benannt werden wie im Ordner "vc_templates" von Visual Composer. In unserem Fall haben wir vier Dateien, die um die benutzerdefinierte Struktur und Funktionalität erweitert werden: "vc_column.php", "vc_column_text.php", "vc_row.php" und "vc_video.php". Der Ordner „vc_templates“ sollte direkt in den Stammordner des Designs eingefügt werden Designordner> vc_templates.

Da es sich bei Visual Composer um ein externes Plugin handelt, müssen wir es zum Design-Download-Pack hinzufügen. Hier haben wir zwei Möglichkeiten: 

1. Fügen Sie die Datei "js_composer.zip" in das Download-Paket ein und bitten Sie Ihre Käufer, sie manuell zu installieren.
2. Verwenden Sie den TGM-Plugin-Aktivator, um diesen Vorgang zu automatisieren. 

Die zweite Option ist die beste Möglichkeit, Plugins für WordPress-Themes anzufordern und zu empfehlen. Erstellen Sie dazu einen Ordner "plugins" in Ihrem Design-Stammordner und fügen Sie die Datei "js_composer.zip" (die installierbare Visual Composer-Datei, die Sie nach dem Kauf heruntergeladen haben) hinein. Um mehr über den TGM-Plugin-Aktivator zu erfahren, werfen Sie einen Blick auf das Tutorial von Barış Ünver. Verwenden der TGM-Plugin-Aktivierungsbibliothek in Ihren Themen. 

WordPress Theme Check

WordPress Theme Check mag es nicht, wenn ein Design gepackte Plugins enthält. Es wird eine Warnung geben wie:

ERFORDERLICH: ZIP-Datei gefunden. Plugins sind in Themes nicht erlaubt. Die gefundene zip-Datei war js_composer.zip

Leider gibt es für diese Situation keine offiziellen Anweisungen. Da das Einbinden des Plugin-Ordners auf Ihrem Server gegen Envato-Lizenz-Plugins in Themes - Theme Check Issue geht, gibt es keine bessere Möglichkeit, das Plugin mit dem Design zu integrieren.

Komm zu Atem

Also für jetzt haben wir…

1. … Js_composer.zip im Design enthalten (fucoson> plugins> js_composer.zip)
2. … Erstellte die PHP-Datei für benutzerdefinierte Elemente (ninzio-addons> shortcodes> shortcodes.php). Denken Sie daran, wir haben das Plugin ninzio-addons mit allen benutzerdefinierten Funktionen und das Design.
3. … Erstellte die Visual Composer-Integrationsdatei (focuson> umfasst> ninzio_vc.php)
4. … Und erstellte den Ordner „vc_templates“, der Standard-Visual Composer-Elemente zum Erweitern mit benutzerdefinierten Funktionen enthält.

Erforderliche Komponenten einschließen

Lassen Sie uns nun die Integration abschließen, indem Sie die erforderlichen Komponenten hinzufügen. Öffnen Sie die Designdatei „functions.php“ und fügen Sie mit dem TGM-Plugin-Aktivator Visual Composer zur Liste der erforderlichen Plugins hinzu:

 $ 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 '=> "));

Fügen Sie nun die Datei "shortcodes.php" hinzu. Da sich diese Datei im Fall des Focuson-Themas im Plugin „ninzio-addons“ befindet, ist sie bereits enthalten, wenn das Plugin ninzio-addons installiert wird.

Fügen Sie anschließend die Integrationsdatei "ninzio_vc.php" hinzu. Dieser Teil ist sehr wichtig, da wir sicherstellen müssen, dass sich die installierbare Visual Composer-Datei "js_composer.zip" im Ordner plugins befindet und das Visual Composer-Plugin erfolgreich installiert und aktiv ist:

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

Erst danach benötigen wir die Integrationsdatei "ninzio_vc.php".

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

Fazit

Das ist es! Visual Composer ist in unser Thema integriert und wir haben alles, was zu dessen Erweiterung erforderlich ist. Im nächsten Tutorial betrachten wir das Erweitern und Bauen mit Visual Composer. Wir sehen uns dort!