Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Theme Development

Kako Integrirati Visual Composer u Vlastite WordPress Teme

by
Difficulty:IntermediateLength:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Visual Composer je WordPress plugin koji omogućuje da se ugrade stranice pomoću sučelja povuci i ispusti. Korisnicima omogućuje da lako urede izgled stranica, a razvojnim programerima pruža mogućnost da dodaju vrijednosti WordPress temama. U ovom tutorialu pregledat ćemo pravne i tehničke implikacije integriranja Visual Composer-a u teme, spremne za prodaju.

Visual Composer dolazi sa:

  • Kombiniranim front-end i back-end WordPress editorom.
  • 40+ ugrađenih elemenata odmah dostupnih i 200+ dodataka, dizajniranih na podignu vašu web stranicu na novu razinu.
  • Biblioteka predložaka omogućuje WordPress korisnicima pristup stotinama kvalitetnih layout predložaka.
  • Skin graditeljemza brzu promjenu vizualnog izgleda teme.
  • Naprednim "grid" graditeljem za postove, portfelje, medije i prilagođene post tipove.

To su dakle glavne značajke Visual Composer-a, uključujući profesionalnu podršku za 34$ (regularna dozvola od prosinca 2016.).

Visual Composer za Programere Tema

Razmislimo na trenutak o tome zašto razvojni programeri tema trebaju integrirati ili proširiti Visual Composer i kakve su implikacije za licence.

Prodaja WordPress tema može biti unosan posao, neovisno o tome prodajete li ih individualno ili na tržišu kao što je ThemeForest. Kao autori tema (Ninzio Themes) razumijemo nagrade, ali znamo koliko  težak razvoj teme može biti, i što svaki developer želi od svog proizvoda:

  • Smanjeni troškovi i vrijeme programiranja.
  • Visokokvalitetan proizvod.
  • Povećani prihod od prodaje
  • Smanjeno vrijeme podrške
  • Fokus na nove značajke i marketing

I znate što? Visual Composer vam može pomoći da postignete te ciljeve izravno ili indirektno. Objasniti ću kako:

eme WordPressa imaju ugrađene graditelje stranice, a njihova izgradnja postala je trend prethodnih godina, ali danas, s povećanom konkurencijom, iznimno je nepovoljno razvijati prilagođeno rješenje za temu u smislu troškova i vremena. Umjesto toga, Visual Composer se može integrirati u vašu temu i ponuditi vašim kupcima besplatno (besplatno ih mogu koristiti samo uz vašu temu).

Ako pretražite Themeforest top WordPress teme primjetiti ćete da gotovo svaka tema ima integriran Visual Composer, pa čak i teme koje imaju vlastiti ugrađeni graditelj stranice. Visual Composer je veoma poznat proizvod, testiran tisućama puta od strane milijuna korisnika i programera.

ThemeForests top WordPress themes
Top WordPress teme na Themeforestu

U ovom trenutku jasno je jasno zašto je Visual Composer postao (gotovo) obavezno znanje za uspješne programere WordPress tema i zašto biste trebali razmisliti o tome da ga integrate u teme.

Sljedeća pitanja su: kako integrirati vizualni skladatelj i imamo li pravo to učiniti?

 Integracija Teme: Pravni Vodič

Ako ste razvojni programer teme koji razmišlja o tome da uključi Visual Composer u svoje teme, evo kratkog sažetka svega što vam je potrebno:

"22. siječnja 2013. Envato je ažurirao svoje licence i više nije moguće koristiti predmete iz trgovina unutar vaših stavki koje će biti na prodaju u Envato trgovinama, bez partnerskog ugovora između dva autora. U ovom slučaju između mene (Michael M) i tebe (autor teme). "- Michael M

Dakle... ako želite uključiti Visual Composer u temu, morate pisati Michaelu? Nasreću, ne. Ovaj proces je automatiziran. Pogledamo, korak po korak, kako možemo ispravno licencirati Visual Composer.

