Share
Nel tutorial precedente abbiamo esaminato Visual Composer per gli sviluppatori di temi; licenza e impostazione tecnica. In questo tutorial andremo oltre, estendendo Visual Composer e configurandolo per creare pagine.
Prima di esaminare la creazione di una pagina, eseguiamo alcune delle funzioni predefinite.
Visual Composer è dotato di una vasta gamma di elementi di contenuto integrati. Oltre a questo, Visual Composer offre oltre 200 componenti aggiuntivi, sia gratuiti che a pagamento.
Per impostazione predefinita, Visual Composer è abilitato solo per le pagine, ma puoi anche abilitarlo per i post e anche per i tipi di post personalizzati. Queste e altre opzioni possono essere gestite da Visual Composer Role Manager. Qui puoi anche controllare chi può utilizzare Visual Composer nel tuo amministratore.
Shortcode Manager ti consente di aggiungere elementi personalizzati con parametri. In qualche modo l'equivalente incentrato sull'utente del metodo di sviluppo per mappare nuovi elementi.
Uno degli strumenti più interessanti per gli utenti è il costruttore della griglia. Con esso, gli utenti possono creare qualsiasi tipo di griglia, con immagini, testo, pulsanti, messaggi e così via, senza toccare il codice. Sono disponibili anche griglie in muratura.
Mmm griglieLa libreria di modelli offre agli utenti l'accesso a modelli professionali per la struttura della pagina. Esempi tipici includono layout di articoli, layout di pagine di destinazione, pagine di parallasse, portafogli, il nome. Come sviluppatore puoi persino crearne uno tuo e includerli con i contenuti dimostrativi del tuo tema.
E, infine, raggiungiamo quella che è probabilmente la parte più importante di Visual Composer: l'editor. Questo è un back-end e un editor di front-end, e con esso gli utenti possono creare pagine senza conoscenze di codifica.
L'editor di back-end di Visual Composer
L'editor di front-end di Visual ComposerCon l'editor di front-end puoi modificare esattamente ciò che vedi. È sicuramente di più Quello che vedi è quello che ottieni rispetto all'editor WordPress WYSIWYG predefinito!
Il generatore di pagine funziona con un sistema di righe e colonne. Ogni elemento aggiunto alla pagina è racchiuso all'interno di un contenitore di righe. Più elementi possono essere aggiunti alla stessa riga, in colonne o ulteriori righe annidate. Lo screenshot in basso evidenzia come elementi, righe, colonne possono essere aggiunti, modificati e rimossi.
Avendo coperto le funzionalità di base disponibili, non rivolgiamo la nostra attenzione ad alcuni sviluppi. Estenderemo la funzionalità predefinita di Visual Composer e aggiungeremo nuovi elementi personalizzati.
Per sovrascrivere qualsiasi elemento in Visual Composer devi prima copiare il file modello dalla cartella del plugin Visual Composer (js_composer)> include> modelli al yourtheme> vc_templates cartella. Dal precedente tutorial potresti ricordare che nel nostro tema Focuson abbiamo quattro file:
E come abbiamo discusso, la denominazione è molto importante qui. Questi modelli devono essere denominati esattamente come sono nella cartella predefinita del plug-in VC.
Dopo aver duplicato il file modello, sei pronto per sovrascriverlo. Vediamo, per esempio, cosa c'è nel primo file vc_columns.php. Se hai familiarità con la creazione di shortcode non ci sarà nulla di nuovo per te qui.
La struttura del file può essere suddivisa in tre parti:
Ma cosa succede se si desidera aggiungere o rimuovere gli attributi shortcode esistenti, in che modo dovresti gestirli? Incontra tre nuove funzioni:
Questa funzione rimuove il parametro shortcode da un elemento esistente o personalizzato. Per rimuovere l'attributo, scegli come target lo shortcode specifico con il nome vc_column e il nome dell'attributo, per esempio el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Questa funzione aggiunge nuovi parametri a un elemento esistente o personalizzato. Come con il vc_remove_param () funzione, ad esempio, lo specifico shortcode con il suo nome vc_column e includi l'array di parametri:
vc_add_param ('vc_column', array ("type" => "dropdown", "class" => "", "heading" => "Animate", "param_name" => "animate", "value" => array ( "False" => 'false', "True" => 'true')));Questa funzione è simile a vc_add_param (), ma ti consente di aggiungere più parametri a un elemento. Puoi trovare un elenco di tutti i tipi di parametri qui.
Per aggiungere o rimuovere nuovi parametri, così come aggiungere nuovi elementi, è necessario modificare il file di integrazione, che nel nostro caso è ninzio_vc.php.
vc_remove_param (); vc_add_param (); o vc_add_params (); funzioni.L'aggiunta di nuovi elementi di contenuto a Visual Composer avviene quando un file shortcode è presente nel tuo tema o nel tuo componente aggiuntivo, come nel nostro caso, quindi per prima cosa dobbiamo verificare con la funzione se il nostro plugin ninzio-addons è installato e attivo:
if (definito ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) ... il codice di nuovi elementi va qui ...In che modo Visual Composer comprende che sono stati aggiunti nuovi elementi? Con add_action ();.
add_action ('init', 'focuson_ninzio_integrateVC'); function focuson_ninzio_integrateVC () ... new elementsUseremo l'azione dentro, dandoci questo:
if (definito ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); function focuson_ninzio_integrateVC () ... new elementsOra siamo pronti ad aggiungere i nostri nuovi elementi, per i quali abbiamo bisogno di un'altra nuova funzione:
Questa funzione richiede un parametro: un array di attributi speciali che descrivono il tuo shortcode. Ad esempio aggiungeremo un elemento separatore personalizzato:
"Separatore", "base" => "nz_sep", "classe" => "nz-sep", "show_settings_on_create" => falso, "categoria" => esc_html __ ("Ninzio", "focuson"), "icona" => 'icon-separator', 'description' => 'Usa questo elemento per separare il contenuto', 'js_view' => ", 'params' => array (... Questo è un sacco di attributi! Evidenziamo il più importante:
nome dà un nome descrittivo univoco al tuo elemento personalizzato. Gli utenti lo vedranno nella scheda Visual Composer.base, non meno importante di nome, è il nome del tag di shortcode. Se hai familiarità con la creazione di codici brevi personalizzati, saprai che tutti gli shortcode personalizzati hanno tag. Ad esempio, il nostro separatore personalizzato ha a nz_sep etichetta. La base dell'elemento dovrebbe essere unica e dovrebbe essere chiamata esattamente come il nome dello shortcode è nel tuo file shortcodes.php (come nel nostro tema di Focuson):'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 (tipo $)) $ 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 = ''; restituire $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
classe non è un aspetto critico, ma un'opzione importante, che funge da identificatore non univoco. La denominazione deve essere descrittiva e senza spazi, utilizzare trattini o caratteri di sottolineatura.show_settings_on_create è un parametro booleano e auto-descrittivo.categoria è molto importante. Se si desidera raggruppare gli elementi personalizzati in una scheda menu personalizzata nel menu degli elementi di Visual Composer, è necessario aggiungere una categoria personalizzata. Se si desidera includere elementi in un esistente categoria usa il nome della scheda del menu esistente: 
icona è simile a classe. Aggiungiamo un nome di icona in modo che possiamo definire lo shortcode nel menu Visual Composer. Per esempio:i.icon-separator, .nz-sep .vc_element-icon background-image: url (... /images/shortcodes/sep.png)!important;
descrizione aggiunge una piccola descrizione al tuo elemento personalizzato. Gli utenti vedranno questo.js_view è un parametro molto importante. Quando si hanno elementi che comprendono componenti padre e figlio (ad esempio caselle di contenuto, che hanno un elemento padre principale e elementi casella figlio principale, dove elementi padre e figlio hanno attributi separati) questo attributo dovrebbe avere il valore VcColumnView. Esamineremo i dettagli più complessi in un attimo.params è l'array di parametri da aggiungere al tuo elemento personalizzato. Si comporta in modo simile al vc_add_params () funzione, ma nidificata nel vc_map () funzione.Gli elementi contenitore con elementi figlio richiedono alcune configurazioni specifiche prima di aggiungere. Nel vc_map () abbiamo bisogno di aggiungere un paio di parametri per rendere i nostri elementi un contenitore, o il figlio di un altro elemento.
Ad esempio, supponiamo di voler aggiungere un nuovo elemento "Contenitori". Il nostro elemento della scatola dei contenuti comprende due parti:
Una casella di contenuto può avere elementi box illimitati. Quindi abbiamo due problemi da risolvere:
Per evitare il più possibile la confusione, diamo un'occhiata a un elemento esistente. Nel nostro tema Focuson abbiamo un elemento "Contenitori", con due parametri aggiuntivi di particolare interesse:
"as_parent" => array ('only' => 'nz_box')Ricorda il base parametro del nostro vc_map () funzione? Qui, con as_parent, stiamo registrando il nz_content_box elemento come genitore solo per un nz_box elemento figlio.
"js_view" => 'VcColumnView'
quando js_view è impostato per VcColumnView Visual Composer aggiunge funzionalità UI aggiuntive all'elemento nell'editor, quindi possiamo aggiungere un nuovo elemento figlio.
Allo stesso modo, il nostro nz_box il codice elemento ha un parametro aggiuntivo:
"as_child" => array ('only' => 'nz_content_box'),Con as_child stiamo registrando il nz_box elemento da bambino, ma solo per un nz_content_box elemento genitore.
Se ora visiti il menu Visual Composer e fai clic sul nuovo aggiunto Casella di contenuto elemento, vedrai ... non funziona. Nessuna funzionalità genitore / figlio è stata aggiunta, perché c'è ancora una cosa che dobbiamo fare: dobbiamo estendere alle classi:
WPBakeryShortCodesContainerWPBakeryShortCodeLa prima classe è responsabile degli elementi parent, la seconda è responsabile degli elementi figli. Quindi, subito dopo la funzione di azione aggiungi:
if (class_exists ('WPBakeryShortCodesContainer')) class WPBakeryShortCode_nz_Content_Box estende WPBakeryShortCodesContainer Come ricordi, la base dell'elemento principale della casella del contenuto era nz_content_box, questo nome dovrebbe anche essere presente nel nome della classe che estende il WPBakeryShortCodesContainer classe. Nel nostro caso il nome della nuova classe è WPBakeryShortCode_nz_Content_Box.
if (class_exists ('WPBakeryShortCode')) class WPBakeryShortCode_nz_Box estende WPBakeryShortCode Lo stesso vale per l'elemento figlio. Il nome base era nz_box e il nuovo nome della classe sarà WPBakeryShortCode_nz_Box.
Qualunque cosa tu chiami il tuo elemento base dovrebbe essere presente nel nuovo nome della classe.
Ora, se guardi ancora una volta l'editor di pagine, vedrai che il nuovo elemento della casella di contenuto ha funzionalità figlio / genitore.
Dopo il duro lavoro possiamo raccogliere i frutti del nostro lavoro. Dai un'occhiata alla homepage principale di Focuson Theme. Costruiamo quella homepage con Visual Composer.
La struttura può essere suddivisa in diverse sezioni:
Ricreare questo è solo il lavoro di un momento con Visual Composer.
Conterremo ogni blocco all'interno dell'elemento "Riga" separato con almeno un elemento "Colonna". Come abbiamo discusso, questa è la struttura richiesta e minima delle pagine di Visual Composer.
Il tema di Focuson ha integrato il cursore di rivoluzione. Il cursore non viene aggiunto con Visual Composer, tuttavia, una volta installato Revolution Slider e Visual Composer, noterai un nuovo elemento "Slider rivoluzione". Questo è un componente aggiuntivo gratuito del dispositivo di scorrimento di Revolution e con questo elemento puoi inserire un cursore nella pagina, anche se il tuo tema non è integrato con Visual Composer.
Ricorda l'elemento "Contenitori di contenuti" di esempio? Possiamo creare stupende scatole di contenuti con il nostro elemento personalizzato:
In questa sezione usiamo
Quasi tutti gli elementi qui sono personalizzati.
Per i contatori abbiamo usato le opzioni di sfondo delle righe (immagine e colore) per l'estetica. Tutte queste opzioni sono personalizzate da Ninzio. Inseriamo l'elemento contatore personalizzato all'interno di quella riga in stile.
Con le colonne di Visual Composer possiamo aggiungere contenuti a due colonne:
Quasi tutti questi elementi sono personalizzati, solo l'elemento "Titolo personalizzato" viene fornito come predefinito con Visual Composer. Nell'editor back-end appare asimmetrico, ma sul front-end vedrai una struttura dall'aspetto piacevole. La gestione dei contenuti non consiste semplicemente nel riempire pagine, è anche un processo logico e creativo. Devi tenere conto delle dimensioni di immagini e testo e considerare come appaiono su diversi dispositivi. A volte sono necessarie anche correzioni sensibili. Fortunatamente, Visual Composer ha gli strumenti richiesti. Nelle opzioni di modifica delle colonne puoi trovare il Opzioni reattive scheda in cui è possibile regolare la dimensione della colonna in base ai gruppi di dispositivi.
Questo non è altro che una riga con un'immagine di sfondo e un effetto di parallasse, una piccola quantità di contenuto in esso con un suggerimento, titolo e pulsanti.
Questo è un ulteriore elemento di Ninzio; un carosello di membri del team.
Ancora non c'è nulla di insolito qui; un elemento di riga ordinario con due colonne, ciascuna contenente 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 la colonna di destra qui è vuota.
Abbiamo anche creato un elemento personalizzato per aggiungere testimonianze. Di nuovo, niente di insolito in questo gioco.
E l'ultima sezione è il logo dello sponsor. È una sequenza di loghi all'interno di una riga con un colore di sfondo grigio. Questo elemento è anche personalizzato.
Questo è tutto! Ora sai tutto ciò che è necessario per integrare Visual Composer con il tuo tema e creare pagine rapidamente e facilmente. Come risorsa per ulteriori studi, ti suggerisco di dare un'occhiata alla pagina wiki ufficiale di Visual Composer. Se avete domande, non esitate a lasciare un commento qui sotto!
