Come estendere Visual Composer con elementi di contenuto personalizzati

Nell'esercitazione precedente abbiamo guardato a Visual Composer per gli sviluppatori di tema; programma di installazione di licenza e tecnico. In questo tutorial daremo ulteriormente le cose, estendere Visual Composer e l'impostazione fino a costruire pagine.

Funzionalità predefinite di Visual Composer

Prima guardiamo realmente costruire una pagina, è opportuno eseguire attraverso alcune delle caratteristiche predefinite.

Elementi di contenuto

Visual Composer è dotato di una vasta gamma di elementi di contenuto incorporati. Oltre a questo, Visual Composer offre oltre 200 componenti aggiuntivi, gratuiti e a pagamento.

Per impostazione predefinita Visual Composer è abilitata solo per pagine, ma è possibile anche attivare per post e tipi di post anche personalizzati. Queste e altre opzioni possono essere gestiti all'interno di Visual Composer ruolo Manager. C'è anche possibile controllare chi può utilizzare Visual Composer in vostro amministratore.

Il Manager di Shortcode consente di aggiungere elementi personalizzati con parametri. In un certo senso l'equivalente user-centrico del metodo sviluppatore di mappatura di elementi nuovi.

Generatore di griglia avanzata

Uno degli strumenti più interessanti per gli utenti è il generatore di griglia. Con esso, gli utenti possono creare qualsiasi tipo di griglia, con immagini, testo, pulsanti, post e così via, senza toccare il codice. Muratura-tipo griglie sono inoltre disponibili.

Libreria di modelli

La libreria di modelli offre agli utenti accesso a modelli professionali per struttura della pagina. Esempi tipici includono articolo layout, layout di pagina, pagine di parallasse, portafogli di atterraggio, è il nome. Come uno sviluppatore che si può anche creare il proprio e includerli con contenuti demo del vostro tema.

Rullo di tamburi per favore...

E, infine, si raggiunge quello che è probabilmente la parte più importante di Visual Composer: l'editor. Si tratta di un editor di front-end e back-end, e con esso gli utenti possono creare pagine senza conoscenza di codifica.

Con l'editor di front-end è modificare esattamente quello che si vede. È certamente più cosa si vedere Is What You Get rispetto all'editor WYSIWYG di WordPress di default!

Generatore di pagina funziona con un sistema di righe e colonne. Ogni elemento aggiunto alla pagina è racchiuso in un contenitore di riga. È possibile aggiungere più elementi alla stessa riga, in colonne, o ulteriori righe nidificate. La schermata qui sotto evidenzia come elementi, righe, colonne, possono essere aggiunti, modificati e rimosso.

Avendo coperto la funzionalità di base disponibili, diciamo no Disabilita la nostra attenzione per alcuni lo sviluppo. Stiamo andando per estendere la funzionalità predefinita di Visual Composer e aggiungere nuovi elementi personalizzati.

Estendere Visual Composer

Eseguire l'override di qualsiasi elemento in Visual Composer è necessario prima copiare il file di modello dalla cartella plugin Visual Composer (js_composer) > includono > modelli per il yourtheme > vc_templates cartella. Dal tutorial precedente si potrebbe ricordare che nel nostro tema Focuson abbiamo quattro file:

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

E come abbiamo discusso, denominazione è molto importante qui. Questi modelli dovrebbero essere denominati esattamente come sono di default la cartella plugin di VC.

Dopo aver duplicato il file di modello si è pronti per sovrascriverlo. Vediamo, per esempio, che cosa è nel primo vc_columns.php di file. Se si ha familiarità con la creazione di shortcode ci sarà niente di nuovo per voi qui.

La struttura dei file può essere diviso in tre parti:

1. Estrarre gli attributi shortcode
2. Preparare le impostazioni per l'output
3. Uscita la struttura shortcode

Ma cosa succede se si desidera aggiungere o rimuovere attributi shortcode esistenti, come si comporterebbe con quello? Incontra tre nuove funzioni:

vc_remove_param();

Questa funzione rimuove il parametro shortcode da un elemento esistente o personalizzato. Per rimuovere l'attributo, destinazione il shortcode specifico con il nome, ad esempio vc_column e il nome dell'attributo, ad esempio el_class.

1

vc_remove_param( "vc_column", "el_class" );

vc_add_param();

