Slik integrerer du Visual Composer i WordPress Themes

Visual Composer er WordPress plugin som gjør at sider kan bygges ved hjelp av et dra-og-slipp-grensesnitt. Det gir brukerne muligheten til å sette opp sider enkelt, og det gir utviklere muligheten til å legge til verdi for sine WordPress-temaer. I denne opplæringen ser vi på de juridiske og tekniske implikasjonene ved å integrere Visual Composer i temaer, klar til salg.

Visual Composer kommer med:

  • Kombinert front-end og back-end WordPress editor.
  • 40 + innebygde innholdselementer tilgjengelig ut av boksen og 200 + tillegg, designet for å ta nettstedet ditt til neste nivå.
  • Malbibliotek gir WordPress-brukere tilgang til hundrevis av høykvalitets layoutmaler.
  • Hudbygger for raskt å endre temaets visuelle utseende.
  • Avansert gridbygger for innlegg, portefølje, media og tilpassede innleggstyper.

Så de er hovedtrekkene til Visual Composer, alt pakket inn, inkludert profesjonell støtte for $ 34 (vanlig lisens i desember 2016). 

Visual Composer for Theme Developers

La oss tenke et øyeblikk om hvorfor temautviklere skal integrere eller utvide Visual Composer, og hva lisensimplikasjonene er for å gjøre det.

Selge WordPress Temaer kan være en lukrativ bedrift, enten du selger individuelt eller gjennom en markedsplass som ThemeForest. Som temaforfattere (Ninzio Themes) forstår vi fordelene, men vet hvor vanskelig temautvikling kan være, og hva hver utvikler ønsker fra sitt produkt:

  • Redusert utviklingstid og kostnad.
  • Et kvalitetsprodukt.
  • Maksimert inntekt fra salg
  • Redusert støttetid
  • Fokus på nye funksjoner og markedsføring

Og du vet hva? Visual Composer kan hjelpe deg med å nå disse målene direkte eller indirekte. La meg forklare hvordan:

Mange WordPress-temaer har innebygde Page Builders, og bygging av dem ble en trend i tidligere år, men i dag med økt konkurranse er det ekstremt uheldig når det gjelder kostnader og tid for å utvikle en tilpasset løsning for temaet ditt. I stedet kan Visual Composer integreres i temaet ditt, og tilbys gratis for dine kjøpere (gratis for bruk med temaet ditt bare).

Hvis du surfer på Themeforests topp WordPress-temaer, vil du legge merke til at nesten alle temaer har Visual Composer integrert i det, selv temaer som har sin egen tilpassede innebygde sidebygger. Visual Composer er et velkjent produkt, testet tusenvis av ganger av flere millioner brukere og utviklere. 

Topp WordPress temaer på Themeforest

På dette punktet har vi gjort det klart hvorfor Visual Composer har blitt (nesten) nødvendig kunnskap for vellykkede WordPress-temautviklere, og hvorfor bør du vurdere å integrere det i temaene dine.

De neste spørsmålene er: hvordan integrerer vi Visual Composer, og har vi rett til å gjøre det?

Tema Integrasjon: Juridisk Guide

Hvis du er en temautvikler som tenker på å inkludere Visual Composer i temaene dine, er det et raskt sammendrag av hva som trengs:

"Den 22. januar 2013 oppdaterte Envato sine lisenser, og det er ikke lenger mulig å bruke varer fra markedsplasser innenfor dine egne varer som vil bli til salgs på Envato-markedsplasser uten samarbeidsavtale mellom to forfattere. I dette tilfellet mellom meg (Michael M) og deg (temaforfatter). "- Michael M

Så ... hvis du vil inkludere Visual Composer i temaet ditt, må du skrive til Michael? Heldigvis nei. Denne prosessen har blitt automatisert. La oss undersøke, trinnvis, hvordan vi kan lisensiere Visual Composer riktig.

Kjøp utvidet lisens

Først må du kjøpe Visual Composers utvidede lisens fra CodeCanyon. Fra skrivingstidspunktet er prisen for en utvidet lisens $ 170.

Visual Composer er utvidet lisens fra CodeCanyon

Hva er en "utvidet lisens"?

Den utvidede lisensen tillater bruk av plugin, av deg eller en klient, i et enkelt produkt som sluttbrukere kan bli belastet for. Totalprisen inkluderer varepris og kjøperavgift.

I hovedsak kjøper du et utviklingslicens for å bruke Visual Composer med et av temaene dine. Klienter som kjøper det aktuelle temaet er ikke pålagt å kjøpe Visual Composers regelmessige lisens. 

Hva dekker det ikke?

Du kan ikke bruke en utvidet lisens for flere temaer, du kan heller ikke dele din utvidede lisens med noen andre. Du trenger ikke å dele lisensnøkkelen med kundene dine, og dine kunder trenger ikke å aktivere Visual Composer (kopien som følger med temaet ditt). 

Hva om Visual Composer oppdateringer? 

Et av de vanligste spørsmålene vi hører på Ninzio Themes er: "Jeg kan ikke oppdatere Visual Composer". Dette er ikke gjort fra klientens ende; hver Visual Composer-oppdatering bør testes og inkluderes i temaoppdateringer.

"In-stock License"

Men vent et øyeblikk - WPBakery sier "det er ikke lenger mulig å bruke varer fra markedsplasser innenfor dine egne varer som vil bli til salgs på Envato-markedsplasser". Så hvordan kan du inkludere Visual Composer i temaene dine for salg på ThemeForest hvis din utvidede lisens ikke tillater det? Dette er hvor den spesielle "avtalen" mellom deg og Michael M (Visual Composer Plugin Author) kommer inn i spill: "In-stock License".

