Autor: Neil Lock

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

Kratki kodovi (shortcodes) omogućuju vam dodavanje elemenata na vašu web-stranicu (poput widgeta, na primjer) bez potrebe za dodavanjem velikih dijelova koda, kako bi programeri to inače radili.

Na primjer, uobičajeni dio koda, u smislu duljine, vjerojatno bi izgledao otprilike ovako:

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

Za potrebe ovog primjera, pretpostavimo da vam gornji dio koda omogućuje dodavanje cijelog odlomka Lorem Ipsum zamjenskog teksta.

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

Sada zamislite da oba dijela koda – originalni, dugački dio, u usporedbi s kratkim kodom koji sadrži samo riječ „lorem” – rade potpuno istu stvar: dodaju Lorem Ipsum tekst.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

Ako imate omiljeni dodatak ili widget, velika je vjerojatnost da ima dostupan kratki kod koji možete koristiti.

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

U Page Builder Sandwichu možete dodati kratke kodove izravno na svoju stranicu jednostavnim upisivanjem ili lijepljenjem u područje sadržaja.

To smo učinili u nastavku s kratkim kodom iz dodatka Shortcodes Ultimate, dodavanjem okvira sa sadržajem na demo stranici Page Builder Sandwicha:

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

Iz jednog od naših prethodnih članaka o mapiranju kratkih kodova, definicija glasi:

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

To djelomično znači da više ne morate ručno tražiti svoje kratke kodove u njihovoj pripadajućoj dokumentaciji ili repozitorijima.

Sve dok imate dodatak koji uključuje kratki kod instaliran na vašoj WordPress stranici, bit će vam lako dostupan za korištenje u Page Builder Sandwichu.

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

Dakle, ako želite dodati prilagođene kratke kodove ili kratke kodove koje ste sami izradili, možete, sve dok su instalirani na vašoj WordPress stranici.

Here are some other helpful plugins that you can use to create your own custom shortcodes:

Postoje deseci i deseci alata za izradu stranica, i sigurno se pitate: što je toliko posebno kod Page Builder Sandwicha? Zašto biste se uopće zamarali njegovim korištenjem ako već imate jedan pri ruci?

U ovom članku navest ću nekoliko ključnih značajki Page Builder Sandwicha koje ga čine jedinstvenim i apsolutno neophodnim kako za kreatore sadržaja tako i za dizajnere. Ako ne znate što je alat za izradu stranica i zašto vam je potreban, ne brinite, imamo sadržaj koji vam može pomoći.

1. Nećete samo vidjeti vizualni prikaz svog sadržaja, već vidite i uređujete svoj stvarni sadržaj

U drugim alatima za izradu stranica vidite područja koja samo predstavljaju vaš sadržaj. Uglavnom slažete sadržaj pomoću blokova i pravokutnih oblika, a rezultat više izgleda kao kostur onoga kako bi vaš sadržaj na kraju trebao izgledati na stranici. To dovodi do neprestanog klikanja na gumb za pretpregled samo kako biste vidjeli kakvi će biti rezultati.

Uz Page Builder Sandwich sva se uređivanja odvijaju na korisničkom sučelju (front endu) vaše stranice i uređujete svoj sadržaj izravno za istinsko „što vidiš, to i dobiješ” iskustvo.

2. Brzo i jednostavno izravno uređivanje bez svih onih dosadnih skočnih prozora

Skočni prozori postali su standardni dio alata za izradu stranica. U većini njih, ako želite urediti bilo što u svom rasporedu, bilo da je riječ o naslovu, natpisu na gumbu ili kratkom tekstu slogana, prvo morate pričekati da se otvori skočni prozor i napraviti promjene unutar njega.

Postavili smo si za cilj maksimalno smanjiti upotrebu skočnih prozora u Page Builder Sandwichu. Uklanjanjem skočnih prozora uređivanje bilo kojeg sadržaja postalo je lakše i jednostavnije nego ikad.

Uređivanje se odvija na vrlo jednostavan način – kliknite na tekst kako biste postavili pokazivač i počnite tipkati. Više ne morate čekati skočni prozor s TinyMCE uređivačem kako biste započeli uređivanje. Najbolji dio je što i dalje možete slobodno povlačiti i ispuštati svoj sadržaj.

Još jedna inovacija koja pomaže u uređivanju bez muke jest uvijek prisutni inspektor. Inspektor služi kao vaša kutija s alatima i uređivač svojstava. Alati za oblikovanje vašeg sadržaja: boje teksta, naslovi, prilagodbe veličine fonta, margine, unutrašnji razmaci, obrube, istaknuti citati i mnogi drugi dostupni su na samo jedan klik.

