Come integrare Visual Composer nei temi di WordPress

Visual Composer è un plugin per WordPress che consente di creare pagine utilizzando un'interfaccia drag-and-drop. Offre agli utenti la possibilità di stampare facilmente le pagine del layout e offre agli sviluppatori l'opportunità di aggiungere valore ai temi WordPress. In questo tutorial esamineremo le implicazioni legali e tecniche dell'integrazione di Visual Composer in temi pronti per la vendita.

Visual Composer include:

• Editor di WordPress combinato front-end e back-end.
• Oltre 40 elementi di contenuto integrati pronti all'uso e oltre 200 componenti aggiuntivi, progettati per portare il tuo sito Web al livello successivo.
• Libreria di modelli che consente agli utenti di WordPress di accedere a centinaia di modelli di layout di alta qualità.
• Skin builder per modificare rapidamente l'aspetto visivo del tema.
• Generatore di griglia avanzato per post, portfolio, media e tipi di post personalizzati.

Quindi queste sono le caratteristiche principali di Visual Composer, tutto incluso, compreso il supporto professionale per $ 34 (licenza regolare a partire da dicembre 2016). 

Visual Composer per sviluppatori di temi

Pensiamo per un momento al motivo per cui gli sviluppatori di temi dovrebbero integrare o estendere Visual Composer e quali sono le implicazioni della licenza per farlo.

La vendita di temi WordPress può essere un'attività lucrativa, sia che tu stia vendendo singolarmente o attraverso un mercato come ThemeForest. Come autori di temi (Temi di Ninzio) capiamo le ricompense, ma sappiamo quanto può essere difficile lo sviluppo del tema, e cosa ogni sviluppatore vuole dal suo prodotto:

• Riduzione dei tempi e dei costi di sviluppo.
• Un prodotto di alta qualità.
• Reddito massimizzato dalle vendite
• Tempo di supporto ridotto
• Concentrati sulle nuove funzionalità e sul marketing
  

E tu sai cosa? Visual Composer può aiutarti a raggiungere questi obiettivi direttamente o indirettamente. Lasciami spiegare come:

Molti temi WordPress hanno compilatori di pagina incorporati e la loro costruzione è diventata una tendenza negli anni precedenti, ma oggigiorno, con una maggiore concorrenza, è estremamente svantaggioso in termini di costi e tempo per sviluppare una soluzione personalizzata per il tema. Invece, Visual Composer può essere integrato nel tuo tema e offerto gratuitamente ai tuoi acquirenti (gratis da usare solo con il tuo tema).

Se sfogli i principali temi WordPress di Themeforest, noterai che quasi tutti i temi sono integrati da Visual Composer, inclusi i temi con un generatore di pagine incorporato personalizzato. Visual Composer è un prodotto ben noto, testato migliaia di volte da milioni di utenti e sviluppatori. 

Top temi WordPress su Themeforest

A questo punto abbiamo chiarito il motivo per cui Visual Composer è diventato (quasi) conoscenza necessaria per sviluppatori di temi WordPress di successo e perché dovresti considerare di integrarlo nei tuoi temi.

Le domande seguenti sono: come integrare Visual Composer e abbiamo il diritto di farlo?

Integrazione tematica: guida legale

Se sei uno sviluppatore di temi che pensa di includere Visual Composer nei tuoi temi, ecco un breve riepilogo di ciò che è necessario:

"Il 22 gennaio 2013 Envato ha aggiornato le licenze e non è più possibile utilizzare gli articoli dei marketplace all'interno dei propri articoli che saranno in vendita sui marketplace di Envato, senza un accordo di partnership tra due autori. In questo caso tra me (Michael M) e te (autore del tema). "- Michael M

Quindi ... se vuoi includere Visual Composer nel tuo tema devi scrivere a Michael? Fortunatamente no. Questo processo è stato automatizzato. Esaminiamo, passo dopo passo, come possiamo abilitare correttamente Visual Composer.

Acquista licenza estesa