Når du har kjøpt den utvidede lisensen fra CodeCanyon, gå til WPBakery supportportalen og logg inn med Envato login.

WPBakery påloggingsskjerm

En popup melding med Godkjenn WPBakery Support Portal for å koble til din konto? vil dukke opp; klikk Godkjenn. Deretter, hvis du allerede har kjøpt den utvidede lisensen, viser WPBakery automatisk din nylig kjøpte lisens i dashbordet, så velg lisensen, skriv inn navnet og trykk Sende inn. Din utvidede lisens blir til en "lisens på lager". ThemeForest vet, WPbakery vet, du vet - alt er lisensiert, så du kan inkludere Visual Composer i temaet og selge temaet på ThemeForest.

På dette tidspunktet har vi sett på de juridiske aspektene ved Visual Composer-integrasjon, nå er det på tide å undersøke den tekniske siden.

Tema Integrasjon: Teknisk Guide

Det er ikke for mye involvert med å integrere Visual Composer med temaet ditt. Vi vil forklare prosessen ved hjelp av et av våre temaer, Focuson, som et eksempel.

Fokuser på

Opprett nødvendig miljø

Vi trenger følgende ting:

  1. En php-fil med egendefinerte elementer (temakortkodene dine). I vårt tilfelle kalles dette "shortcodes.php" som ligger i pluginet "ninzio-addons" (et plugin med tema tilpasset funksjonalitet). "Shortcodes.php" er ansvarlig for den endelige produksjonen av kortkoder. For en veiledning om hvordan du oppretter WordPress-kortkoder, ta en titt på Rohan Mehta's opplæring Komme i gang med WordPress-kortkoder.
  2. En php-fil for å integrere Visual Composer. Denne filen inneholder dine egendefinerte elementalternativer, som vises i Visual Composer-oversikten. I vårt tilfelle er dette kalt "ninzio_vc.php" og ligger i temamappe> inneholder.
  3. En Visual Composer maler-mappe, som vil inneholde php-filer av Visual Composer's standardelementer, i tilfelle du må overskrive dem. Denne mappen må være kalt "vc_templates", og alle filer som ligger i den mappen, skal oppgi nøyaktig samme som de i VC_templates-mappen Visual Composer. I vårt tilfelle har vi fire filer som er utvidet med tilpasset struktur og funksjonalitet: "vc_column.php", "vc_column_text.php", "vc_row.php" og "vc_video.php". "VC_templates" -mappen skal settes direkte inn i tema-rotmappen din temomappe> vc_templates.

Sist men ikke minst, da Visual Composer er et eksternt plugin, må vi inkludere det med tema nedlastingspakken. Her har vi to alternativer: 

  1. Ta med filen "js_composer.zip" inne i nedlastingspakken, og spør kjøpene dine om å installere den manuelt.
  2. Bruk TGM Plugin Activator til å automatisere denne prosessen. 

Vi finner det andre alternativet er den beste måten å kreve og anbefale plugins for WordPress-temaer. For å gjøre dette, opprett en mappe "plugins" inne i tema-rotmappen din og sett "js_composer.zip" -filen (den installable filen Visual Composer, som du vil ha lastet ned etter kjøp) i den. For å lære mer om TGM Plugin Activator, ta en titt på Barış Ünvers opplæring ved hjelp av TGM Plugin Activation Library i dine temaer. 

WordPress Theme Check

WordPress Theme Check liker ikke det når et tema inneholder pakket plugins. Det vil gi en advarsel som:

KRAV: Zip-fil funnet. Plugins er ikke tillatt i temaer. Zip-filen funnet var js_composer.zip

Dessverre, for denne situasjonen er det ingen offisielle instruksjoner. Som inkludert plugin-mappen på serveren din, går det mot Envato-lisensplugger i temaer - Theme Check Issue, det finnes ingen annen bedre måte å inkludere plugin med temaet.

Fang pusten din

Så for nå har vi ...

  1. ... inkludert js_composer.zip inne i temaet (fucoson> plugins> js_composer.zip)
  2. ... opprettet egendefinerte elementer php-filen (ninzio-addons> shortcodes> shortcodes.php). Husk at vi har plug-in til ninzio-addons med all tilpasset funksjonalitet i den, og den kommer med temaet.
  3. ... opprettet Visual Composer-integrasjonsfilen (focuson> inkluderer> ninzio_vc.php)
  4. ... og opprettet "vc_templates" -mappen som inneholder standard Visual Composer-elementer for utvidelse med tilpasset funksjonalitet.

Inkludert påkrevde komponenter

La oss nå fullføre integrasjonen ved å inkludere de nødvendige komponentene. Åpne temaet "functions.php" -filen og, med TGM Plugin Activator, legg Visual Composer til listen over nødvendige plugins:

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

Nå inkluderer filen "shortcodes.php". Som i tilfelle av Focuson-temaet, er denne filen plassert i pluginet "ninzio-addons", det er allerede inkludert når pluginet for ninzio-addons er installert.

Deretter inkluderer du integrasjonsfilen "ninzio_vc.php". Denne delen er veldig viktig, da vi må være sikre på at den installable filen "js_composer.zip" i Visual Composer er inne i plugin-mappen og Visual Composer-pluginet er installert og aktivt:

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

Først etter det krever vi integrasjonsfilen "ninzio_vc.php".

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

Konklusjon

Det er det! Visual Composer er integrert med vårt tema og vi har alt som kreves for å utvide det. I neste veiledning ser vi på å utvide og bygge med Visual Composer. Ser deg der!