WordPress shortcode

WordPress shorcode je technika, pomocí které se dají do příspěvků vkládat libovolné prvky. Shortcode umožňuje skrýt část zdrojového kódu (např. HTML) za speciální tagy takzvané shortcode. Pomocí těchto shortcodes pak můžete do vašich příspěvků elegantním způsobem vkládat prakticky cokoliv a nemusíte se zabývat tím, jak vypadá např. html kód daného prvku. Tím si můžete výrazně zjednodušit práci při vytváření příspěvků.

Co je shortcode

Shortcode je technika, kterou velmi dobře znají (doufám) všichni programátoři. Zjednodušeně řečeno se to v programovacích jazycích nazývá funkce, procedura, metoda a podobně. Shortcode není nic jiného, než zabalení nějakého bloku kódu do funkce (php funkce), které se následně ve WordPressu přiřadí značka (něco jako tag chcete-li). Tuto značku pak používáte v příspěvcích právě místo onoho zdrojového kódu a WordPress už si zařídí, že tuto značku nahradí vašim kódem.

Příklad shortcode značky, kterou ve WordPressu používá většina z nás je [gallery]. Pokud chcete můžete se podívat na seznam defaultních shortcode značek ve WordPressu. Značka [gallery] je nepárová ale existují i párové značky, které vypadají například takto [MojeShortcodeZnačka] obsah [/MojeShortcodeZnačka].

K čemu shortcode použít?

Každý, kdo někdy vytvářel web nebo blog, se určitě setkal s tím, že se mu na jednotlivých stránkách opakují určité sekvence html kódu. WordPress šablony většinou neumí všechno to co potřebujete (hlavně ty free) a občas je nutné si některé prvky a styly prostě doprogramovat. Já si na tomto webu přidával například styly pro bloky, které chci zvýraznit jako tip a varování. Pak tu mám různé plovoucí bloky pro zobrazení seznamu odkazů a pod články s recenzemi her zase blok verdikt.

Všechny tyhle prvky mají jasně daný formát HTML a CSS a je žádoucí, aby byly ve všech příspěvcích stejné. Navíc jsou předurčeny k tomu, že se budou poměrně často v příspěvcích opakovat. S kaskádovým stylem je to jednoduché, ten vyrobíte jednou a je pouze na jednom místě. Problém je v neustále se opakujícím kódu HTML. Kopírování z předchozích příspěvků je úmorné, a to ani nemluvím o tom, když se rozhodnete vybraný blok nějakým způsobem změnit. Pak musíte jít a opravit všechny příspěvky kde se prvek vyskytuje! A tady přichází na řadu shortcode.

Jak si vyrobit vlastní shortcode

Řekněme, že si chci vyrobit například mnou zmíněný blok pro zvýraznění nějakého tipu v příspěvku. Abych něco takového mohl udělat, potřebuji si nejprve ujasnit dvě věci. Jak bude vypadat HTML kód daného prvku a pak kaskádový styl. HTML, které chci vložit do příspěvku, bude vypadat následovně:

Kaskádový styl, který tomu dodá ten správný šmrnc musím vložit do souboru style.css v šabloně.

Jednoduchý párový shortcode

Proto, že neustále nechci vypisovat tag div, nechci si pamatovat třídu kaskádového stylu a zapomínám před radu vypisovat text TIP: vyrobím si na to párový shortcode. K tomu potřebuji trochu toho php, ale není se čeho děsit, je to jednoduché. Nejprve si vyrobím funkci, která mi neudělá nic jiného než, že mi vyrobí mnou požadovaný tag div přesně tak, jak ho potřebuji.

Název php funkce je child_tip_shortcode. Vstupují do ní dva parametry. Seznam atributů v proměnné $atts, který v tomto případě není potřeba proto, že tento shortcode žádné atributy nemá. A obsah mého shortcode v proměnné $content. Metoda pak vrací můj tag div, včetně třídy s kaskádovým stylem a prefixem TIP:. Za proměnnou $content se pak dosadí text mezi otevíracím a uzavíracím shortcode tagem. Poslední řádek říká WordPressu, že má mou funkci zaregistrovat pro shortcode s názvem tip. Celý tento blok pak přidám do souboru functions.php v šabloně. A to je vše. Použití je pak strašně jednoduché. V příspěvku pak stačí zadat:

V příspěvku to pak bude vypadat takto:

Atributy v shortcode

To bylo jednoduché. Co když potřebuji do shortcode dostat nějaké informace, které mi ovlivní jeho chování? Například bych chtěl ovlivnit, jestli se mi prefix TIP: vypíše nebo ne. K tomu slouží atributy.

Do funkce si můžu zavést atribut hint, kterému předám True nebo False v závislosti na tom, jestli se má text zobrazit nebo ne. Ve funkci pak na řádku ‚hint‘ => ‚True‘ přiřadím defaultní hodnotu, v případě, že uživatel hint v shortcode nevyplní. Použití v příspěvku je pak následující:

Vnořený shortcode

Někdy se vám stane, že budete potřebovat uvnitř vašeho shortcode použít jiný shortcode. Například v mnou zmíněném bloku verdikt jsem to měl nejprve uděláno tak, že jsem používal párový shortcode verdikt a uvnitř něj dva další shortcode pro plusy a minusy. Vypadalo to zhruba takto:

Aby bylo možné něčeho takového dosáhnout, musí se nad obsahem v nadřazeném (tomu ve kterém se mají používat další) shortcode explicitně vyvolat funkce do_shortcode .

Závěr

Shortcode je jednoduchý způsob jak si můžete připravit elementy a prvky webu dopředu a pak je jednoduše používat v příspěvcích. Usnadní vám práci a v případě změny prvku se vyhnete hromadným úpravám příspěvků. Kdo není v php úplně zběhlý může využít shotcode generator pro vygenerování kostry funkce.  Pro hlubší studium doporučuji shortcode API v manuálu WordPressu.