Questa funzione aggiunge nuovi parametri a un elemento esistente o personalizzato. Come con la funzione di vc_remove_param(), target lo shortcode specifico con il relativo nome, ad esempio vc_column e include la matrice di parametro:

1

vc_add_param('vc_column', array(

2

    "type"       => "dropdown",

3

    "class"      => "",

4

    "heading"    => "Animate",

5

    "param_name" => "animate",

6

    "value"      => array(

7

    "False"  => 'false',

8

    "True"   => 'true'

9

    )

10

));

vc_add_params();

Questa funzione è simile a vc_add_param(), ma ti permette di aggiungere più parametri per un elemento. Si può trovare un elenco di tutti i tipi di parametro qui.

Per aggiungere o rimuovere nuove params, nonché aggiungere nuovi elementi, è necessario modificare il file di integrazione, che nel nostro caso è ninzio_vc.php.

1. Iniziamo disattivando l'editor di front-end. L'editor di front-end è una caratteristica davvero cool, ma i nostri elementi personalizzati non è supportata. Spetta a voi, come uno sviluppatore di tema, se si desidera supportare i redattori di front-end e/o back-end.
2. Rimuovere tutti i parametri non necessari o non supportati da elementi mirati con vc_remove_param();
3. Aggiungere nuovi parametri a elementi esistenti con il vc_add_param(); o vc_add_params(); funzioni.
4. Quindi aggiungere nuovi elementi...

Come aggiungere elementi personalizzati

Aggiunta di nuovi elementi di contenuto di Visual Composer avviene quando un file di codici brevi è presente nel tuo tema o tema Add-on, come nel nostro caso, quindi, prima abbiamo bisogno di verificare con la funzione se nostro ninzio-addons plugin è installato e attivo:

1

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

2

    … new elements code goes here...

3

}

Come il Visual Composer comprende che sono stati aggiunti nuovi elementi? Con add_action();.

1

add_action( 'init', 'focuson_ninzio_integrateVC');

2

3

function focuson_ninzio_integrateVC() {... new elements}

Useremo il init di azione, ci ha dato questo:

1

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

2

3

    add_action( 'init', 'focuson_ninzio_integrateVC');

4

5

    function focuson_ninzio_integrateVC() {... new elements}

6

7

}

Ora siamo pronti per aggiungere i nostri nuovi elementi, per cui abbiamo bisogno di un'altra nuova funzione:

vc_map();

Questa funzione richiede un parametro: una matrice di attributi speciali che descrivono il tuo shortcode. Ad esempio, aggiungeremo un elemento separatore personalizzato:

1

<?php 

2

3

/*  SEPARATOR            (CONTENT)

4

/*-------------------------------*/

5