Per prima cosa dovrai acquistare la licenza estesa di Visual Composer da CodeCanyon. Al momento della scrittura il prezzo per una licenza estesa è $ 170.

Licenza estesa di Visual Composer da CodeCanyon

Cos'è una "Licenza estesa"?

La licenza estesa consente l'utilizzo del plug-in, da parte dell'utente o di un cliente, in un unico prodotto a cui gli utenti finali possono essere addebitati. Il prezzo totale include il prezzo dell'articolo e una commissione di acquisto.

In sostanza, si acquista una licenza sviluppatore per utilizzare Visual Composer con uno dei temi. I clienti che acquistano quel tema non sono tenuti ad acquistare la regolare licenza di Visual Composer. 

Cosa non copre?

Non è possibile utilizzare una licenza estesa per più temi, né è possibile condividere la licenza estesa con qualcun altro. Non dovrai condividere la chiave di licenza con i tuoi clienti e i tuoi clienti non dovranno attivare Visual Composer (la copia che accompagna il tuo tema). 

Informazioni sugli aggiornamenti di Visual Composer? 

Una delle domande più comuni che abbiamo sentito su Ninzio Themes è: "Non riesco ad aggiornare Visual Composer". Questo non viene fatto dal client end; ogni aggiornamento di Visual Composer dovrebbe essere testato e incluso negli aggiornamenti del tema.

La "Licenza In-Stock"

Ma aspetta un minuto - afferma WPBakery "non è più possibile utilizzare gli articoli dei marketplace all'interno dei tuoi articoli che saranno in vendita sui marketplace di Envato". Quindi, come puoi includere Visual Composer nei tuoi temi in vendita su ThemeForest se la tua licenza estesa non lo consente? È qui che entra in gioco lo speciale "accordo" tra te e Michael M (Visual Composer Plugin Author): la "Licenza In-Stock".

Una volta acquistata la licenza estesa da CodeCanyon, vai al portale di supporto di WPBakery e accedi con il tuo login Envato.

Schermata di accesso di WPBakery

Un messaggio popup con Autorizza il portale di supporto di WPBakery per connettersi al tuo account? apparirà; clic Approvare. Successivamente, se hai già acquistato la licenza estesa, WPBakery mostra automaticamente la licenza appena acquistata nella dashboard, quindi seleziona la licenza, inserisci il nome del tema e premi Sottoscrivi. La tua licenza estesa diventerà una "Licenza In-Stock". ThemeForest lo sa, WPbakery lo sa, sai - tutto è concesso in licenza, quindi puoi includere il Visual Composer nel tuo tema e vendere il tema su ThemeForest.

A questo punto, abbiamo finito di esaminare gli aspetti legali dell'integrazione di Visual Composer, ora è il momento di esaminare il lato tecnico.

Integrazione tematica: guida tecnica

Non c'è molto da fare per integrare Visual Composer con il tuo tema. Spiegheremo il processo utilizzando uno dei nostri temi, Focuson, come esempio.

Concentrarsi su

Crea l'ambiente richiesto

Abbiamo bisogno delle seguenti cose:

1. Un file php con elementi personalizzati (gli shortcode del tema). Nel nostro caso questo è chiamato "shortcodes.php" che si trova nel plugin "ninzio-addons" (un plugin con funzionalità personalizzate a tema). "Shortcodes.php" è responsabile dell'output finale di shortcode. Per una guida su come creare gli shortcode di WordPress, dai un'occhiata al tutorial di Rohan Mehta Come iniziare con gli shortcode di WordPress.
2. Un file php per integrare Visual Composer. Questo file contiene le opzioni dell'elemento personalizzato, visualizzate nel menu del pannello di controllo Visual Composer. Nel nostro caso questo è chiamato "ninzio_vc.php" e si trova in cartella tematica> include.
3. Una cartella di modelli di Visual Composer, che conterrà i file php degli elementi predefiniti di Visual Composer, nel caso in cui sia necessario sovrascriverli. Questa cartella deve essere denominata "vc_templates" e tutti i file che si trovano in quella cartella devono essere denominati esattamente come nella cartella "vc_templates" di Visual Composer. Nel nostro caso abbiamo quattro file che sono estesi con struttura e funzionalità personalizzate: "vc_column.php", "vc_column_text.php", "vc_row.php" e "vc_video.php". La cartella "vc_templates" deve essere inserita direttamente nella cartella radice del tema cartella tematica> vc_templates.

