Blog

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

A shortcode-ok lehetővé teszik, hogy elemeket adjon a weboldalához (például widgeteket), anélkül, hogy hatalmas kódblokkokat kellene beillesztenie, ahogyan azt a fejlesztők általában tennék.

Például egy szokásos kódrészlet a hosszát tekintve valószínűleg valahogy így nézne ki:

<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>​

Ebben a példában tegyük fel, hogy a fenti kódrészlet egy teljes bekezdésnyi Lorem Ipsum helyettesítő szöveg hozzáadását teszi lehetővé.

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.

Most képzelje el, hogy mindkét kódrészlet – az eredeti, hosszú darab, szemben a csupán a „lorem” szót tartalmazó shortcode-dal – pontosan ugyanazt a műveletet hajtja végre: Lorem Ipsum szöveget ad hozzá.

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?

Ha van egy kedvenc bővítménye vagy widgetje, nagy valószínűséggel rendelkezik egy olyan shortcode-dal, amelyet használhat.

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

A Page Builder Sandwichben közvetlenül hozzáadhat shortcode-okat az oldalához pusztán beírva vagy kimásolva és beillesztve azokat a tartalmi területre.

Ezt tettük alább a Shortcodes Ultimate egyik shortcode-jával, hozzáadva egy tartalmi dobozt a Page Builder Sandwich bemutató oldalán:

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

A shortcode-leképezésről (Shortcode Mapping) szóló egyik korábbi cikkünkből a definíció a következő:

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.

Ez részben azt jelenti, hogy többé nem kell manuálisan megkeresnie a shortcode-okat a vonatkozó dokumentációkban vagy tárolókban.

Mindaddig, amíg a shortcode-ot tartalmazó bővítmény telepítve van a WordPress-webhelyén, az könnyen elérhető és használható lesz a Page Builder Sandwichben.

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.

Így ha egyéni vagy saját maga által készített shortcode-okat szeretne hozzáadni, megteheti, feltéve, hogy telepítette őket a WordPress-webhelyére.

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

Számtalan oldalépítő létezik, és biztosan felmerül benned a kérdés: mi olyan különleges a Page Builder Sandwichben? Miért vesződnél a használatával, ha már kéznél van egy másik?

Ebben a cikkben bemutatok néhány olyan kulcsfontosságú funkciót a Page Builder Sandwichben, amelyek egyedivé, és mind a tartalomkészítők, mind a designerek számára igazi kötelező darabbá teszik. Ha nem tudod, mi az az oldalépítő, és miért van rá szükséged, ne aggódj, van néhány hasznos anyagunk, ami segíthet.

1. Nem csupán a tartalmad vizuális reprezentációját látod, hanem magát a tényleges tartalmat látod és szerkeszted

Más oldalépítőkben csupán olyan területeket látsz, amelyek a tartalmadat reprezentálják. A tartalmat leginkább blokkokkal és téglalap alakú formákkal rendezed el, az eredmény pedig inkább egy vázra hasonlít, amely megmutatja, hol fognak megjelenni a tartalmaid az oldalon. Ez az előnézet gomb folyamatos kattintgatásához vezet, csak azért, hogy lásd, hogyan is fog kinézni az eredmény.

A Page Builder Sandwich segítségével a szerkesztés teljes egészében a webhelyed frontendjén történik, és közvetlenül a tartalmat szerkeszted a valódi „amit látsz, azt kapod” élményért.

2. Gyors és egyszerű közvetlen szerkesztés idegesítő felugró ablakok nélkül

A felugró ablakok az oldalépítők alapvető kellékei voltak. A legtöbbnél, ha bármit módosítani szeretnél az elrendezésedben – legyen az egy címsor, egy gomb felirata vagy egy rövid szlogen –, először meg kell várnod, amíg megnyílik egy felugró ablak, és azon belül kell elvégezned a módosításokat.

A Page Builder Sandwich esetében célunkul tűztük ki a felugró ablakok használatának minimálisra csökkentését. A felugró ablakok mellőzésével a tartalmak szerkesztése egyszerűbbé és gördülékenyebbé vált, mint valaha.

A szerkesztés teljesen magától értetődő: kattints a szövegre a kurzor elhelyezéséhez, és már gépelhetsz is. Többé nem kell egy TinyMCE szerkesztőt tartalmazó felugró ablakra várnod a szerkesztés megkezdéséhez. A legjobb az egészben pedig az, hogy a tartalmakat továbbra is szabadon húzhatod és ejtheted.

Egy másik újítás, amely segíti a gondtalan szerkesztést, a mindig kéznél lévő inspektor. Az inspektor eszköztárként és tulajdonságszerkesztőként funkcionál. A tartalom formázására szolgáló eszközök: szövegszínek, címsorok, betűméret-beállítások, margók, belső margók, szegélyek, idézetblokkok és még sok más mindössze egyetlen kattintásra vannak.