3. Ponovno iskorištena funkcionalnost WordPressa

Još jedna stvar koju smo primijetili kod drugih alata za izradu stranica jest da često ponovno izmišljaju toplu vodu. Neki implementiraju vlastite birače boja, alate za prijenos slika, kreatore galerija i razne druge alate. U tome nema ništa loše samo po sebi, ali WordPress je prava riznica koda, pa zašto to ne iskoristiti?

WordPress je ogromna i predivna platforma koja sadrži mnoštvo sjajnih alata koje su izradili brojni izvrsni suradnici. Page Builder Sandwich maksimalno koristi funkcionalnosti koje su već ugrađene u WordPress.

Umjesto korištenja vlastitog birača boja, koristimo Iris birač boja. Umjesto vlastitog alata za prijenos slika, koristimo upravitelja medija. Tu su i backbonejs, underscorejs, wp.hooks i wp.shortcode, da spomenemo još nekoliko praktičnih skripti. Koristimo sve njih, što nam je olakšalo rad i pridonijelo stabilnijoj bazi koda.

Ponovna upotreba funkcionalnosti WordPressa donijela je i neka sjajna iznenađenja. Na primjer, budući da smo koristili upravitelja medija za umetanje slika, ugodno nas je iznenadilo to što odmah možemo raditi i s WordPress galerijama, video i audio popisima za reprodukciju te udaljenim URL-ovima. Također smo mogli jednostavno koristiti upravitelja medija za uređivanje slika, što je uklonilo sate nepotrebnih razvojnih muka.

4. Navigacija tipkovnicom i prečaci

U drugim alatima za izradu stranica miš je vaš glavni alat. Njime povlačite i ispuštate elemente te dvaput kliknete kako biste uređivali. No tipkovnica se često zanemaruje.

Na primjer, u nekim alatima ne možete jednostavno urediti tekst jedan odlomak/odjeljak iznad onoga gdje se trenutno nalazite jer morate kliknuti izvan skočnog prozora i potom kliknuti u novi. U Page Builder Sandwichu možete navigirati pomoću tipkovnice. Pritisnite tipke sa strelicama za kretanje kroz sadržaj – to funkcionira čak i ako je vaš drugi sadržaj smješten unutar drugog retka ili stupca.

Još jedna važna značajka su tipkovnički prečaci za poništavanje (undo) i ponavljanje (redo). Možda se na prvu ne čine važnima, ali razmislite o ovome: što ako slučajno povučete i ispustite sadržaj na pogrešno mjesto? U nekim ćete ga alatima za izradu stranica morati ručno povući natrag na izvornu poziciju. U Page Builder Sandwichu funkcioniraju i poništavanje i ponavljanje radnje. Dakle, bilo da želite prepraviti ono što ste upisali ili želite vratiti premješteni sadržaj (ili više njih), samo pritisnite undo ili redo. Undo i redo rade za povučeni i ispušteni sadržaj, pa čak i za promjene svojstava poput veličina fonta i razmaka redaka. To ih čini moćnim alatima u vašem arsenalu za uređivanje.

5. Pravi frontend alat za izradu stranica – Opuštenije iskustvo uređivanja bez muke

Naš stav tijekom razvoja bio je da se uređivanje na korisničkom sučelju (front endu) ne bi trebalo činiti kao uređivanje pomoću back end alata. Ne bi se smio steći dojam da je alat prvotno napravljen za pozadinski sustav (back end), a zatim samo prebačen na front end.

Sve u svemu, za mene je glavna prednost Page Builder Sandwicha to što smo ga stvorili s ciljem da bude „pravi” frontend alat za izradu stranica – novo viđenje onoga kako bi uređivanje na front endu zapravo trebalo izgledati.

Ovaj članak donosi kratak pregled načina na koji Page Builder Sandwich radi, a namijenjen je kao uvod onima koje zanima kako se naš alat za izradu stranica integrira s različitim elementima u WordPressu. Neću se zadržavati na pojedinačnim značajkama dodatka Page Builder Sandwich; ako vas one zanimaju, posjetite našu stranicu s videozapisima gdje predstavljamo svaku značajku zasebno putem kratkih video vodiča.

Ako želite saznati po čemu se Page Builder Sandwich razlikuje od ostalih alata za izradu stranica, pročitajte naš članak Kako se Page Builder Sandwich razlikuje od ostalih.

Gdje se nalazi? I što mogu uređivati s njime?

