Sok WordPress beépülő modul (hallhattad még így is: plugin / bővítmény) és téma shortcode-okat (rövidkód) használ speciális tartalmak, pl.: kapcsolatfelvételi űrlapok, képgalériák, sliderek (mozgóképes ajánló) és egyebek hozzáadásához.

Szeretnél shortcode-ot hozzáadni a WordPresshez, és nem tudod hogyan és hol kezdd el?

A shortcode egyszerű módja annak, hogy dinamikus tartalmat (pl: egy kapcsolati űrlapot) adj hozzá WordPress-bejegyzéseihez, oldalaihoz és az egyes widget területekhez (pl: oldalsáv, lábléc, fejléc helyeken elhelyezett widget területeken). 

Mi az a shortcode?

A WordPress shortcode-jai olyan kódrövidítések, amelyek segítségével dinamikus tartalmat tudsz hozzáadni a WordPress bejegyzéseidhez, oldalaidhoz és widgetekhez. A shortcode formátuma: szögletes zárójelbe írt tartalom:

[shortcode]

A shortcode-ok azért kerültek a „gépezetbe”, mert a WordPress szűri az összes olyan tartalmat (bejegyzések, oldalak tartalma), amivel valaki kártékony kódot helyezhetne el az oldalon úgy, hogy az adatbázisba ír vele. A WordPress oldalba írhatsz egyszerű HTML kódokat. De pl.: a JS (javascript) vagy PHP kódokkal már nem ennyire egyszerű a helyzet. Ha ilyen nyelven írt kódot szeretnél futtatni a honlapon, ahhoz más megoldásra van szükség. Itt jönnek képbe a shortcode-ok.

Ha valaki az egyedi kódját szeretné futtatni a honlapján, hogy megjelenítse egy bejegyzésében vagy oldalán belül pl: egy kapcsolati űrlapot, hírlevél feliratkozást, vagy galériát, akkor a Shortcode API kerül előtérbe.

A Shortcode API lehetővé teszi a fejlesztők számára, hogy hozzáadják kódjukat egy függvényen belül, majd ezt a funkciót shortcode-ként regisztrálják a WordPress-ben, így más felhasználók könnyen használhatják ezt a funkciót kódolási ismeretek nélkül.
A felhasználók tehát a letöltött bővítményen keresztül jutnak hozzá ehhez a funkcióhoz, ami tartalmazza a számukra szükséges megoldást, pl.: egy kapcsolati űrlap beágyazását a kapcsolati oldalon.

Amikor a WordPress megtalálja az előbb említett kapcsolati oldalba beírt shortcode-ot, automatikusan lefuttatja a hozzá tartozó kódot.

Hogyan tudsz [shortcode]-ot hozzáadni a WordPressen belül egy bejegyzéshez vagy oldalhoz?

Először nyiss meg a honlapodon belül egy olyan oldalt vagy bejegyzést szerkesztésre, ahová szeretnél egy shortcode-ot elhelyezni.

Ezt követően a „+” blokk hozzáadása gombra kell kattintania egy rövid kód blokk beszúrásához.

A shortcode hozzáadása után meg kell adni a shortcode tartalmát. pl.: [ng-gallery]

Shortcode-ot többféle bővítmény is biztosít. Lehethogy ezek közül már most is találsz az oldaladon pl: Contact form (űrlapkezelő), Nextgen Gallery (képnézegető, galériakezelő) programok stb.

Ebben az esetben a bővítményen belül találod a hozzátartozó shortcode-ot, amit be kell szúrnod a WordPress bejegyzésbe, ahol azt szeretnéd megjeleníteni, vagy a „+” jelre kattintva megtalálod a bővítmény nevét, és ki tudod választani melyik pl: űrlapot vagy galériát szeretnéd az adott oldalra beszúrni. Mutatok mindegyikre példát.

Shortcode megtalálása és beillesztése a bővítményből

Feltelepítettem az oldalamra a WPForms űrlapkezelő bővítmény. A WordPress oldalam admin felületén belül megkerestem az ehhez tartozó menüpontot. Ott létrehoztam egy űrlapot, majd ezután már meg tudtam nézni az adott űrlaphoz – a program által – generált shortcode-ot, ami a képen szerepel.

A képen szereplő esetben tehát, a shortcode mezőbe a képen szereplő, szögleges zárójelek közötti tartalmat kellene beszúrnom az oldalba ahhoz, hogy az űrlap az adott oldalon vagy bejegyzésben megjelenjen. Ezután az oldal frissítem (mentés) és az űrlap láthatóvá válik.