Ultimo ma non meno importante, dato che Visual Composer è un plugin esterno, dobbiamo includerlo con il pacchetto di download del tema. Qui abbiamo due opzioni: 

1. Includere il file "js_composer.zip" all'interno del pacchetto di download e chiedere agli acquirenti di installarlo manualmente.
2. Utilizzare l'attivatore di plugin TGM per automatizzare questo processo. 

Troviamo che la seconda opzione è il modo migliore per richiedere e raccomandare plugin per temi WordPress. Per farlo, crea una cartella "plug-in" all'interno della cartella radice del tema e inserisci il file "js_composer.zip" (il file installabile di Visual Composer, che avrai scaricato dopo l'acquisto). Per saperne di più sull'attivatore di plugin TGM dai un'occhiata al tutorial di Barış Ünver Uso della libreria di attivazione dei plugin di TGM nei tuoi temi. 

Controllo del tema WordPress

A WordPress Theme Check non piace quando un tema include plug-in completi. Darà un avvertimento come:

RICHIESTO: trovato il file zip. I plugin non sono consentiti nei temi. Il file zip trovato era js_composer.zip

Sfortunatamente, per questa situazione non ci sono istruzioni ufficiali. Poiché l'inclusione della cartella di plug-in sul server va contro la licenza Envato Plugin in Temi - Tema Verifica problema non c'è altro modo migliore per includere il plugin con il tema.

Cattura il tuo respiro

Quindi, per ora abbiamo ...

1. ... incluso js_composer.zip all'interno del tema (fucoson> plugins> js_composer.zip)
2. ... creato il file php degli elementi personalizzati (ninzio-addons> shortcode> shortcodes.php). Ricorda che abbiamo il plugin ninzio-addons con tutte le funzionalità personalizzate in esso, e viene fornito con il tema.
3. ... creato il file di integrazione di Visual Composer (focuson> include> ninzio_vc.php)
4. ... e ha creato la cartella "vc_templates" che contiene gli elementi predefiniti di Visual Composer per l'estensione con funzionalità personalizzate.

Compresi i componenti richiesti

Ora completiamo l'integrazione includendo i componenti richiesti. Apri il tuo tema "functions.php" e, con TGM Plugin Activator, aggiungi Visual Composer alla lista dei plugin richiesti:

 $ plugins = array (array ('name' => esc_html __ ('WPBakery Visual Composer', 'focuson'), 'slug' => 'js_composer', 'source' => get_template_directory (). '/plugins/js_composer.zip ',' required '=> true,' force_activation '=> false,' force_deactivation '=> false,' external_url '=> "));

Ora includi il file "shortcodes.php". Come nel caso del tema Focuson questo file si trova all'interno del plugin "ninzio-addons", è già incluso quando viene installato il plugin ninzio-addons.

Successivamente, includi il file di integrazione "ninzio_vc.php". Questa parte è molto importante, poiché dobbiamo essere sicuri che il file installabile di Visual Composer "js_composer.zip" sia all'interno della cartella dei plug-in e che il plugin Visual Composer sia installato e attivo correttamente:

if (defined ('WPB_VC_VERSION') && file_exists (get_template_directory (). '/plugins/js_composer.zip')) require_once (get_template_directory (). '/includes/ninzio_vc.php'); 

Solo dopo abbiamo bisogno del file di integrazione "ninzio_vc.php".

require_once (get_template_directory (). '/includes/ninzio_vc.php');

Conclusione

Questo è tutto! Visual Composer è integrato con il nostro tema e abbiamo tutto ciò che è necessario per estenderlo. Nel prossimo tutorial vedremo estendere e costruire con Visual Composer. Ci vediamo lì!