Kupnja Proširene Licence

Prvo ćete morati kupiti proširenu dozvolu za Visual Composer na CodeCanyon-u. U vrijeme pisanja ovog članka, cijena produžene dozvole je $170.

Visual Composers extended license from CodeCanyon
Proširena Dozvola za Visual Composer s CodeCanyona

Što je "Proširena Dozvola"?

Proširena dozvola dopušta da vi ili jedan vaš klijent uporabite dodatak, u jednom produktu koji je krajnjem korisniku naplaćen. Ukupna cijena uključuje cijenu artikla i postotak za kupca.

U osnovi, kupite licencu za razvojne programere za upotrebu Visual Composera s jednom od vaših tema. Klijenti koji kupuju tu temu ne moraju kupiti redovite licencu za Visual Composer.

Što Ne Pokriva?

Ne možete koristiti jednu proširenu licencu za više tema niti možete podijeliti svoju proširenu licencu s nekim drugim. Nećete morati dijeliti ključ licence s klijentima, a vaši klijenti neće morati aktivirati Visual Composer (kopiju koja dolazi s vašom temom).

Što je sa Ažuriranjima Visual Composera?

Jedno od najčešćih pitanja koja čujemo u Ninzio Themes je: 'Ne mogu ažurirati Visual Composer'. To nije učinjeno od strane klijenta; svako ažuriranje vizualnog skladatelja treba biti testirano i uključeno u tematska ažuriranja.

“In-Stock License” Dozvola

No, pričekajte trenutak - WPBakery kaže "više nije moguće koristiti predmete iz trgovina unutar vaših stavki koje će biti prodane na Envato trgovinama. Pa kako možete uključiti u svoje teme za prodaju na ThemeForestu ako vam to ne dopušta proširena licenca? Ovdje posebni 'ugovor' između vas i Michaela M (Visual Composer Plugin Autor) ulazi u igru: 'In-Stock License'.

Nakon što kupite proširenu licencu na CodeCanyonu, idite na portal podrške za WPBakery i prijavite se svojim podacima za prijavu za Envato.

WPBakery login
Pikaz ekrana prijave na WPBakery

Pojaviti će se poruka Authorize WPBakery Support Portal to connect with your account? (Postavlja pitanje želite li se prijaviti sa svojim podacima) kliknite Approve. Zatim, ako ste već kupili proširenu licencu, WPBakery automatski prikazuje novu licencu na nadzornoj ploči pa odaberite licencu, unesite naziv teme i kliknite Sumbit (Pošalji). Vaša proširena licenca pretvoriti će se u 'In-Stock License'. ThemeForest zna, WPbakery zna, vi znate - sve je licencirano, tako da možete uključiti Visual Composer u svoju temu i prodati temu na ThemeForestu.

U ovom trenutku smo završili s pravnim aspektom integracije Visual Composera, sada je vrijeme da ispitivamo tehničku stranu.

Integracija Teme: Tehnički Vodič

Nema previše toga uključenog kod integracije Visual Composera s vašom temom. Za primjer ćemo objasniti proces koristeći jednu od naših tema, Focuson.

Focuson
Focuson

Kreirajte Potrebno Okruženje