6

    vc_map(array(

7

  	'name'                    => "Separator",

8

		'base'                    => "nz_sep",

9

		'class'                   => 'nz-sep',

10

		'show_settings_on_create' => false,

11

		'category'                => esc_html__("Ninzio",'focuson'),

12

		'icon'                    => 'icon-separator',

13

		'description'             => 'Use this element to separate content',

14

		'js_view'                 => '',

15

		'params'                  => array(

16

17

            ...

Questo è un sacco di attributi! Cerchiamo di evidenziare i più importanti:

• nome dà un nome descrittivo univoco di elemento personalizzato. Gli utenti si vedranno nella scheda Visual Composer.
• base, non meno importante di nome, è il nome del tag shortcode. Se si ha familiarità con la creazione di shortcode personalizzati, saprete che tutti i codici funzione personalizzate hanno tag. Ad esempio, il nostro separatore personalizzato ha un tag di nz_sep. La base dell'elemento deve essere univoco e deve essere denominato esattamente come il nome dello shortcode è nel file shortcodes.php (come abbiamo nel nostro tema Focuson):

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).'">&nbsp;</div></div>';

49

		return $output;

50

	}

51

	add_shortcode('nz_sep', 'nz_sep');

52

53

?>

• la classe non è critica, ma un'opzione importante, che serve come un identificatore non è univoco. La denominazione deve essere descrittivo e senza spazi, utilizzare trattini o caratteri di sottolineatura.
• show_settings_on_create è un parametro booleano e autodescrittivo.
• categoria è molto importante. Se si desidera raggruppare gli elementi personalizzati all'interno di una scheda di menu personalizzato nel menu di elementi di Visual Composer, è necessario aggiungere una categoria personalizzata. Se si desidera includere elementi in una categoria esistente, utilizzare il nome di quella scheda di menu esistente:

• icona è simile alla classe. Aggiungiamo un nome icona così noi possiamo stile shortcode nel menu Visual Composer. Per esempio:

1

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

• Descrizione aggiunge una piccola descrizione di elemento personalizzato. Gli utenti vedranno questo.
• js_view è un parametro molto importante. Quando si dispone di elementi che comprendono componenti padre e figlio (ad esempio contenuti scatole, che hanno un genitore contenitore principale e gli elementi di casella figlio, dove gli elementi padre e figlio hanno attributi separati) questo attributo dovrebbe avere il valore VcColumnView. Esamineremo i dettagli più complessi in un attimo.
• params è la matrice di parametri da aggiungere all'elemento personalizzato. Si comporta similmente alla funzione vc_add_params(), ma nidificato nella funzione vc_map().

Genitore e bambino elementi

Gli elementi contenitore con gli elementi figlio richiedono una configurazione specifica prima di aggiungere. Nella funzione vc_map() abbiamo bisogno di aggiungere un paio più parametri per rendere i nostri elementi in un container, o il figlio di un altro elemento.

Ad esempio, dire che vogliamo aggiungere un nuovo elemento "Caselle di contenuto". Il nostro elemento casella contenuto comprende due parti:

1. l'elemento padre con i suoi attributi
2. e gli elementi figlio di casella, ciascuno con i loro attributi.

Una casella di contenuto può avere elementi di casella illimitato figlio. Così abbiamo due problemi da risolvere:

1. In qualche modo dobbiamo dire Visual Composer che la casella di contenuto è un elemento figlio/padre,
2. poi che una casella è possibile solo figlio di un elemento di contenuto casella di padre, e che un elemento della casella contenuto è il padre solo possibili per gli elementi figlio di casella.

Codice elemento padre

Per evitare confusione per quanto possibile, diamo un'occhiata a un elemento esistente. Nel nostro tema Focuson abbiamo un elemento di "Scatole di contenuto", con due parametri aggiuntivi di particolare interesse:

1

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

Ricordate il parametro base della nostra funzione vc_map()? Qui, con as_parent, registriamo l'elemento nz_content_box come un genitore solo per un elemento figlio di nz_box.

1

"js_view" => 'VcColumnView'

Quando js_view è impostata su VcColumnView Visual Composer aggiunge ulteriori funzionalità di interfaccia utente per l'elemento nell'editor, quindi possiamo aggiungere un nuovo elemento figlio.

Codice elemento figlio

Nella stessa ottica, il nostro codice di elemento di nz_box presenta un parametro aggiuntivo:

1

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

Con as_child registriamo l'elemento nz_box come un bambino, ma solo per un elemento padre di nz_content_box.

Estendere le classi

Se ora visitare il menu di Visual Composer e fare clic sull'elemento appena aggiunto casella contenuto, si vedrà... non funziona. Nessuna funzionalità di padre/figlio è stato aggiunto, perché c'è ancora una cosa che dobbiamo fare – dobbiamo estendere alle classi:

• WPBakeryShortCodesContainer
• WPBakeryShortCode

La prima classe è responsabile per gli elementi padre, la seconda è responsabile per gli elementi figlio. Così, subito dopo la funzione azione aggiungere:

1

if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {

2

    class WPBakeryShortCode_nz_Content_Box extends WPBakeryShortCodesContainer {}

3

}

Come ricorderete, la base dell'elemento padre casella contenuto era nz_content_box, questo nome dovrebbe anche essere presente nel nome della classe che estende la classe WPBakeryShortCodesContainer. Nel nostro caso il nuovo nome della classe è WPBakeryShortCode_nz_Content_Box.

1

if ( class_exists( 'WPBakeryShortCode' ) ) {

2

3

    class WPBakeryShortCode_nz_Box extends WPBakeryShortCode {}

4

5

}

Lo stesso vale per l'elemento figlio. Il nome di base era nz_box e il nuovo nome di classe sarà WPBakeryShortCode_nz_Box.

Qualunque cosa è il nome vostra base elemento dovrebbe essere presente nel nome della nuova classe.

Ora, se si dà un'occhiata all'editor di pagina ancora una volta, vedrete che il nuovo elemento di contenuto casella ha funzionalità padre e figlio.

Pagine di edificio con Visual Composer

Dopo un duro lavoro si possono raccogliere i frutti del nostro lavoro. Date un'occhiata alla homepage principale Focuson tema. Costruiamo quello homepage con Visual Composer.

La struttura può essere divisa in diverse sezioni:

• Presentazione Slider
• Caselle di contenuto
• Progetti consigliati
• Contatori
• Informazioni aggiuntive, come "Perché sceglierci" che consiste di due colonne
• Striscione
• Membri del team
• Un isolato più delle informazioni supplementari con due colonne
• Testimonianze clienti
• Loghi degli sponsor

Ricreare questo è ma il lavoro di un momento con Visual Composer.

Andrà a capo ogni blocco all'interno dell'elemento "Row" separata con elemento almeno una "colonna". Come abbiamo discusso, questa è la struttura necessaria e minima di pagine di Visual Composer.

Presentazione Slider

FocusOn tema ha integrato il dispositivo di scorrimento di rivoluzione. Il dispositivo di scorrimento non viene aggiunto con Visual Composer, tuttavia, una volta che si installa rivoluzione Slider e Visual Composer, noterete un nuovo elemento "Rivoluzione slider". Si tratta di un componente aggiuntivo gratuito da rivoluzione slider, e con quell'elemento è possibile inserire un dispositivo di scorrimento nella pagina, anche se il tema non è integrato con Visual Composer.

Caselle di contenuto

Ricordi dell'elemento "Contenuto scatole" di esempio? Possiamo costruire scatole contenuti incredibile con nostro elemento personalizzato:

Progetti consigliati

In questa sezione usiamo

1. un text_column
2. un elemento di divario, per aggiungere spazio
3. una singola immagine centrata (che serve come un divisore di linea Nizza)
4. un altro divario
5. e i "progetti recenti" elemento

Quasi tutti gli elementi qui sono aggiunto su misura.

Contatori

Per i contatori abbiamo usato opzioni di sfondo della riga (immagine e colore) per l'estetica. Tutte queste opzioni sono aggiunto da Ninzio su misura. Abbiamo messo l'elemento personalizzato del contatore interno che in stile di riga.

"Perché sceglierci" Info blocco

Con colonne di Visual Composer possiamo aggiungere contenuto della doppio-colonna:

Quasi tutti questi elementi sono personalizzato aggiunto, solo il "personalizzato titolo" elemento viene fornito di default con Visual Composer. Nell'editor di back-end sembra asimmetrico, ma il front-end si vedrà una struttura gradevole. Gestione non tratta semplicemente riempire le pagine contenuto, è anche un processo logico e creativo. Dovete prendere le dimensioni di immagini e testo di conto e considera come appaiono su diversi dispositivi. Inoltre sono necessarie correzioni a volte reattive. Fortunatamente, Visual Composer ha tutti gli utensili necessari. Nelle colonne modificare opzioni si possa trovare scheda reattivo opzioni dove è possibile regolare la dimensione della colonna in base a gruppi di dispositivi.

Striscione

Si tratta di nulla di più di una riga con un'immagine di sfondo ed effetto di parallasse, una piccola quantità di contenuto in esso con un oggetto tooltip, titolo e pulsanti.

Membri del team

Si tratta di un ulteriore elemento da Ninzio; un carosello di membri del team.

Blocco di informazioni "Soluzioni creative"

Ancora non c'è niente di insolito qui; un elemento riga ordinaria con due colonne, ognuna delle quali contiene contenuto.

Ma qui il trucco è che l'immagine a destra non si trova all'interno della seconda colonna, in realtà è impostata come immagine di sfondo della riga, quindi qui la colonna di destra è vuota.

Testimonianze dei clienti

Abbiamo anche creato un elemento personalizzato per aggiungere testimonianze. Ancora una volta, niente di insolito in gioco qui.

Loghi degli sponsor

E l'ultima sezione è loghi degli sponsor. È un carosello di loghi all'interno di una riga con un colore di sfondo grigio. Questo elemento è anche personalizzato aggiunto.

Conclusione

Questo è tutto! Ora sapete tutto ciò che è necessario per integrare Visual Composer con il vostro tema e creare pagine rapidamente e facilmente. Come una risorsa per ulteriore studio, vi suggerisco di che dare un'occhiata alla pagina del wiki ufficiale per Visual Composer. Se avete domande, non esitate a lasciare un commento qui sotto!