Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Theme Development
Webdesign

So erweitern Sie Visual Composer mit benutzerdefinierten Inhaltselementen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Im vorherigen Tutorial haben wir uns Visual Composer für Theme-Entwickler angesehen. Lizenzierung und technisches Setup.  In diesem Tutorial werden wir etwas weiter gehen, Visual Composer erweitern und es zum Erstellen von Seiten einrichten. 

Standardfunktionalität von Visual Composer 

Bevor wir uns die eigentliche Erstellung einer Seite ansehen, wollen wir uns einige der Standardfunktionen ansehen. 

Inhaltselemente

Visual Composer verfügt über eine große Auswahl an integrierten Inhaltselementen.  Visual Composer bietet darüber hinaus über 200 Add-ons, sowohl kostenlos als auch kostenpflichtig. 

Standardmäßig ist Visual Composer nur für Seiten aktiviert, Sie können es jedoch auch für Posts und sogar für benutzerdefinierte Post-Typen aktivieren.  Diese und weitere Optionen können im Visual Composer Role Manager verwaltet werden.  Dort können Sie auch steuern, wer Visual Composer in Ihrem Admin verwenden kann. 

Mit dem Shortcode Manager können Sie benutzerdefinierte Elemente mit Parametern hinzufügen.  In mancher Hinsicht ist das benutzerzentrierte Äquivalent der Entwicklermethode der Zuordnung neuer Elemente. 

Erweiterter Grid Builder

Eines der attraktivsten Werkzeuge für Benutzer ist der Grid Builder.  Mit ihm können Benutzer jede Art von Raster mit Bildern, Text, Schaltflächen, Posts usw. erstellen, ohne Code zu berühren.  Mauergitter sind ebenfalls erhältlich. 

Mmm grids
Mmm-Gitter

Vorlagenbibliothek 

Die Vorlagenbibliothek bietet Benutzern Zugriff auf professionelle Vorlagen für die Seitenstruktur.  Typische Beispiele sind Artikellayouts, Landing-Page-Layouts, Parallax-Seiten, Portfolios, Sie nennen es.  Als Entwickler können Sie sogar Ihre eigenen erstellen und sie mit den Demo-Inhalten Ihres Themes verknüpfen. 

Trommelwirbel bitte.. 

Und schließlich erreichen wir, was wohl der wichtigste Teil von Visual Composer ist: der Editor.  Dies ist ein Back-End- und ein Front-End-Editor, mit dem Benutzer Seiten ohne Programmierkenntnisse erstellen können. 

Visual Composers back end editor
Der Back-End-Editor von 
Visual Composers front-end editor
Visual Composer Front-End-Editor

Mit dem Front-End-Editor bearbeiten Sie genau das, was Sie sehen.  Es ist sicherlich mehr, was Sie sehen, ist, was Sie als der Standard-WYSIWYG-Editor von WordPress bekommen! 

Der Seitenersteller arbeitet mit einem Zeilen- und Spaltensystem.  Jedes der Seite hinzugefügte Element wird in einen Zeilencontainer eingeschlossen.  Mehrere Elemente können derselben Zeile, in Spalten oder weiteren verschachtelten Zeilen hinzugefügt werden.  Der folgende Screenshot zeigt, wie Elemente, Zeilen und Spalten hinzugefügt, bearbeitet und entfernt werden können. 

Nachdem wir die grundlegenden Funktionen abgedeckt haben, wollen wir uns nicht einer Entwicklung zuwenden.  Wir werden die Standardfunktionalität von Visual Composer erweitern und neue benutzerdefinierte Elemente hinzufügen. 

Erweitern von Visual Composer

Um ein Element in Visual Composer zu überschreiben, müssen Sie zunächst die Vorlagendatei aus dem Visual Composer-Plug-in-Ordner (js_composer)> include> templates in den Ordner yourtheme> vc_templates kopieren.  Aus dem vorherigen Tutorial können Sie sich erinnern, dass wir in unserem Focuson-Thema vier Dateien haben: 

  1. vc_column.php 
  2. vc_column_text.php 
  3. vc_row.php 
  4. vc_video.php 

Und wie wir besprochen haben, ist die Namensgebung hier sehr wichtig.  Diese Vorlagen sollten genau wie im Standard-VC-Plugin-Ordner benannt sein.

Nachdem Sie die Vorlagendatei dupliziert haben, können Sie sie überschreiben.  Schauen wir uns zum Beispiel an, was in der ersten Datei vc_columns.php steht.  Wenn Sie mit der Erstellung von Kurzworten vertraut sind, gibt es hier nichts Neues für Sie. 