Shortcode megtalálása és beillesztése a „+” jelre kattintva

A korábbiakban már említett másik eset az, amikor egy bővítmény belepakolja magát a WordPress vizuális szerkesztőjének, azaz a Gutenberg szerkesztőnek a blokkjai közé.

A WPForms ikonra kattintok, majd az alábbi ablak jelenik meg, ahol ki tudom választani azt az űrlapot, amit szeretnék megjeleníteni a bejegyzésben. Frissítés / mentés után a kiválasztott űrlap megjelenik az oldalon vagy bejegyzésben.

Shortcode hozzáadása a WordPress oldalsáv widgetjeihez

Ahogy azt már a cikk elején említettem shortcode-ot több helyen is meg lehet jeleníteni az oldalon. Ebben a részben azt mutatom be, hogy az oldalsáv widget területén hogyan tudod ezt megtenni.

Menj az admin felületen a Megjelenés –> Widgetek menüpontra. Minden sablonban más-más helyen vannak a widget területek elosztva. Van ahol csak oldalsávban van, de van ahol a láblécben, a fejlécben, vagy pl.: a főoldalon is elhelyezésre kerültek widget területek.

Válaszd ki azt a widget területet, ahova a shortcode-ot szeretnéd elhelyezni, majd a widget területen belüli „+” jelre kattintva adj hozzá egy shortcode (rövidkód) blokkot, és utána minden ugyanúgy folytatódik, ahogy azt az előzőekben már leírtam a bejegyzések / oldalakon történő shortcode elhelyezés folyamatnál, azaz beírod a shortcode mezőbe a megfelelő tartalmat, frissítesz (mentés) és már kész is.

Shortcode használata a WordPress sablonfájlokban

A WordPress téma vagy sablonfájlok szerkesztése általában a fejlesztők, vagy ügyesebb webdesignerek feladata.

Alapvetően bármely WordPress sablonhoz hozzá lehet adni shortcode kódot. A shortcoe formátuma a következő:

A honlap betöltődése során a WordPress megkeresi a rövidkódot (shortcode), és megjeleníti annak kimenetét a sablonban, azon a területen, ahol beillesztésre került pl: főoldalon egy slider vagy minden oldal láblécében egy hírlevél feliratkozó mini űrlap.

Egyéni shortcode létrehozása a WordPress sablonfájlban

Ha rendelkezel PHP és vagy JS (javascript) kódolási tapasztalattal és tudással, akkor Te magad is készíthetsz egyéni shortcode-okat, amivel megkönnyítheted a saját munkafolyamataidat, ahelyett, hogy mások által megírt bővítményeket adnál hozzá a honlaphoz.

(Minél több bővítmény van egy honlapra telepítve, annál nagyobb biztonsági rés van az oldalon, konflikust okozhat más bővítményekkel, vagy lassíthatja az oldal betöltődését.)

Ha tudásod és lehetőséged engedi saját témafájlodban helyezd el azokat a funkciókat, amiket egyéb esetben bővítményként telepítenél és hívnál meg az oldalon.

Ebben a kódban először létrehoztam egy függvényt, amely valamilyen kódot futtat, és visszaadja a kimenetet. Ezt követően létrehoztam egy új shortcode-ot (rövidkódot) „udvozles” néven, és megmondtam a WordPressnek, hogy futtassa a létrehozott funkciót.

Ezt a kódot hozzáadhatod a téma functions.php fájljához manuálisan, vagy használhatsz rá egy kódok beillesztésére szolgáló bővítményt, pl: a WPCode -t.

Miután ezt megtettet, hozzáadhatod ezt a rövidkódot egy bejegyzéshez, oldalhoz és widgethez is a következő kód használatával:

[udvozles]

Ezután az oldalon futni fog a létrehozott függvény, és megjeleníti a kívánt kimenetet.

Remélem, hogy sikerült átadni a megfelelő információkat a shortcode-ok terén, és innentől Te is könnyen megtalálod a bővtményekhez tartozó shortcode-okat, és a használatuktól sem riadsz vissza.

---

Honlapot szeretnél, ami nemcsak szép, de a személyes igényeidet is teljes mértékben lefedi?

A meglévő honlapod karbantartására keresel segítő szakembert?

Online tanácsadásra lenne szükséged, mert elakadtál valahol menetközben?

Keress meg bátran email-ben vagy a kapcsolati űrlapon keresztül.

Email: info@cserhajni.hu

Posted on: 2023-10-29, by : Cser Hajni