3. Újrahasznosított WordPress funkciók

Egy másik dolog, amit más oldalépítőknél észrevettünk, hogy gyakran újra feltalálják a spanyolviaszt. Egyesek saját színválasztót, képfeltöltőt, galériakészítőt és számos egyéb eszközt implementálnak. Ezzel önmagában semmi baj sincs, de a WordPress kódkészletek valóságos kincsesbányája, miért ne használnánk inkább azokat?

A WordPress egy hatalmas és csodálatos platform, amely rengeteg nagyszerű közreműködő által készített szuper eszközt tartalmaz. A Page Builder Sandwich a lehető legnagyobb mértékben azokat a funkciókat használja, amelyek már alapból megtalálhatók a WordPressben.

Ahelyett, hogy saját színválasztót használnánk, az Iris színválasztót alkalmazzuk. Saját képfeltöltő helyett a médiatárat használjuk. Emellett ott van még a backbonejs, az underscorejs, a wp.hooks és a wp.shortcode is, hogy csak néhány remek szkriptet említsünk. Mindezeket használjuk, ami megkönnyítette az életünket, és stabilabb kódbázishoz is vezetett.

A WordPress funkcióinak újrahasznosítása néhány nagyszerű meglepetést is okozott. Mivel például a médiatárat használtuk a képek beillesztésére, kellemes meglepetés volt, hogy azonnal képesek voltunk kezelni a WordPress galériákat, a videó- és audio lejátszási listákat, valamint a távoli URL-eket is. Ráadásul a képszerkesztést is egyszerűen a médiatárral végezhetjük el, ami többórányi felesleges fejlesztői fejtöréstől kímélt meg minket.

4. Billentyűzetes navigáció és gyorsbillentyűk

Más oldalépítőkben az egér a legjobb barátod. Ezzel húzod és ejted az elemeket, és duplán kattintasz rájuk a szerkesztéshez. A billentyűzetről azonban gyakran megfeledkeznek.

Egyes építőkben például nem lehet könnyen szerkeszteni a szerkesztett szöveg feletti bekezdést vagy szakaszt, mert előbb ki kell kattintanod a felugró ablakból, majd egy újba kell bekattintanod. A Page Builder Sandwichben a billentyűzettel is navigálhatsz. Használd a nyílbillentyűket a tartalmaid közötti navigáláshoz – ez még akkor is működik, ha a többi tartalmad egy másik sorba vagy oszlopba van beágyazva.

Egy másik fontos funkció a visszavonás és újbóli végrehajtás gyorsbillentyűje. Elsőre talán nem tűnnek nagy dolognak, de gondolj csak bele: mi történik, ha véletlenül rossz helyre húzol egy tartalmat? Egyes oldalépítőkben kézzel kell visszahúznod az eredeti helyére. A Page Builder Sandwichben mind a visszavonás, mind az újbóli végrehajtás működik. Tehát akár a beírt szöveget szeretnéd módosítani, akár a behúzott tartalmat (vagy egyszerre több behúzott tartalmat) szeretnéd visszaállítani, csak használd a visszavonást vagy az újbóli végrehajtást. A visszavonás és az újbóli végrehajtás az áthúzott elemeknél és még a tulajdonságok módosításánál – például betűméreteknél vagy a sorok belső margóinál – is működik. Ez igazán hatékony eszközzé teszi őket a szerkesztési fegyvertáradban.

5. Egy valódi frontend oldalépítő – Pihentetőbb és gondtalanabb szerkesztési élmény

A fejlesztés során az volt a szemléletünk, hogy a frontenden történő szerkesztés során ne érezd úgy, mintha még mindig háttéreszközökkel dolgoznál. Ne tűnjön úgy, mintha az építőt eredetileg az admin felületre hozták volna létre, majd utólag átültették volna a frontend oldalra.

Összességében számomra a Page Builder Sandwich legfőbb megkülönböztető jegye az, hogy azzal a céllal hoztuk létre, hogy egy „valódi” frontend oldalépítő legyen – a frontend szerkesztés újragondolása.

Ez a cikk egy rövid áttekintést nyújt arról, hogyan működik a Page Builder Sandwich, és bevezetőként szolgál mindazoknak, akiket érdekel, miként integrálódik oldalépítőnk a WordPress különböző részeibe. Nem fogok részletesen kitérni a Page Builder Sandwich egyes funkcióira; ha azokra kíváncsi, látogasson el a videók oldalunkra, ahol rövid képernyőfelvételeken mutatjuk be egyenként az egyes funkciókat.

Ha szeretné megtudni, miben különbözik a Page Builder Sandwich a többi elérhető oldalépítőtől, tekintse meg a Hogyan különbözik a Page Builder Sandwich a többitől című cikkünket.

Hol található? És mit lehet szerkeszteni vele?

Sok más oldalépítőtől eltérően a Page Builder Sandwich a weboldal frontend felületén működik. Ha a backendben tartózkodik, a tartalomszerkesztő gombok mellett elhelyeztünk egy „Frontend” gombot, amely az oldal frontendjére viszi.