Za razliku od mnogih drugih alata za izradu stranica, Page Builder Sandwich nalazi se na vanjskom dijelu (front endu) vaše web stranice. Ako se nalazite u pozadinskom dijelu (back endu), uz gumbe uređivača sadržaja osigurali smo gumb „Frontend” koji će vas odvesti na vanjski dio vaše stranice.

Page Builder Sandwich omogućuje vam uređivanje vaših objava, stranica i prilagođenih vrsta sadržaja. Međutim, ne dopušta vam izravno uređivanje agregiranih objava na naslovnoj stranici bloga niti drugih zbirnih područja na vašem web-mjestu. Gledajte na to ovako: ako ono što želite urediti ima uređivač sadržaja u pozadinskom dijelu (kao što su „Nova objava” i „Nova stranica”), tada možete koristiti Page Builder Sandwich. Možete uređivati svoje pojedinačne stranice i objave na blogu, a ako na primjer imate dodatak koji uvodi jelovnike restorana ili stavke portfelja, možete uređivati i njih.

Kada ste na vanjskom dijelu, postavili smo plavi gumb „Edit with Page Builder Sandwich” u vašu administratorsku traku. Samo kliknite na njega kako biste započeli s uređivanjem svoje stranice.

Izravno uređivanje sadržaja

S dodatkom Page Builder Sandwich učinili smo uređivanje sadržaja što jednostavnijim i bezbolnijim. Uređivanje sadržaja je izravno i jednostavno – samo kliknite i pišite. Toliko je jednostavno.

Predstavljamo: inspektor

Primijetili smo da mnogi alati za izradu stranica imaju puno skočnih prozora. Osobno ne volim skočne prozore jer odvlače pažnju i u osnovi vam govore: „hej, prestani s onim što radiš dok prvo ne ispuniš ova polja”. Oni narušavaju tijek inače ugodnog iskustva uređivanja. Zbog toga smo u potpunosti sveli upotrebu skočnih prozora na minimum i umjesto toga stvorili inspektor.

Inspektor je područje u obliku bočne trake koje sadrži sve alate za oblikovanje i raspored koji će vam ikada zatrebati. Inspektor se može usidriti na lijevu ili desnu stranu zaslona kako biste lakše vidjeli što uređujete.

Iz inspektora možete prilagoditi različita svojstva teksta poput naslova, veličina fonta, podebljanja, kurziva, boja teksta i još mnogo toga. Osim toga, omogućuje vam i dodavanje slika te stvaranje redaka ili sadržaja raspoređenog u stupce. Također je sposoban za naprednije uređivanje, poput prilagođavanja redaka na punu širinu stranice, boja pozadine redaka i stupaca, okomitog poravnanja sadržaja, kao i margina i pozadina. Vrlo je moćan i primijetit ćete da ga najčešće koristite.

Integracija s WordPress temama

Page Builder Sandwich po svojoj prirodi gotovo da ne uključuje vlastite stilove. Kada uređujete svoj sadržaj, stilovi koje vidite uglavnom se temelje na vašoj temi.

Integracija s kratkim kodovima (Shortcodes)

Kratki kodovi važan su aspekt WordPressa i vrlo je vjerojatno da ćete na svojoj web stranici koristiti pregršt njih. Page Builder Sandwich izvrsno upravlja njima, pri čemu će se vaši kratki kodovi prikazivati renderirani na vanjskom dijelu stranice. Kratki kodovi također ostaju podložni uređivanju, a najbolji dio je taj što će se nakon što ih uredite ponovno renderirati zajedno s vašim promjenama.

Radi praktičnosti, svoje kratke kodove moći ćete uređivati pomoću inspektora. Ako želite veću kontrolu, također ćete moći dvokliknuti na kratke kodove kako biste ih uredili u izvornom obliku. Osim toga, svi kratki kodovi dostupni na vašoj web stranici navedeni su u inspektoru radi jednostavnog uvrštavanja u vaš sadržaj.

Što je s preopterećenošću web-mjesta?

Tko voli spore web stranice? Mi ne, a sigurno ni vi. Pobrinuli smo se da Page Builder Sandwich ima gotovo nikakav utjecaj na performanse vaše web stranice. Kada ste odjavljeni, u najmanju ruku učitavaju se samo CSS stilovi za retke i stupce, zajedno s potrebnim JS i CSS skriptama za kratke kodove koje ste upotrijebili.

Za programere

Ako ste programer i imate kratke kodove u svojim WordPress dodacima, Page Builder Sandwich nudi Shortcode API kako biste svojim korisnicima jednostavno pružili polja za lako stvaranje i mijenjanje vaših kratkih kodova.

