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 '<button>Naše tlačítko</button>';
}

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 = '<button>'.do_shortcode($content).'</button>';
    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'      =&gt; 'grey',
), $attr));
$out = '<button class="tlacitko '.$color.'">'.do_shortcode($content).'</button>';
    return $out;
}
 
add_shortcode('tlacitko3','nase_tlacitko3');

Vytvoříme si styly pro tlačítko

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.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

1 Comment

  1. Pingback: Jak na mega menu s obrázky |

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *