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 = '&lt;button class="'.$color.'"&gt;'.<button class="tlacitko '.$color.'">do_shortcode($content).'&lt;/button&gt;</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.

About The Author

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

Související články

8 Comments

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

  2. Fany

    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 :-)

    Odpověď
  3. Pingback: Jak na mega menu s obrázky | Internetové poradenství

  4. Lucka

    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.

    Odpověď
    1. Musilda

      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.

      Odpověď
  5. Viktor

    Když použiju tento kód z návodu:
    extract(shortcode_atts(array(
    ‚color‘ => ‚grey‘,
    ), $attr));

    tak to háže errory

    Odpověď

Přidejte komentář

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