Jak vytvořit vlastní shortcode

Drtivá většina premium šablon obsahuje množství shortcódů, které usnadňují práci s obsahem ve wordpressu. Shortcód je zkrácený zápis podobný bbcode, který vložíme do příspěvku, nebo widgetu a systém díky tomu zavolá již připravenou funkci. Některé shortcódy umožňují vkládání i celých výstupů z pluginů.

Jak vytvořit vlastní shortcode tlačítko

1. Vlastní funkce

Do souboru function zapíšeme funkci

function nase_tlacitko1(){
return 'Naše tlačítko';
}

Pomocí add_shortcode aktivujeme shortcód.

add_shortcode('tlacitko','nase_tlacitko1');

Tlačítko vložíme do příspěvku

[tlacitko]

Výsledek [tlacitko]
Co je nešikovné, je to, že nemáme možnost ovlivnit text tlačítka. Proto pomocí nové proměnné přidáme obsah tlačítka. Naši funkci upravíme na

function nase_tlacitko2($attr,$content = null){
$out = ''.do_shortcode($content).'';
    return $out;
}
add_shortcode('tlacitko2','nase_tlacitko2');

Tlačítko vložíme tentokrát jako párový tag:

[tlacitko2]Obsah tlačítka[/tlacitko2]

Výsledek: [tlacitko2]Obsah tlačítka[/tlacitko2]

Jako poslední využijeme proměnnou $attr, kterou jsme do funkce přidali v minulém příkladu. Pomocí této proměnné přidáme k buttonu třídu, pomocí níž budeme měnit styly.

Upravíme funkci

function nase_tlacitko3($attr,$content = null){
extract(shortcode_atts(array(
		'color'      => 'grey',
		), $attr));
$out = '<button class="'.$color.'">'.do_shortcode($content).'</button>';
    return $out;
}

add_shortcode('tlacitko3','nase_tlacitko3');

Vytvoříme si styly pro tlačítko

.tlacitko {
width:200px;
height: 35px;
padding: 10px 20px 10px 20px;
margin: 0px 0px 20px 0px;
text-align:center;
font-size: 14px;
line-height: 18px;
font-weight: bold;
border:none;
text-transform: uppercase;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 4px 2px 0px rgba(139, 42, 42, 1);
box-shadow: 0px 4px 2px 0px rgba(139, 42, 42, 1);
}

.cervena{background: #dc3c3c;}
.sedy{background: #D2D2D2;}
.modry{background: #1E5799;}

A nyní pomocí atributu můžeme měnit barvu tlačítka

[tlacitko3 color="cervena"]Červené tlačítko[/tlacitko3]
[tlacitko3 color="modry"]Modré tlačítko[/tlacitko3]
[tlacitko3 color="sedy"]Šedé tlačítko[/tlacitko3]

[tlacitko3 color=“cervena“]Červené tlačítko[/tlacitko3]
[tlacitko3 color=“modry“]Modré tlačítko[/tlacitko3]
[tlacitko3 color=“sedy“]Šedé tlačítko[/tlacitko3]

Pokud si připravíme více stylů, můžeme mít tolik variant, kolik budeme potřebovat.