WordPress Shortcode létrehozása

A WordPress-ben a shortcode-ok olyan kiegészítő funkciók, melyekkel gyakran használt funkciókat tudunk pillanatok alatt alkalmazni. Ilyenek például a bejegyzésekben vagy wordPress oldalakon használt formázási funkciók. Rengeteg lehetőség rejlik bennük, például fájlokat, videókat lehet a bejegyzésbe illeszteni, különféle grafikus elemeket, gombokat, slidereket adhatunk a tartalomhoz stb.

Ha nem is hallottál róla, elég nagy az esély, hogy már használtál ilyet. Prémium WordPress theme-ekbe általában alapból beépítenek, néha nagyon sok extra shortcode-ot. Ilyenek lehetnek például ártáblázatok, kép effektek, különféle dobozok stb. A shortcode-okat a szöveg szerkesztőben használjuk, mindegyiknek különböző elnevezése van amelyet szögletes zárójelbe kell tenni, hogy használhassuk. Lényegében ugyanúgy működnek mint a fórumokban használt BBkódok.

Shortcode használata

Shortcodeokat használhatjuk önállóan, pl: [shortcode]

vagy pedig, ha egy bizonyos tartalmat szeretnénk velük megformázni akkor egy nyitó és egy lezáró részt kell használnunk:

[shortcode]Ezt a szöveget formázza![/shortcode]

A bonyolultabb shortcode-ok külön értékkel is rendelkezhetnek:

[list_shortcode icon=”tick”]

A fenti shortcode például egy listát jeleníthet meg, de a list elemei előtt nem a megszokott fekete pont jelenik meg, hanem egy kis pipa.

Egyszerű Shortcode készítése

Először is elkészítünk egy nagyon egyszerű shortcodeot, hogy lásd, hogyan is működik. Nyisd meg egy szerkesztővel az aktív theme-ed functions.php fájlját, majd a végére másold be az alábbi kódot:

<pre class="php">function myShortCode() {
	return 'Shortcode próba!';
}
 
add_shortcode('mysc', 'myShortCode');</pre>

Ez mit is jelent? Létrehozunk egy függvényt, melyet ‘myShortCode’-nak nevezünk. Ha ezt a függvényt meghívják, magyarul használjuk a shortcodeunkat akkor a “Shortcode próba!” szöveget fogja kiírni. Az ‘add_shortcode’ függvény pedig megjeleníti a használt shortcodeot. A szövegszerkesztőben amikor használjuk a shortcode-ot a szögletes zárójel közé a “mysc”-t írjuk be. [mysc]

Mielőtt tovább lépnél, próbáld ki, hogy működik e.

Bonyolultabb shortcode készítése

Most pedig készítsünk egy kicsit összetettebb shortcode-ot, amit talán már élőben is érdemes lesz használni :)

Mondjuk, hogy szeretnénk a bejegyzésünk jobb oldalán egy kis szövegdobozt elhelyezni, amelynek más háttérszíne van. Az alábbi kódra lesz szükségünk:

<pre class="php"> function rightFloatBox($atts, $content = null ) {
	extract(shortcode_atts (array (
		"align" => 'right',
		"width" => '150',
		"bordersize" => '1',
		"padding" => '4',
		"bgcolor" => '#fcba0a',
	), $atts ) );
	return '
<div class="align' . $align . '" style="width: ' . $width . 'px; background: ' . $bgcolor . '; border: ' . $bordersize . 'px solid #fc930a; padding: ' . $padding . 'px;">' . $content . '</div>';
}
 
add_shortcode( 'fbox', 'rightFloatBox' );</pre>

Először is létrehoztuk a függvényünket, melynek a ‘rightFloatBox’ nevet adtuk. Ennek a függvénynek már értékei is lesznek. Az értékeket, mint például az igazítás, szélesség stb. eltároljuk egy tömbben. A ‘return’ pedig tartalmazza azt a részt ami majd meg fog jelenni, ha használjuk a shortcodeot. A szögletes zárójel közé pedig az ‘fbox’ kerül majd. Ha mindent jól csináltál akkor valami ilyet kell látnod:

wordpress shortcode

Természetesen további css-t is használhatsz, ha nagyon sok shortcodeod van akkor külön css fájlt is készíthetsz neki. Ez a példa csak a shortcode működését volt hivatott szemlélteni. Ezzel a technikával lényegében bármilyen formázást létrehozhatsz. Ha kérdésed van, írj egy kommentet.

Hozzászólás elküldése

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.