Share
Im vorherigen Tutorial haben wir uns mit Visual Composer für Entwickler von Themen befasst. Lizenzierung und technisches Setup. In diesem Lernprogramm gehen wir weiter, erweitern Visual Composer und richten ihn für die Erstellung von Seiten ein.
Bevor wir uns das Erstellen einer Seite genauer ansehen, lassen Sie uns einige der Standardfunktionen durchgehen.
Visual Composer enthält eine Vielzahl von integrierten Inhaltselementen. Darüber hinaus bietet Visual Composer über 200 kostenlose und kostenpflichtige Add-Ons.
Standardmäßig ist Visual Composer nur für Seiten aktiviert. Sie können es jedoch auch für Beiträge und sogar für benutzerdefinierte Beitragstypen aktivieren. Diese und weitere Optionen können vom Visual Composer-Rollenmanager aus verwaltet werden. Dort können Sie auch steuern, wer Visual Composer in Ihrem Administrator verwenden kann.
Mit dem Shortcode Manager können Sie benutzerdefinierte Elemente mit Parametern hinzufügen. In gewisser Weise ist das benutzerzentrierte Äquivalent der Entwicklermethode zum Abbilden neuer Elemente.
Eines der attraktivsten Tools für Benutzer ist der Grid Builder. Mit ihm können Benutzer beliebige Raster erstellen, mit Bildern, Text, Schaltflächen, Beiträgen usw., ohne den Code zu berühren. Auch Mauerwerksgitter sind erhältlich.
Mmm GitterMit der Vorlagenbibliothek können Benutzer auf professionelle Vorlagen für die Seitenstruktur zugreifen. Typische Beispiele sind Artikellayouts, Landing-Page-Layouts, Parallax-Seiten und Portfolios. Als Entwickler können Sie sogar Ihre eigenen erstellen und sie in den Demo-Inhalt Ihres Themas aufnehmen.
Und schließlich erreichen wir den wohl wichtigsten Teil von Visual Composer: den Editor. Dies ist ein Backend und ein Front-End-Editor, mit dem Benutzer Seiten ohne Programmierkenntnisse erstellen können.
Der Backend-Editor von Visual Composer
Frontend-Editor von Visual ComposerMit dem Frontend-Editor bearbeiten Sie genau das, was Sie sehen. Es ist sicherlich mehr Was du siehst ist was du kriegst als der Standard-WordPress-WYSIWYG-Editor!
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 Screenshot unten zeigt, wie Elemente, Zeilen und Spalten hinzugefügt, bearbeitet und entfernt werden können.
Nachdem wir uns mit den verfügbaren Grundfunktionen befasst haben, widmen wir uns nicht der Entwicklung. Wir werden die Standardfunktionalität von Visual Composer erweitern und neue benutzerdefinierte Elemente hinzufügen.
Um ein Element in Visual Composer zu überschreiben, müssen Sie zuerst die Vorlagendatei aus dem Visual Composer-Plug-In-Ordner kopieren (js_composer)> Include> Vorlagen zum yourtheme> vc_templates Mappe. Aus dem vorherigen Tutorial erinnern Sie sich vielleicht daran, dass wir in unserem Focuson-Thema vier Dateien haben:
Und wie wir besprochen haben, ist die Benennung hier sehr wichtig. Diese Vorlagen sollten genauso benannt werden wie im Standard-VC-Plugin-Ordner.
Nachdem Sie die Vorlagendatei dupliziert haben, können Sie sie überschreiben. Sehen wir uns beispielsweise an, was in der ersten Datei vc_columns.php enthalten ist. Wenn Sie mit der Erstellung von Shortcodes vertraut sind, gibt es hier nichts Neues für Sie.
Die Dateistruktur kann in drei Teile unterteilt werden:
Was aber, wenn Sie vorhandene Shortcode-Attribute hinzufügen oder entfernen möchten, wie würden Sie damit umgehen? Treffen Sie drei neue Funktionen:
Diese Funktion entfernt den Shortcode-Parameter aus einem vorhandenen oder benutzerdefinierten Element. Um das Attribut zu entfernen, geben Sie beispielsweise den spezifischen Kurzcode mit dem Namen an vc_column und den Attributnamen zum Beispiel el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Diese Funktion fügt einem vorhandenen oder benutzerdefinierten Element neue Parameter hinzu. Wie bei der vc_remove_param () Funktion, z. B. den spezifischen Shortcode mit seinem Namen anvisieren vc_column und fügen Sie das Parameterarray ein:
vc_add_param ('vc_column', array ("type" => "dropdown"), "class" => "", "Überschrift" => "animieren", "param_name" => "animieren", "value" => array ( "False" => 'false', "True" => 'true'))));Diese Funktion ähnelt der vc_add_param (), Sie können jedoch einem Element mehrere Parameter hinzufügen. Eine Liste aller Parametertypen finden Sie hier.
Um neue Parameter hinzuzufügen oder zu entfernen sowie neue Elemente hinzuzufügen, müssen Sie die Integrationsdatei bearbeiten, die in unserem Fall ninzio_vc.php ist.
vc_remove_param (); vc_add_param (); oder vc_add_params (); Funktionen.Das Hinzufügen neuer Inhaltselemente zu Visual Composer wird durchgeführt, wenn eine Shortcodes-Datei in Ihrem Theme oder Theme-Add-On vorhanden ist (wie in unserem Fall). Zuerst müssen Sie mit der Funktion überprüfen, ob unser Plugin für ninzio-addons installiert und aktiv ist:
if (definiert ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) … neuer Elementcode geht hier hin…Wie versteht Visual Composer, dass neue Elemente hinzugefügt wurden? Mit add_action ();.
add_action ('init', 'focuson_ninzio_integrateVC'); Funktion focuson_ninzio_integrateVC () … neue ElementeWir werden die Aktion nutzen drin, gib uns das:
if (definiert ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); Funktion focuson_ninzio_integrateVC () … neue ElementeJetzt können wir unsere neuen Elemente hinzufügen, für die wir eine weitere neue Funktion benötigen:
Diese Funktion erfordert einen Parameter: ein Array spezieller Attribute, die Ihren Kurzcode beschreiben. Als Beispiel fügen wir ein benutzerdefiniertes Trennelement hinzu:
"Separator", 'base' => "nz_sep", 'class' => 'nz-sep', 'show_settings_on_create' => false, 'category' => esc_html __ ("Ninzio", 'focuson'), 'icon' => 'icon-separator', 'description' => 'Dieses Element verwenden, um den Inhalt zu trennen', 'js_view' => ", 'params' => array (… Das sind viele Attribute! Lassen Sie uns die wichtigsten hervorheben:
Name verleiht Ihrem benutzerdefinierten Element einen eindeutigen beschreibenden Namen. Benutzer werden es auf der Registerkarte "Visual Composer" sehen.Base, nicht weniger wichtig als Name, ist der Name des Shortcode-Tags. Wenn Sie mit der Erstellung von benutzerdefinierten Kurzcodes vertraut sind, wissen Sie, dass alle benutzerdefinierten Kurzcodes über Tags verfügen. Unser benutzerdefiniertes Trennzeichen hat beispielsweise ein nz_sep Etikett. Die Elementbasis sollte eindeutig sein und genauso benannt werden, wie der Name des Shortcodes in Ihrer shortcodes.php-Datei steht (wie in unserem Focuson-Thema):'20', 'bottom' => '20', 'type' => 'solid', 'color' => '#eeeeee', 'align' => 'left', 'width' => ", 'height '=> "), $ atts)); $ styles = ""; if (isset ($ color) &&! empty ($ color)) $ styles. = 'Farbe unten:'. $ color. ';'; if (isset ($ width) &&! empty ($ width)) $ styles. = 'width:'. absint ($ width). 'px;'; else $ styles. = 'width: 100%;'; if (isset ($ height) &&! empty ($ 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) &&! empty ($ bottom)) $ styles. = 'margin-bottom:'. absint ($ bottom). 'px;'; $ output = ''; return $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
Klasse ist nicht kritisch, aber eine wichtige Option, die als nicht eindeutige Kennung dient. Die Benennung sollte beschreibend und ohne Leerzeichen sein. Verwenden Sie Bindestriche oder Unterstriche.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 Elementmenü von Visual Composer gruppieren möchten, sollten Sie eine benutzerdefinierte Kategorie hinzufügen. Wenn Sie Elemente in ein aufnehmen möchten bestehender Kategorie 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ü gestalten können. Zum Beispiel:i.icon-separator, .nz-sep .vc_element-icon hintergrundbild: url (… /images/shortcodes/sep.png)!wichtig;
Beschreibung fügt Ihrem benutzerdefinierten Element eine kleine Beschreibung hinzu. Benutzer werden dies sehen.js_view ist ein sehr wichtiger Parameter. Wenn Sie über Elemente verfügen, die übergeordnete und untergeordnete Komponenten enthalten (z. B. Inhaltsboxen, die übergeordnete und untergeordnete Boxelemente des Hauptcontainers enthalten, wobei übergeordnete und untergeordnete Elemente über separate Attribute verfügen), sollte dieses Attribut den Wert haben VcColumnView. Wir werden die komplexeren Details gleich untersuchen.Params ist das Array von Parametern, das zu Ihrem benutzerdefinierten Element hinzugefügt werden soll. Es verhält sich ähnlich wie das vc_add_params () Funktion, aber in der verschachtelt vc_map () Funktion.Containerelemente mit untergeordneten Elementen erfordern vor dem Hinzufügen eine bestimmte Konfiguration. In dem vc_map () Funktion müssen wir ein paar weitere Parameter hinzufügen, um unsere Elemente entweder zu einem Container oder einem untergeordneten Element eines anderen Elements zu machen.
Angenommen, wir möchten ein neues Element "Inhaltsboxen" hinzufügen. Unser Inhaltselement besteht aus zwei Teilen:
Eine Inhaltsbox kann unbegrenzt untergeordnete Boxelemente haben. Wir haben also zwei Probleme zu lösen:
Um Verwirrung so weit wie möglich zu vermeiden, betrachten wir ein vorhandenes Element. In unserem Focuson-Thema haben wir ein Element „Inhaltsboxen“ mit zwei zusätzlichen Parametern von besonderem Interesse:
"as_parent" => array ('only' => 'nz_box')Erinnere dich an die Base Parameter unseres vc_map () Funktion? Hier mit as_parent, wir registrieren die nz_content_box Element als übergeordnetes Element nur Für ein nz_box untergeordnetes Element.
"js_view" => 'VcColumnView'
Wann js_view ist eingestellt auf VcColumnView Visual Composer fügt dem Element im Editor zusätzliche UI-Funktionen hinzu, sodass wir ein neues untergeordnetes Element hinzufügen können.
In der gleichen Richtung unsere nz_box Elementcode hat einen zusätzlichen Parameter:
"as_child" => array ('only' => 'nz_content_box'),Mit as_child wir registrieren die nz_box Element als Kind, aber nur Für ein nz_content_box übergeordnetes Element.
Wenn Sie jetzt das Visual Composer-Menü aufrufen, klicken Sie auf das neu hinzugefügte Inhaltsfeld Element, Sie werden sehen… es funktioniert nicht. Es wurde keine übergeordnete / untergeordnete Funktionalität hinzugefügt, da wir noch eine Sache tun müssen, die wir auf Klassen erweitern müssen:
WPBakeryShortCodesContainerWPBakeryShortCodeDie erste Klasse ist für übergeordnete Elemente zuständig, die zweite für untergeordnete Elemente. Also gleich nach der Aktionsfunktion hinzufügen:
if (class_exists ('WPBakeryShortCodesContainer')) Klasse WPBakeryShortCode_nz_Content_Box erweitert WPBakeryShortCodesContainer Wie Sie sich erinnern, war das übergeordnete Element des Inhaltsfelds die Basis nz_content_box, Dieser Name sollte auch in dem Klassennamen vorhanden sein, der die Erweiterung erweitert WPBakeryShortCodesContainer Klasse. In unserem Fall lautet der neue Klassenname WPBakeryShortCode_nz_Content_Box.
if (class_exists ('WPBakeryShortCode')) Klasse WPBakeryShortCode_nz_Box erweitert WPBakeryShortCode Gleiches gilt für das untergeordnete Element. Der Basisname war nz_box und der neue Klassenname wird sein WPBakeryShortCode_nz_Box.
Wie auch immer Sie Ihre Elementbasis benennen, sie sollte im neuen Klassennamen vorhanden sein.
Wenn Sie jetzt noch einmal den Seiteneditor betrachten, werden Sie feststellen, dass das neue Inhaltsfeldelement über eine untergeordnete / übergeordnete Funktionalität verfügt.
Nach harter Arbeit können wir die Früchte unserer Arbeit ernten. Schauen Sie sich die Startseite von Focuson Theme an. Lassen Sie uns diese Homepage mit Visual Composer erstellen.
Die Struktur kann in mehrere Abschnitte unterteilt werden:
Mit Visual Composer ist dies nur eine Momentarbeit.
Wir werden jeden Block innerhalb des separaten Elements "Row" mit mindestens einem Element "Column" umschließen. Wie bereits erwähnt, ist dies die erforderliche und minimale Struktur der Visual Composer-Seiten.
Focuson Theme hat den Revolution Slider integriert. Der Schieberegler wird nicht mit Visual Composer hinzugefügt. Sobald Sie den Revolution Slider und den Visual Composer installiert haben, wird das neue Element "Revolution-Schieberegler" angezeigt. Dies ist ein kostenloses Add-On des Revolution-Schiebereglers. Mit diesem Element können Sie einen Schieberegler in die Seite einfügen, auch wenn Ihr Design nicht in Visual Composer integriert ist.
Erinnern Sie sich an das Beispiel des Inhaltselements? Wir können erstaunliche Inhaltskästen mit unserem benutzerdefinierten Element erstellen:
In diesem Abschnitt verwenden wir
Fast alle Elemente werden benutzerdefiniert hinzugefügt.
Für die Zähler haben wir für die Ästhetik Zeilenhintergrundoptionen (Bild und Farbe) verwendet. Alle diese Optionen werden von Ninzio aus benutzerdefiniert hinzugefügt. Das benutzerdefinierte Element des Zählers wird in diese Zeile eingefügt.
Mit Visual Composer-Spalten können wir zweispaltigen Inhalt hinzufügen:
Fast alle diese Elemente werden benutzerdefiniert hinzugefügt, nur das Element "Custom Heading" ist in Visual Composer standardmäßig enthalten. Im Backend-Editor wirkt er unsymmetrisch, aber am Frontend sehen Sie eine schön aussehende Struktur. Beim Content Management geht es nicht nur um das Ausfüllen von Seiten, sondern auch um einen logischen und kreativen Prozess. Sie müssen die Dimensionen von Bildern und Text berücksichtigen und berücksichtigen, wie sie auf verschiedenen Geräten aussehen. Manchmal sind auch ansprechende Korrekturen erforderlich. Glücklicherweise verfügt Visual Composer über die erforderlichen Werkzeuge. In den Spaltenbearbeitungsoptionen finden Sie die Responsive Optionen Registerkarte, auf der Sie die Spaltengröße je nach Gerätegruppe anpassen können.
Dies ist nicht mehr als eine Zeile mit Hintergrundbild und Parallaxe-Effekt, ein kleiner Inhalt mit einem Tooltip, Titel und Schaltflächen.
Dies ist ein zusätzliches Element von Ninzio. ein Karussell von Teammitgliedern.
Wieder ist hier nichts Ungewöhnliches. ein gewöhnliches Zeilenelement mit zwei Spalten, die jeweils Inhalt enthalten.
Der Trick dabei ist jedoch, dass sich das Bild rechts nicht in der zweiten Spalte befindet. Es ist eigentlich als Zeilenhintergrundbild festgelegt, sodass die rechte Spalte hier leer ist.
Wir haben auch ein benutzerdefiniertes Element zum Hinzufügen von Testimonials erstellt. Wieder nichts Ungewöhnliches hier zu spielen.
Und der letzte Abschnitt ist Sponsorenlogos. Es ist ein Karussell von Logos in einer Reihe mit grauer Hintergrundfarbe. Dieses Element wird ebenfalls benutzerdefiniert hinzugefügt.
Das ist es! Jetzt wissen Sie alles, was Sie benötigen, um Visual Composer in Ihr Design zu integrieren und Seiten schnell und einfach zu erstellen. Als Ressource für weitere Studien schlage ich vor, dass Sie sich die offizielle Wiki-Seite für Visual Composer ansehen. Wenn Sie Fragen haben, können Sie unten einen Kommentar hinterlassen!
