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' => 'grey', ), $attr)); $out = '<button class="'.$color.'">'.<button class="tlacitko '.$color.'">do_shortcode($content).'</button></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.
Pingback: Jak na mega menu s obrázky |
A uměli bychom si takto předpřipravené tlačítko/shortcode přidat do wyswyng edotoru (standartního)? Často používám shortcode [fb url=] kdy za rovná se jen doplňuju skutečnou url, takže bych to nemusel vypisovat celé, kliknul bych na tlačítko a do textu by se vložilo ono [fb url=] a já bych jen doplnil adresu :-)
Ano, jde to, ale je potřeba trochu JS. Dají se najít návody.
Pingback: Jak na mega menu s obrázky | Internetové poradenství
Ahoj, neporadíte někdo rychle jak na kod, když chci text a vedle něj obrázek? Přesněji – v jednom řádku je v levé části krátký odstavec a v pravé části obrázek k tomu. Díky moc za pomoc.
Dobrý den,
vytvoříte blok, který pak rozdělíte do dvou sloupců a ado jednoho vložíte obrázek a do druhého text. Url obrázku můžete vkládat pomocí attributu a text třeba pomocí $content.
Když použiju tento kód z návodu:
extract(shortcode_atts(array(
‚color‘ => ‚grey‘,
), $attr));
tak to háže errory
Hezký den,
jaké errory to háže?