Ako želite dodatno proširiti mogućnosti ili se integrirati s nekim dijelovima dodatka Page Builder Sandwich, imamo i mnoštvo korisnih kuka za akcije i filtre koje možete koristiti.

Ako ste strastveni bloger čije se cjelokupno stvaranje sadržaja vrti oko pisanja cjelovitih članaka s povremenom popratnom slikom, tada je postojeći TinyMCE uređivač sadržaja možda dovoljan za vaše potrebe. Trenutni skup alata već sadrži potrebne alate za pisanje članaka – imate osnovne alate za oblikovanje teksta kao što su podebljano, kurziv, naslovi itd. No to je otprilike to.

Nema praktičnih mogućnosti slaganja izgleda

Iako možete pisati članke s trenutnim TinyMCE uređivačem sadržaja, ne postoji prikladan način za raspoređivanje sadržaja osim jednog kontinuiranog stupca teksta. Bez dodatnih alata ne možete posložiti tekst u dva ili više stupaca, niti možete stvoriti sadržaj podijeljen u sekcije s različitom bojom pozadine. Ako želite da drugi dijelovi vaše web-stranice, poput odredišnih i kontaktnih stranica, budu jedinstveni, trebat će vam neki oblik osnovnih mogućnosti raspoređivanja sadržaja.

Drugi su pokušali zaobići ovaj problem korištenjem WordPress mogućnosti kratkih kodova (shortcodes). Ukratko, kratki kodovi omogućuju umetanje isječaka koda pomoću posebnih oznaka. Postoje WordPress dodaci koji uvode različite kratke kodove koje možete koristiti za stvaranje sadržaja u stupcima. Na primjer, mogli biste obuhvatiti svoj sadržaj s više oznaka za stupce ako ga želite postaviti u raspored s dva stupca. Iako ova metoda „radi”, vizualno nije praktična jer bi na kraju, kako dodajete sve više sadržaja, sve izgledalo kao ogroman nered.

Kako bi se popunila ova praznina u raspoređivanju, stvoreni su alati za izradu stranica (page builderi).

Alati za izradu stranica olakšavaju stvaranje raspoređenog sadržaja

Alati za izradu stranica pružaju vam dodatne alate koji olakšavaju organiziranje sadržaja u jedinstvene rasporede. Alati za izradu stranica obično uklanjaju pozadinski TinyMCE uređivač sadržaja i zamjenjuju ga (ili dodaju) novim koji vam pomaže vizualizirati vaš sadržaj. Ako prije niste koristili pozadinski alat za izradu stranica, zamislite skup blokova gdje svaki blok predstavlja vrstu sadržaja: sliku, tekst ili kratki kod. Zatim bi vam omogućio povlačenje i ispuštanje tih blokova u različite rasporede i stupce.

Osim raspoređivanja, alati za izradu stranica također olakšavaju stvaranje i postavljanje kratkih kodova. Prije ste kratke kodove mogli vidjeti u svoj njihovoj izvornoj formi. Vidjeli biste uglate zagrade zajedno sa svim atributima i vrijednostima pomiješane u vašem sadržaju. Alati za izradu stranica obično sadrže alate za generiranje kratkih kodova – skočne prozore koji odabir atributa kratkog koda čine znatno jednostavnijim za korisnika od samog ručnog upisivanja.

Front-end alati za izradu stranica su budućnost

Iako je sve ovo bolje iskustvo za dizajnere i kreatore sadržaja, pozadinski alati za izradu stranica imaju veliki inherentni problem. Iako možete vidjeti vizualni prikaz onoga kako bi vaš sadržaj trebao izgledati, ono što vidite nije vaš stvarni sadržaj. To dovodi do toga da ljudi neprestano provjeravaju pretpregled svojih stranica kako bi vidjeli je li ono što rade ispravno. Kada koristim pozadinske alate za izradu stranica, osobno kliknem na gumb za pretpregled bez problema barem 20 puta samo kako bih provjerio je li moj sadržaj pravilno poravnat ili jesu li margine ravnomjerno raspoređene. To je velika smetnja koja oduzima puno vremena.

Kako bi se riješila ova neugodnost, alate za izradu stranica trebalo bi prenijeti na front-end. Ako se to učini, to bi eliminiralo nagađanje pri raspoređivanju stranica jer ćete odmah moći vidjeti svoje rezultate.

Trenutačno postoji mnogo pozadinskih alata za izradu stranica, a samo pregršt onih na front-endu. Među tom nekolicinom je i Page Builder Sandwich. Ako želite saznati više o tome što Page Builder Sandwich čini jedinstvenim i zašto je to pravi alat za vas, pročitajte članak Kako se Page Builder Sandwich razlikuje od ostalih.