Die Dateistruktur kann in drei Teile aufgeteilt werden:

  1. Extrahieren Sie Shortcode-Attribute 
  2. Bereite Einstellungen für die Ausgabe vor 
  3. Geben Sie die Shortcode-Struktur aus

Was aber, wenn Sie bestehende Shortcode-Attribute hinzufügen oder entfernen möchten, wie würden Sie damit umgehen?  Treffen Sie drei neue Funktionen: 

vc_remove_param ();

Diese Funktion entfernt den Shortcode-Parameter von einem vorhandenen oder benutzerdefinierten Element.  Um das Attribut zu entfernen, zielen Sie auf den spezifischen Shortcode mit dem Namen, z. B. vc_column, und dem Attributnamen, z. B. el_class

 vc_remove_param (); 

Diese Funktion entfernt den Shortcode-Parameter von einem vorhandenen oder benutzerdefinierten Element.  Wie bei der vc_remove_param () - Funktion, richten Sie den spezifischen Shortcode mit seinem Namen, zum Beispiel vc_column, ein und schließen Sie das Parameter-Array ein:

vc_add_params();

Diese Funktion ähnelt vc_add_param (). Sie können jedoch mehrere Parameter zu einem Element hinzufügen.  Hier finden Sie eine Liste aller Parametertypen. 

Um neue Parameter hinzuzufügen oder zu entfernen, sowie neue Elemente hinzuzufügen, müssen Sie die Integrationsdatei bearbeiten, in unserem Fall ninzio_vc.php.

  1. Wir beginnen mit der Deaktivierung des Front-End-Editors.  Der Front-End-Editor ist ein wirklich cooles Feature, aber unsere benutzerdefinierten Elemente unterstützen dies nicht.  Es liegt an Ihnen als Theme-Entwickler, ob Sie die Frontend- und / oder Backend-Editoren unterstützen wollen. 
  2. Entfernen Sie alle unnötigen oder nicht unterstützten Parameter von Zielelementen mit vc_remove_param (); 
  3. Hinzufügen neuer Parameter zu bestehenden Elementen mit dem vc_add_param (); oder vc_add_params (); Funktionen.
  4. Dann füge neue Elemente hinzu.

So fügen Sie benutzerdefinierte Elemente hinzu

Das Hinzufügen neuer Inhaltselemente zu Visual Composer kommt zustande, wenn eine Shortcodes-Datei in Ihrem Theme- oder Theme-Add-On vorhanden ist, wie in unserem Fall. 

Zuerst müssen wir mit der Funktion überprüfen, ob unser ninzio-addons-Plugin installiert und aktiv ist:  Mit add_action();.

Wir werden die Aktion init verwenden und uns folgendes geben:

Jetzt sind wir bereit, unsere neuen Elemente hinzuzufügen, für die wir eine andere neue Funktion benötigen: 

vc_map ();

Diese Funktion benötigt einen Parameter: ein Array spezieller Attribute, die Ihren Shortcode beschreiben.  Als Beispiel fügen wir ein benutzerdefiniertes Trennelement hinzu: 

Das sind viele Attribute!  Lassen Sie uns das Wichtigste hervorheben:

  • name gibt Ihrem benutzerdefinierten Element einen eindeutigen beschreibenden Namen.  Benutzer sehen es auf der Registerkarte Visual Composer. 
  • Basis, nicht weniger wichtig als Name, ist der Name des Shortcode-Tags.  Wenn Sie mit der benutzerdefinierten Erstellung von Shortcodes vertraut sind, wissen Sie, dass alle benutzerdefinierten Shortcodes Tags enthalten.  Zum Beispiel hat unser benutzerdefiniertes Trennzeichen ein nz_sep-Tag.  Die element base sollte eindeutig sein und sollte genau so benannt werden, wie der shortcode Name in deiner shortcodes.php Datei ist (wie in unserem Focuson Thema): 
  • Klasse ist nicht kritisch, aber eine wichtige Option, die als nicht eindeutiger Bezeichner dient.  Die Benennung sollte beschreibend sein und ohne Leerstellen Bindestriche oder Unterstriche verwenden.
  • show_settings_on_create ist ein boolescher Parameter und selbstbeschreibend. 
  • Kategorie ist sehr wichtig.  Wenn Sie Ihre benutzerdefinierten Elemente auf einer benutzerdefinierten Menüregisterkarte im Menü der Visual Composer-Elemente gruppieren möchten, sollten Sie eine benutzerdefinierte Kategorie hinzufügen.  Wenn Sie Elemente in eine vorhandene Kategorie aufnehmen möchten, verwenden Sie den Namen der vorhandenen Menü-Registerkarte:
  • Symbol ist ähnlich wie Klasse.  Wir fügen einen Symbolnamen hinzu, damit wir den Shortcode im Visual Composer-Menü formatieren können.  Beispielsweise: 
  • Beschreibung fügt Ihrem benutzerdefinierten Element eine kleine Beschreibung hinzu.  Benutzer werden dies sehen. 
  • js_view ist ein sehr wichtiger Parameter.  Wenn Sie Elemente haben, die übergeordnete und untergeordnete Komponenten umfassen (z. B. Inhaltsfelder, die ein Hauptelement für Container und untergeordnete Elemente haben, wobei über- und untergeordnete Elemente separate Attribute haben), sollte dieses Attribut den Wert VcColumnView haben.  Wir werden die komplexeren Details in einem Moment untersuchen.
  • params ist das Array von Parametern, die Ihrem benutzerdefinierten Element hinzugefügt werden.  Sie verhält sich ähnlich wie die Funktion vc_add_params (), ist jedoch in der Funktion vc_map () verschachtelt. 

Eltern- und Kindelemente

Containerelemente mit untergeordneten Elementen erfordern vor dem Hinzufügen eine bestimmte Konfiguration. In der Funktion vc_map () müssen wir einige weitere Parameter hinzufügen, um unsere Elemente entweder zu einem Container oder zum Kind eines anderen Elements zu machen. 

Angenommen, wir möchten ein neues Element "Inhaltsfelder" hinzufügen.  Unser Content-Box-Element besteht aus zwei Teilen:

  1. das Elternelement mit seinen Attributen
  2. und die untergeordneten Boxelemente, jeweils mit ihren Attributen. 

Eine Inhaltsbox kann unbegrenzte untergeordnete Boxelemente haben.  Also müssen wir zwei Probleme lösen:

  1. Irgendwie müssen wir Visual Composer mitteilen, dass die Inhaltsbox ein untergeordnetes / übergeordnetes Element ist. 
  2. Dann ist eine Box das einzige mögliche Kind eines Eltern-Inhaltsboxelements, und ein Inhaltsboxelement ist das einzige mögliche Elternelement für Box-Kindelemente. 

Elternelement-Code

Um Verwirrung so weit wie möglich zu vermeiden, werfen wir einen Blick auf ein vorhandenes Element.  In unserem Focuson-Thema haben wir ein "Content-Boxen" -Element, mit zwei zusätzlichen Parametern von besonderem Interesse: 

Erinnern Sie sich an den Basisparameter unserer vc_map () - Funktion? Mit as_parent registrieren wir das  Element nz_content_box als übergeordnetes Element nur für ein untergeordnetes Element nz_box

Wenn js_view auf VcColumnView festgelegt ist, fügt Visual Composer dem Element im Editor zusätzliche UI-Funktionen hinzu, sodass wir ein neues untergeordnetes Element hinzufügen können. 

Kind Element Code

In gleicher Weise hat unser nz_box Element-Code einen zusätzlichen Parameter: 

Mit as_child registrieren wir das Element nz_box als Kind, aber nur für ein Elternelement nz_content_box

Klassen erweitern

Wenn Sie jetzt das Visual Composer-Menü aufrufen und auf das neu hinzugefügte Inhaltsfeldelement klicken, sehen Sie ... es funktioniert nicht.  Es wurde keine Eltern / Kind-Funktionalität hinzugefügt, da es noch eine Sache gibt, die wir tun müssen - wir müssen auf Klassen erweitern: 

  • WPBakeryShortCodesContainer 
  • WPBakeryShortCode 

Die erste Klasse ist verantwortlich für Elternelemente, die zweite Klasse ist verantwortlich für Kindelemente.  Also, gleich nach der Aktionsfunktion füge hinzu: 

Wie Sie sich erinnern, war die Basis des Inhaltsfeld-Elternelements nz_content_box, dieser Name sollte auch in dem Klassennamen vorhanden sein, der die WPBakeryShortCodesContainer-Klasse erweitert.  In unserem Fall lautet der neue Klassenname WPBakeryShortCode_nz_Content_Box

Das Gleiche gilt für das Kindelement.  Der Basisname war nz_box und der neue Klassenname ist WPBakeryShortCode_nz_Box

Wie auch immer Sie Ihre Elementbasis benennen, sie sollte in dem neuen Klassennamen vorhanden sein. 

Wenn Sie sich den Seiteneditor nun noch einmal ansehen, sehen Sie, dass das neue Inhaltsfeldelement untergeordnete / übergeordnete Funktionen hat.


Erstellen von Seiten mit Visual Composer 

Nach harter Arbeit können wir die Früchte unserer Arbeit ernten.  Schauen Sie sich die Hauptseite von Focuson Theme an.  Lassen Sie uns diese Homepage mit Visual Composer erstellen. 

