So erweitern Sie Visual Composer mit benutzerdefinierten Inhaltselementen

() translation by (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.

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:

vc_column.php
vc_column_text.php
vc_row.php
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:

Extrahieren Sie Shortcode-Attribute
Bereite Einstellungen für die Ausgabe vor
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.

1	vc_remove_param( "vc_column", "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_param('vc_column', array(
    "type"       => "dropdown",
    "class"      => "",
    "heading"    => "Animate",
    "param_name" => "animate",
    "value"      => array(
    "False"  => 'false',
    "True"   => 'true'
    )
));

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.

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.
Entfernen Sie alle unnötigen oder nicht unterstützten Parameter von Zielelementen mit vc_remove_param ();
Hinzufügen neuer Parameter zu bestehenden Elementen mit dem vc_add_param (); oder vc_add_params (); Funktionen.
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.

1	if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {
2	… new elements code goes here...
3	}

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

1	add_action( 'init', 'focuson_ninzio_integrateVC');
2
3	function focuson_ninzio_integrateVC() {... new elements}

Wir werden die Aktion init verwenden und uns folgendes geben:

if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {

    add_action( 'init', 'focuson_ninzio_integrateVC');

    function focuson_ninzio_integrateVC() {... new elements}

}

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:

<?php 

/*  SEPARATOR            (CONTENT)
/*-------------------------------*/

    vc_map(array(
  	'name'                    => "Separator",
		'base'                    => "nz_sep",
		'class'                   => 'nz-sep',
		'show_settings_on_create' => false,
		'category'                => esc_html__("Ninzio",'focuson'),
		'icon'                    => 'icon-separator',
		'description'             => 'Use this element to separate content',
		'js_view'                 => '',
		'params'                  => array(
            
            ...

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):

<?php 

/*  SEPARATOR SHORTCODE
/*===================*/
    
	function nz_sep($atts, $content = null) {

		extract(shortcode_atts(
			array(
				'top'    => '20',
				'bottom' => '20',
				'type'   => 'solid',
				'color'  => '#eeeeee',
				'align'  => 'left',
				'width'  => '',
				'height' => ''
			), $atts)
		);

		$styles = "";

		if (isset($color) && !empty($color)) {
			$styles .= 'border-bottom-color:'.$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 = '<div class="sep-wrap '.sanitize_html_class($align).' nz-clearfix"><div class="nz-separator '.sanitize_html_class($type).'" style="'.esc_attr($styles).'">&nbsp;</div></div>';
		return $output;
	}
	add_shortcode('nz_sep', 'nz_sep');

?>

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:

1	i.icon-separator,.nz-sep .vc_element-icon {background-image:url(../images/shortcodes/sep.png)!important;}

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:

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

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

Irgendwie müssen wir Visual Composer mitteilen, dass die Inhaltsbox ein untergeordnetes / übergeordnetes Element ist.
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:

1	"as_parent" => array('only' => 'nz_box')

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.

1	"js_view" => 'VcColumnView'

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:

1	"as_child" => array('only' => 'nz_content_box'),

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:

1	if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
2	class WPBakeryShortCode_nz_Content_Box extends WPBakeryShortCodesContainer {}
3	}

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.

if ( class_exists( 'WPBakeryShortCode' ) ) {

    class WPBakeryShortCode_nz_Box extends WPBakeryShortCode {}

}

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

eine Textspalte
ein Lückenelement, um Platz hinzuzufügen
ein zentriertes Einzelbild (das als netter Linienteiler dient)
eine weitere Lücke
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!

1	<?php
2
3	/* SEPARATOR SHORTCODE
4	/===================/
5
6	function nz_sep($atts, $content = null) {
7
8	extract(shortcode_atts(
9	array(
10	'top' => '20',
11	'bottom' => '20',
12	'type' => 'solid',
13	'color' => '#eeeeee',
14	'align' => 'left',
15	'width' => '',
16	'height' => ''
17	), $atts)
18	);
19
20	$styles = "";
21
22	if (isset($color) && !empty($color)) {
23	$styles .= 'border-bottom-color:'.$color.';';
24	}
25
26	if (isset($width) && !empty($width)) {
27	$styles .= 'width:'.absint($width).'px;';
28	} else {
29	$styles .= 'width:100%;';
30	}
31
32	if (isset($height) && !empty($height)) {
33	$styles .= 'border-bottom-width:'.absint($height).'px;';
34	}
35
36	if (isset($type) && !empty($type)) {
37	$styles .= 'border-bottom-style:'.$type.';';
38	}
39
40	if (isset($top) && !empty($top)) {
41	$styles .= 'margin-top:'.absint($top).'px;';
42	}
43
44	if (isset($bottom) && !empty($bottom)) {
45	$styles .= 'margin-bottom:'.absint($bottom).'px;';
46	}
47
48	$output = '<div class="sep-wrap '.sanitize_html_class($align).' nz-clearfix"><div class="nz-separator '.sanitize_html_class($type).'" style="'.esc_attr($styles).'"> </div></div>';
49	return $output;
50	}
51	add_shortcode('nz_sep', 'nz_sep');
52
53	?>