Trebamo sljedeće:

  1. PHP datoteku s prilagođenim elementima (kratki kodovi za temu). U našem slučaju to se naziva 'shortcodes.php', koji se nalazi u dodatku 'ninzio-addons' (dodatak s prilagođenom funkcionalnošću teme). 'Shortcodes.php' je odgovoran za konačni izlaz kratica. Za vodič o izradi WordPress kratkih kodova, pogledajte tutorial Rohan Mehta-e čiji nalsov je Početak Rada sa Wordpress Kratkim Kodovima.
  2. PHP datoteku za integraciju Visual Composera. Ova datoteka sadrži opcije vaših prilagođenih elemenata, prikazane na izborniku Nadzorne ploče vizualnog skladatelja. U našem slučaju to se zove 'ninzio_vc.php' i nalazi se u theme folder > includes.
  3. Mapu predložaka vizualnog skladatelja, koja će sadržavati php datoteke osnovnih elemenata vizualnog skladatelja, u slučaju da ih trebate prebrisati. Ova mapa mora se nazvati 'vc_templates', a sve datoteke smještene unutar te mape trebale bi biti imenovane upravo kao i oneu mapi 'vc_templates' u Visual Composeru. U našem slučaju imamo četiri datoteke koje se proširuju s prilagođenom strukturom i funkcionalnošću: 'vc_column.php', 'vc_column_text.php', 'vc_row.php' i 'vc_video.php'. Mapa 'vc_templates' trebala bi se staviti izravno unutar root mape theme folder > vc_templates.

Posljednje, ali ne i najmanje važno, budući da je Visual Composer vanjski dodatak, moramo ga uključiti u paket za preuzimanje teme. Imamo dvije opcije:

  1. Uključite 'js_composer.zip' datoteku u paket za preuzimanje i zamolite kupce da ga ručno instaliraju.
  2. Upotrijebite TGM Plugin Activator da automatizirate ovaj postupak.

Smatramo da je druga opcija najbolji način za traženje i preporuku dodataka za WordPress teme. Kako biste to učinili, izradite mapu 'plugins' unutar root mape teme i stavite datoteku 'js_composer.zip' (instalacijsku datoteku Visual Composer, koju ćete preuzeti nakon kupnje). Kako biste naučili više o TGM Plugin Activator pogledajte Barış Ünverov tutorial Upotreba TGM Biblioteke za Aktivaciju Dodataka u Vašim Temama.

WordPress Theme Check

WordPress Theme Check ne voli kada tema uključuje upakirani dodatak. Dati će upozorenje poput:

REQUIRED: Zip file found. Dodaci nisu dozvoljeni u temama. Pronađena zip datoteka je 

Nažalost, za ovu situaciju nema službenih uputa. Budući da je uključena mapa dodatka na vašem poslužitelju protiv Envato dozvole Plugins in Themes - Theme Check Issue nema boljeg načina da se uključi dodatak u temu.

Pričekajte Još Malo

Zasad smo...

  1. ...uključili js_composer.zip unutar teme (fucoson > plugins > js_composer.zip)
  2. ...kreirali prilagođene elemente php file (ninzio-addons > shortcodes > shortcodes.php). Imajte na umu da imamo plugin ninzio-addons sa svim prilagođenim funkcijama u njemu i dolazi s temom.
  3. ...kreirali Visual Composer datoteku integracije (focuson> uključuje> ninzio_vc.php)
  4. ... i napravili mapu 'vc_templates' koja sadrži zadane Visual Composer elemente za proširenje s prilagođenim funkcijama.

Uključivanje Potrebne Komponente

Dovršimo sada integraciju uključivanjem potrebne komponente. Otvorite svoju temu 'functions.php' i, uz TGM Plugin Activator, dodajte Visual Composer na popis potrebnih dodataka:

Sada uključite datoteku 'shortcodes.php'. Kao i u slučaju Focuson teme ova datoteka se nalazi unutar dodataka 'ninzio-addons', već je uključena kada je ugrađen ninzio-addons dodatak.

Zatim uključite integracijsku datoteku 'ninzio_vc.php'. Ovaj je dio vrlo važan jer moramo biti sigurni da je instalacijska datoteka Visual Composer 'js_composer.zip' unutar mape dodataka, a dodatak Visual Composer uspješno je instaliran i aktivan:

Tek nakon toga trebamo integracijsku datoteku 'ninzio_vc.php'.

Zaključak

To je to! Visual Composer je integriran s našom temom i imamo sve što je potrebno za proširenje. U sljedećem tutorialu ćemo pogledati proširenje i izgradnju s Visual Composerom. Vidimo se!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.