Die Struktur kann in mehrere Abschnitte unterteilt werden: 

  • Präsentationsslider
  • Inhaltsfelder 
  • Unterstützte Projekte 
  • Zähler
  • Zusätzliche Informationen, wie "Warum wählen Sie uns", die aus zwei Spalten besteht 
  • Banner 
  • Teammitglieder 
  • Ein weiterer Block mit zusätzlichen Informationen mit zwei Spalten 
  • Referenzen der Kunden 
  • Sponsorenlogos 

Dies nachzuahmen ist nur die Arbeit eines Moments mit Visual Composer.

Wir werden jeden Block innerhalb des separaten "Row" -Elements mit mindestens einem "Column" -Element umhüllen.  Wie bereits erwähnt, ist dies die erforderliche und minimale Struktur von Visual Composer-Seiten. 

Präsentationsslider

Focuson Theme hat den Revolution Slider integriert.  Der Schieberegler wird nicht mit Visual Composer hinzugefügt.  Wenn Sie jedoch Revolution Slider und Visual Composer installieren, werden Sie ein neues Element "Revolution Slider" bemerken. 

Inhaltsfelder 

Erinnerst du dich an das Beispiel "Content-Boxen" -Element?  Wir können erstaunliche Inhaltsfelder mit unserem benutzerdefinierten Element erstellen: 

unterstützte Projekte

In diesem Abschnitt verwenden wir 

  1. eine Textspalte
  2. ein Lückenelement, um Platz hinzuzufügen
  3. ein zentriertes Einzelbild (das als netter Linienteiler dient)
  4. eine weitere Lücke 
  5. und das Element "Letzte Projekte" 

Fast alle Elemente hier sind benutzerdefinierte hinzugefügt.

Zähler 

Für die Zähler verwendeten wir Zeilenhintergrundoptionen (Bild und Farbe) für die Ästhetik.  Alle diese Optionen werden von Ninzio individuell hinzugefügt.  Wir haben das Counter-Custom-Element in diese Style-Zeile eingefügt.

"Warum uns wählen" Info Block

Mit Visual Composer-Spalten können wir zweispaltigen Inhalt hinzufügen: 

Fast alle diese Elemente werden benutzerdefiniert hinzugefügt, nur das Element "Benutzerdefinierte Überschrift" wird standardmäßig mit Visual Composer ausgeliefert.  Im Backend-Editor sieht es asymmetrisch aus, aber am Front-End sieht man eine gut aussehende Struktur.  Beim Content-Management geht es nicht nur darum, Seiten zu füllen, es ist auch ein logischer und kreativer Prozess. Sie müssen die Dimensionen von Bildern und Text berücksichtigen und überlegen, wie sie auf verschiedenen Geräten aussehen.  Manchmal sind auch reaktionsschnelle Korrekturen erforderlich.  Glücklicherweise verfügt Visual Composer über die erforderlichen Tools.  In den Bearbeitungsoptionen für Spalten finden Sie die Registerkarte Responsive Optionen, in der Sie die Spaltengröße abhängig von Gerätegruppen anpassen können. 

Banner

Dies ist nichts anderes als eine Zeile mit einem Hintergrundbild und Parallax-Effekt, eine kleine Menge Inhalt mit einem Tooltip, Titel und Schaltflächen.

Teammitglieder

Dies ist ein zusätzliches Element von Ninzio; ein Karussell von Teammitgliedern. 

Infoblock "Kreative Lösungen"

Auch hier ist nichts Ungewöhnliches.ein gewöhnliches Zeilenelement mit zwei Spalten, die jeweils Inhalt enthalten. 

Aber hier ist der Trick, dass das Bild auf der rechten Seite nicht innerhalb der zweiten Spalte liegt, es ist tatsächlich als Zeilenhintergrundbild gesetzt, so dass die rechte Spalte hier leer ist. 

Kundenbewertungen

Wir haben auch ein benutzerdefiniertes Element erstellt, um Testimonials hinzuzufügen.  Auch hier ist nichts Ungewöhnliches dabei. 

Sponsorenlogos

Und der letzte Abschnitt ist Sponsorenlogos.  Es ist ein Karussell von Logos in einer Reihe mit einer grauen Hintergrundfarbe.  Dieses Element wird auch benutzerdefiniert hinzugefügt. 

Fazit

Das ist es!  Jetzt wissen Sie alles, was Sie brauchen, um Visual Composer in Ihr Theme zu integrieren und Seiten schnell und einfach zu erstellen.  Als Ressource für weitere Studien empfehle ich, dass Sie sich die offizielle Wiki-Seite für Visual Composer anschauen.  Wenn Sie irgendwelche Fragen haben, zögern Sie nicht, einen Kommentar unten zu hinterlassen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.