Chcete se naučit, jak vytvořit krátký kód ve WordPressu?
Naučit se, jak vytvořit krátký kód ve WordPressu, může být efektivní způsob, jak přizpůsobit své příspěvky a stránky. Pokud však s tímto procesem začínáte, může být pro vás obtížné zjistit, jak takovou funkci na vašem webu používat.
Proto jsme sestavili průvodce, který vám pomůže začít. Když se podíváte na to, jak fungují krátké kódy a jak je efektivně aplikovat, můžete začít upravovat svůj obsah podle svých představ, aniž byste potřebovali další pluginy.
V tomto článku budeme diskutovat o tom, co jsou krátké kódy WordPress a proč byste mohli zvážit jejich použití. Pak vám ukážeme, jak si vytvořit vlastní.
Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu
Pak zpět k tomu, proč jsme tady.
Co jsou to zkratky WordPress?
Zkratky WordPress fungují jako zkratky, které vám umožní rychle vložit prvky do příspěvku nebo stránky. Obvykle se jedná o jeden řádek kódu uzavřený v hranatých závorkách. Například :
[exemplecodehortcode]Tento kód zobrazí předem určenou funkci na front-endu vašeho webu.
WordPress poprvé představil shortcodes s vydáním Shortcode API. Uživatelé tak mohli snadno přidávat do svých příspěvků a stránek atraktivní prvky, jako např Mapy Google nebo tlačítko „To se mi líbí“ na Facebooku.
Existuje ve WordPressu výchozít šest krátkých kódů :
- titulek: Obtékání titulků kolem obsahu
- galerie : zobrazí galerie obrázků
- Audio: vkládá a přehrává zvukové soubory
- vidéo : vkládá a přehrává video soubory
- playlist : zobrazí kolekci audio nebo video souborů
- vložit : zabalí vložené prvky
Setkáte se také se dvěma základními typy formátování krátkých kódů: self-closing et enclosing.
Krátké kódy self-closing mohou stát samostatně a nepotřebují uzavírací značku.
Do té doby, enclosing obklopit obsah, který chcete upravit, a donutit vás ručně zavřít značku. Můžete například vložit video YouTube vložením adresy URL mezi značky embed et /embed :
Například by to vytvořilo následující výsledek:
Některé z nejlepší pluginy WordPress přijít s vlastními krátkými kódy. Například, Formuláře WP et Kontaktní formulář 7 mají krátké kódy, které vám umožní rychle vložit a kontaktní formulář v příspěvku nebo stránce. Můžete také použít plugin jako MaxButtons přidat krátký kód tlačítka kamkoli na svůj web.
Proč byste měli zvážit použití krátkých kódů WordPress?
Existuje mnoho důvodů, proč můžete používat krátké kódy WordPress. Je to například jednodušší a rychlejší než učení a psaní dlouhého kódu v HTML. Navíc vám pomohou udržet váš obsah čistý a přístupný.
Krátké kódy lze použít k automatizaci určitých funkcí, které používáte opakovaně. Pokud například použijete tlačítko výzva k akci (CTA) pro každý váš článek může být rychlým a pohodlným řešením připravený vyhrazený krátký kód.
Mělo by být zmíněno, že Gutenberg editor funguje stejným způsobem, spoléhá se na použití krátkých kódů. Umožňuje uživatelům WordPress přidávat několik interaktivních funkcí pomocí bloků.
Taková metoda je mnohem přívětivější pro začátečníky, protože obsah můžete přidávat přímo do uživatelského rozhraní. Editor bloků WordPress je však stále omezený v tom, co nabízí. Naštěstí přichází s blokem Krátký, která vám umožní přidat na vaše stránky vlastní obsah.
Jak vytvořit krátký kód ve WordPressu
Pokud již máte znalosti o kódování, můžete si vytvořit vlastní krátké kódy. To vám dává plnou kontrolu nad vzhledem a funkčností vašeho webu.
Podívejme se, jak vytvořit vlastní krátký kód WordPress. V tomto tutoriálu přidáme jako příklad odkazy na sociální sítě k článku.
Krok 1 – Vytvořte nový soubor motivu
Než začnete, je to dobrý nápad kompletně zálohujte svůj web WordPress. Budete také muset vytvořit samostatný soubor pro svůj vlastní krátký kód mimo soubor functions.php váš WordPress téma. To poskytne záložní řešení v případě, že se něco pokazí.
Můžete použít klienta FTP (File Transfer Protocol) jako FileZilla pro přístup k souborům motivů vašeho webu. Jakmile se přihlásíte na svůj web, přejděte na wp-content> témata a vyhledejte aktuální složku motivu. V našem příkladu tomu tak bude sova lis:
Otevřete složku WordPress téma, klikněte na něj pravým tlačítkem a stiskněte Vytvořit nový soubor.
Pojmenujte svůj nový soubor custom-shortcodes.php pak klepněte na tlačítko OK. Poté jej můžete upravit tak, že na něj kliknete pravým tlačítkem a vyberete možnost Zobrazit/Upravit :
Tím se soubor otevře ve vašem výchozím textovém editoru. Poté stačí přidat následující blok kódu:
<?php ?>
Tím zajistíte, že váš nový soubor bude interpretován jako PHP, což je skriptovací jazyk, na kterém je WordPress postaven.
Poté můžete uložit změny a zavřít soubor. Nezapomeňte zaškrtnout následující políčko, abyste zajistili, že bude aktualizován na serveru a použit na váš web:
Poté soubor otevřete functions.php ve stejné složce motivu a do dolní části dokumentu přidejte následující řádek kódu:
include('shortcodes-personnalises.php');
Tím sdělíte systému, aby zahrnul všechny změny, které v souboru provedete custom-shortcodes.php v functions.php a zároveň vám je umožní oddělit. Až budete připraveni, uložte změny a zavřete soubor.
Krok 2 – Vytvořte funkci Shortcode
Dále budete muset vytvořit funkci krátkého kódu a dát jí pokyn, co má dělat. Znovu vyberte možnost Zobrazit/Upravit vašeho souboru custom-shortcodes.php. Pomocí následujícího úryvku kódu přidejte akci k připojení vaší funkce:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Dále budete muset přidat funkci zpětného volání, která se spustí, když je aktivována akce zavěšení. Přidáním následujícího řádku kódu přímo za řádek uvedený výše sdělíte WordPressu, že vaše funkce je krátký kód:
add_shortcode('sabonner', 'subscribe_link');Když vytvoříte krátký kód pomocí funkce add_shortcode, přiřadíte značku krátkého kódu “ ($tag) "a odpovídající funkční háček" ($func) který se spustí při každém použití zástupce.
Jinými slovy, pokud je tag shortcode [subscribe], pak háček 'subscribe_link' přesměruje návštěvníka na zadanou URL.
Proto celý kód, který používáte ve svém souboru shortcodes-personnalises.php bude vypadat takto:
Je třeba poznamenat, že při pojmenovávání značek byste měli používat pouze malá písmena, i když lze použít podtržítka. To je také zásadní vyvarujte se používání pomlček, protože to může rušit jiné krátké kódy.
Krok 3 – Přidejte na webové stránky krátký kód Self-Close
Nyní můžete otestovat svůj počáteční kód jako samouzavírací krátký kód na svém webu WordPress. Pomocí editoru bloků WordPress můžete tag [subscribe] vložit přímo do příspěvku:
Návštěvníkům vašeho webu se zobrazí následující obsah:
Pokud jste s tímto krátkým kódem spokojeni, nemusíte dělat nic jiného. Pokud jej však chcete upravit, můžete přeskočit k dalšímu kroku.
Krok 4 – Přidejte parametry do krátkého kódu
Můžete upravit krátký kód "předplatit" pro další funkce pro zobrazení dalších odkazů na sociální sítě. Můžete to provést přidáním parametru pro úpravu adresy URL.
Pro přidat atributy správy, musíte soubor otevřít custom-shortcodes.php a přidejte následující kód:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');To vám umožní přizpůsobit odkazy ve vaší značce krátkého kódu a přidat je do editoru Gutenberg. Můžete jej vložit přes předchozí kód v souboru custom-shortcodes.php. Mělo by to vypadat nějak takto:
Přidání funkce shortcode_atts(). zkombinuje uživatelské atributy se všemi známými atributy a veškerá chybějící data budou nahrazena jejich výchozími hodnotami. Až budete připraveni, uložte změny a zavřete soubor.
Krok 5 – Otestujte nastavení
Nyní můžete testovat aktualizovaný krátký kód v editoru bloků WordPress. V našem příkladu testujeme naše odkazy na Twitteru a Facebooku s následujícími krátkými kódy:
[odkaz k odběru='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[odkaz k odběru='https://twitter.com/BlogPasCher']Twitter[/subscribe]
To povede k následujícímu výsledku na front-endu:
Tento samouzavírací krátký kód zobrazuje návštěvníkům přímé adresy URL vašich sociálních profilů. Možná však budete chtít, aby tato funkce vypadala trochu uhlazeně.
Například budete moci vytvořit připojenou verzi, která vám umožní plně přizpůsobit text kotvy zobrazovaný uživatelům, když se na něj chystají kliknout. V dalším kroku vám ukážeme, jak na to.
Krok 6 – Vytvořte přiložený krátký kód
Ohraničující krátký kód bude naformátován stejně jako předchozí příklad automatického zavírání. Bude však obsahovat další parametr pro funkci.
Nejprve budete muset přidat $content = null, který identifikuje tuto funkci jako uzavřený krátký kód. Poté můžete přidat do_shortcode z WordPressu, který v obsahu vyhledá krátké kódy.
V souboru custom-shortcodes.php, přidejte nový přiložený krátký kód:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Až budete připraveni, váš soubor custom-shortcodes.php by měl vypadat takto:
Předchozí kód má atribut "styl" další, která změní kotvící text na modrou barvu. Až budete hotovi, nezapomeňte změny uložit.
Krok 7 – Přidejte na webovou stránku přiložený krátký kód
Nyní můžete vložit svůj krátký kód do editoru bloků WordPress, abyste viděli konečný výsledek:
Jak jste si všimli, můžete snadno změnit adresy URL svých stránek sociálních médií a text kotvy zobrazovaný návštěvníkovi pomocí tohoto krátkého kódu obalu. V tomto případě jsme zvolili " Facebook " et "Cvrlikání" :
Tam ! Nyní jste vytvořili vlastní krátký kód pro odkazy na předplatné na vašich stránkách a příspěvcích. Všimněte si, že všechny výše uvedené kroky lze upravit tak, aby pomocí funkce WordPress vytvořily nejrůznější prvky Shortcodes.
Přidání dalších funkcí na váš web WordPress je mnohem jednodušší pomocí krátkých kódů. Můžete je použít k přizpůsobení stávajícího obsahu a přidání interaktivních funkcí, jako jsou kontaktní formuláře, galerie obrázků nebo odkazy na předplatné.
Další doporučené zdroje
Zveme vás také, abyste si prostudovali níže uvedené zdroje, abyste se dostali dále do sevření a kontroly nad svým webem a blogem.
- Jak vytvořit plovoucí tlačítko s indexem Z pomocí Elementor
- Kdy a jak nainstalovat WordPress v podadresáři
- Jak vytvořit jednoduchý plugin Gutenberg Block WordPress
- Jak přidat vlastní písma na web WordPress
Proč investovat do čističky vzduchu?
V tomto článku jsme se naučili, jak vytvořit svůj vlastní krátký kód ve WordPressu. Máte-li jakékoli obavy nebo návrhy, dejte nám vědět commentaires.
Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