A Page Builder Sandwich lehetővé teszi a bejegyzések, oldalak és egyéni bejegyzéstípusok tartalmának szerkesztését. Nem teszi lehetővé azonban a kezdőlapon összesített blogbejegyzések és a webhely más, nem egyedi oldalainak közvetlen szerkesztését. Gondoljon rá így: ha annak, amit szerkeszteni szeretne, van tartalomszerkesztője az adminisztrációs felületen (mint például az „Új bejegyzés” és „Új oldal”), akkor a Page Builder Sandwich használható hozzá. Szerkesztheti az egyedi oldalakat és blogbejegyzéseket, és ha például rendelkezik egy éttermi menüket vagy portfólióelemeket tartalmazó bővítménnyel, azokat is szerkesztheti.

Amikor a frontenden van, az adminisztrációs sávban elhelyeztünk egy kék „Edit with Page Builder Sandwich” gombot. Csak kattintson rá az oldal szerkesztésének megkezdéséhez.

Közvetlen tartalomszerkesztés

A Page Builder Sandwich segítségével a tartalomszerkesztést a lehető legegyszerűbbé és legzökkenőmentesebbé tettük. A tartalom szerkesztése egyértelmű és könnyű: csak kattintson és gépeljen. Ilyen egyszerű.

Bemutatkozik az Inspector

Észrevettük, hogy rengeteg oldalépítőben túl sok a felugró ablak. Személy szerint nem szeretem a felugró ablakokat, mert zavaróak, és lényegében azt üzenik: „hé, hagyd abba, amit csinálsz, amíg ki nem töltöd ezeket a mezőket”. Megtörik az egyébként gördülékeny szerkesztési élményt. Emiatt minimálisra csökkentettük a felugró ablakok használatát, és helyettük megalkottuk az Inspectort.

Az Inspector egy oldalsáv jellegű terület, amely tartalmazza az összes formázási és elrendezési eszközt, amire valaha szüksége lehet. Az Inspector rögzíthető a képernyő bal vagy jobb oldalára, így könnyen láthatja, mit szerkeszt éppen.

Az Inspectorban különféle szövegtulajdonságokat állíthat be, például címsorokat, betűméretet, félkövér és dőlt formázást, szövegszíneket és még sok minden mást. Ezen felül képeket is hozzáadhat, valamint sorokat vagy többhasábos tartalmakat hozhat létre. Képes haladóbb szerkesztési feladatokra is, például sorok teljes oldalszélességűvé alakítására, sor- és oszlop-háttérszínek, függőleges tartalomigazítás, valamint margók és hátterek beállítására. Rendkívül sokoldalú, és az idő nagy részében ezt fogja használni.

Integráció a WordPress sablonokkal

A Page Builder Sandwich természeténél fogva szinte semmilyen saját stílust nem tartalmaz. Amikor a tartalmat szerkeszti, a megjelenő stílusok nagyrészt a saját sablonján alapulnak.

Integráció a rövidkódokkal

A rövidkódok fontos szerepet játszanak a WordPressben, és nagy valószínűséggel Ön is használ néhányat a webhelyén. A Page Builder Sandwich ezeket kiválóan kezeli: a rövidkódok már a frontenden renderelve jelennek meg. A rövidkódok emellett szerkeszthetők maradnak, és a legjobb az egészben, hogy a szerkesztés után a módosításokkal együtt azonnal újra le is renderelődnek.

A kényelem érdekében a rövidkódokat közvetlenül az Inspector segítségével szerkesztheti. Ha nagyobb kontrollra vágyik, duplán kattintva a rövidkódokra azok nyers formájában is szerkesztheti őket. Emellett a webhelyén elérhető összes rövidkód fel van sorolva az Inspectorban, így könnyedén beillesztheti őket a tartalomba.

Mi a helyzet a weboldal felesleges sallangjaival?

Ki szereti a lassú weboldalakat? Mi sem, és biztosan Ön sem. Gondoskodtunk arról, hogy a Page Builder Sandwich szinte semmilyen hatással ne legyen a webhelye teljesítményére. Kijelentkezett állapotban legfeljebb csak a sorok és oszlopok CSS stílusai töltődnek be, valamint a használt rövidkódokhoz szükséges JS és CSS szkriptek kerülnek betöltésre.

Fejlesztőknek

Ha Ön fejlesztő, és rövidkódokat használ a WordPress bővítményeiben, a Page Builder Sandwich egy Shortcode API-t biztosít, amellyel könnyedén adhat meg felhasználói mezőket a rövidkódok egyszerű létrehozásához és módosításához.

Ha tovább szeretné bővíteni a funkciókat, vagy integrálni szeretne a Page Builder Sandwich bizonyos részeivel, számos hasznos akció- és szűrő hook áll rendelkezésére.