Egyéni shortcode létrehozása

[Ezt a cikket 4 perc elolvasni.]

A WordPress a 2.5-ös verzió óta támogatja a shortcode API-t, ennek segítségével pedig mi is könnyedén hozhatunk létre egyéni shortcode-ot a beépítetteken kívül. A shortcode nem más, mint egy functions.php-ben előre definiált PHP funkció, amit bármelyik bejegyzésben vagy oldalon meg tudunk hívni egy egyszerű parancs segítségével. Erre azért van szükség, mert a WordPress alapértelmezetten nem engedélyezi a PHP kódok használatát a tartalmi részben.

Mint ismeretes öt alapértelmezetten beépített shortcode-ot használhatunk, ezek a következők: audio (hangfájlok beillesztésére), caption (képalaláírások használatakor), embed (videó, audió, egyéb anyagok beillesztésére), gallery (galériák létrehozására), video (videók beillesztésére). Mi a helyzet azonban akkor, ha mi szeretnénk egyéni shortcode-ot létrehozni?

Vegyünk egy egyszerű példát, majd egészítsük ki paraméterekkel!

Tegyük fel, hogy minden bejegyzésünk aljára szeretnénk egy figyelmeztető felhívást elhelyezni, miszerint ha tetszett a tartalom, akkor iratkozzanak fel az oldal frissítéseire. Ezt megtehetjük minden esetben kézzel is, azonban sokkal gyorsabb, ha létrehozunk a feladatra egy saját shortcode-ot.

Ehhez írjuk a következőket a sablonunk functions.php fájljának végére:

// Első saját shortcode-om, mely feliratkozásra figyelmezteti az olvasót
 function feliratkozas_link_shortcode() {
 return 'Ha tetszett a cikk <a href="https://wpszaki.hu/feed/" title="Feliratkozás">iratkozz fel az RSS csatornánkra</a>.';
}
add_shortcode('feliratkozas', 'feliratkozas_link_shortcode');

Az első sor a funkciónk elnevezése, ez nem kódrészlet és ki is hagyható, de érdemes meghagyni és olyan nevet adni neki, ami alapján később is könnyedén azonosítani tudjuk. A második sor elnevezi és létrehozza a funkciót, a harmadik sorban pedig jön a szöveg megjelenítéséért felelős return és az általunk kiíratni kívánt szöveg. Végül a lezárás és a funkció elnevezése következik.

Ezek után ha szeretnénk egy bejegyzés végén megjeleníteni a fentebb megadott szöveget, akkor elég csak a [feliratkozas] shortcode-ot használni, a rendszer pedig automatikusan cserélni fogja az általunk megadott szövegre.

A végeredmény a következőképpen fog kinézni:

“Ha tetszett a cikk iratkozz fel az RSS csatornánkra.”

Létrehozhatunk úgynevezett paraméterezett shortcode-ot is, ezek segítségével lehetőségünk lesz befolyásolni a shortcode tartalmát és megjelenítését. A fenti példánál maradva készítsünk egy olyan változatot, amiben nem csak egy kézzel beleírt RSS létezik, mint feliratkozási opció, hanem mi szabjuk meg a shortcode megadásakor, hogy milyen csatorna és milyen URL jelenlen meg az olvasóknak.

// Kiegészített shortcode, amely támogatja a kézzel megadott linkeket
function feliratkozas_multilink_shortcode( $atts ) {
extract( shortcode_atts( array(
'subtype' => 'RSS',
'subtypeurl' => 'https://wpszaki.hu/feed/',
), $atts, 'multilink' ) );

return sprtinf( 'Ne felejts el feliratkozni a <a href='%1$s'>%2$s</a> frissítéseinkre!',
esc_url( $subtypeurl ),
esc_html( $subtype )
);
}
add_shortcode( 'feliratkozas', 'feliratkozas_multilink_shortcode' );

Ez a shortcode már képes fogadni a kézzel megadott linkeket és ezek elnevezését. Ha a használatakor nem adunk meg semmi paramétert, akkor az alapértelmezett RSS linket és címet fogja használni, pont úgy, mint az első példa esetében, azonban paraméterezés esetén mi döntjük el, hogy hogyan is jelenjen meg.

Például ha Twitter csatornánkat reklámoznánk:

[feliratkozas subtype=”Twitter” subtypeurl=”http://www.twitter.com/wpszaki”]

 

Ugyanez Facebook esetén:

[feliratkozas subtype=”Facebook” subtypeurl=”http://www.facebook.com/wpszaki”]

 

De természetesen bármilyen egyéb nevet és linket megadhatunk.

Ezek pedig így fognak megjelenni a látogató számára:

“Ne felejts el feliratkozni a Twitter frissítéseinkre!”
“Ne felejts el feliratkozni a Facebook frissítéseinkre!”

Ezen ismeretek birtokában már bárki tud készíteni egyszerűbb shortcode-okat, de ha szeretnél mélyebben is elmerülni a témában, akkor mint ahogy mindig, most is a WordPress Codex lesz a segítségedre.

Ha tetszik, mutasd meg másoknak is: