Chcete sa naučiť, ako vytvoriť krátky kód vo WordPress?
Naučiť sa, ako vytvoriť krátky kód vo WordPress, môže byť efektívnym spôsobom, ako prispôsobiť svoje príspevky a stránky. Ak ste však v tomto procese noví, môže byť pre vás ťažké zistiť, ako používať takúto funkciu na vašej webovej lokalite.
Preto sme pre vás pripravili príručku, ktorá vám pomôže začať. Keď sa pozriete na to, ako fungujú krátke kódy a ako ich efektívne aplikovať, môžete začať prispôsobovať svoj obsah podľa svojich predstáv bez potreby ďalších doplnkov.
V tomto článku budeme diskutovať o tom, čo sú krátke kódy WordPress a prečo by ste ich mohli použiť. Potom vám ukážeme, ako si vytvoriť svoj vlastný.
Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu
Potom späť k tomu, prečo sme tu.
Čo sú to skrátené kódy WordPress?
Skratky WordPress fungujú ako skratky, ktoré vám umožňujú rýchlo vložiť prvky do príspevku alebo stránky. Zvyčajne ide o jeden riadok kódu uzavretý v hranatých zátvorkách. Napríklad :
[exemplecodehortcode]Tento kód zobrazí vopred určenú funkciu na front-ende vášho webu.
WordPress prvýkrát zavedené krátke kódy s vydaním Shortcode API. Používatelia tak mohli jednoducho pridávať do svojich príspevkov a stránok atraktívne prvky, ako napr mapy Google alebo tlačidlo „Páči sa mi to“ na Facebooku.
Existuje vo WordPress predvolenát šesť krátkych kódov :
- titulok: Zalomenie titulkov okolo obsahu
- galéria : zobrazí galérie obrázkov
- Audio: vkladá a prehráva zvukové súbory
- vidéo : vkladá a prehráva videosúbory
- playlist : zobrazí kolekciu audio alebo video súborov
- vložiť : obalí vložené prvky
Stretnete sa aj s dvoma základnými typmi formátovania krátkych kódov: self-closing et enclosing.
Krátke kódy self-closing môžu stáť samostatne a nepotrebujú uzatváraciu značku.
Medzitým enclosing obklopí obsah, ktorý chcete upraviť, a prinúti vás manuálne zatvoriť značku. Môžete napríklad vložiť video YouTube vložením adresy URL medzi značky embed et /embed :
Napríklad by to vytvorilo nasledujúci výsledok:
Niektoré z najlepšie doplnky WordPress prísť s vlastnými krátkymi kódmi. napr. Formuláre WP et Kontaktný formulár 7 majú krátke kódy, ktoré vám umožňujú rýchlo vložiť a Kontaktný formulár v príspevku alebo stránke. Môžete tiež použiť plugin ako MaxButtons na pridanie skráteného kódu tlačidla kdekoľvek na svojom webe.
Prečo by ste mali zvážiť použitie krátkych kódov WordPress?
Existuje veľa dôvodov, prečo môžete použiť skrátené kódy WordPress. Napríklad je to jednoduchšie a rýchlejšie ako učenie a písanie dlhého kódu v HTML. Navyše vám pomôžu udržať váš obsah čistý a dostupný.
Krátke kódy možno použiť na automatizáciu určitých funkcií, ktoré používate opakovane. Napríklad, ak použijete tlačidlo výzva na akciu (CTA) V každom z vašich článkov môže byť rýchlym a pohodlným riešením pripravený vyhradený krátky kód.
Treba spomenúť, že Gutenbergov editor funguje rovnakým spôsobom, spolieha sa na použitie krátkych kódov. Umožňuje používateľom WordPress pridať niekoľko interaktívnych funkcií pomocou blokov.
Takáto metóda je oveľa vhodnejšia pre začiatočníkov, pretože obsah môžete pridávať priamo do používateľského rozhrania. Editor blokov WordPress je však stále obmedzený v tom, čo ponúka. Našťastie prichádza s blokom krátky, ktorá vám umožňuje pridať na vaše stránky vlastný obsah.
Ako vytvoriť krátky kód vo WordPress
Ak už máte znalosti o kódovaní, môžete si vytvoriť vlastné krátke kódy. To vám dáva plnú kontrolu nad vzhľadom a funkčnosťou vášho webu.
Pozrime sa, ako vytvoriť vlastný krátky kód WordPress. V tomto návode pridáme ako príklad odkazy na sociálne siete k článku.
Krok 1 – Vytvorte nový súbor témy
Skôr ako začnete, je to dobrý nápad úplne zálohujte svoj web WordPress. Budete tiež musieť vytvoriť samostatný súbor pre svoj vlastný krátky kód mimo súboru functions.php váš WordPress tému. Poskytne to núdzové riešenie v prípade, že sa niečo pokazí.
Môžete použiť klienta FTP (File Transfer Protocol) ako je FileZilla na prístup k súborom tém vašej webovej lokality. Po prihlásení na svoj web prejdite na wp-content > témy a nájdite aktuálny priečinok témy. V našom príklade to tak bude sova lis:
Otvorte priečinok WordPress tému, kliknite naň pravým tlačidlom myši a stlačte Vytvorte nový súbor.
Pomenujte svoj nový súbor custom-shortcodes.php potom kliknite na tlačidlo OK. Potom ho môžete upraviť kliknutím pravým tlačidlom myši a výberom možnosti Zobraziť/Upraviť :
Tým sa súbor otvorí vo vašom predvolenom textovom editore. Potom stačí pridať nasledujúci blok kódu:
<?php ?>
Tým sa zabezpečí, že váš nový súbor bude interpretovaný ako PHP, čo je skriptovací jazyk, na ktorom je WordPress postavený.
Potom môžete uložiť zmeny a zatvoriť súbor. Nezabudnite začiarknuť nasledujúce políčko, aby ste sa uistili, že bude aktualizovaný na serveri a aplikovaný na váš web:
Potom otvorte súbor functions.php v rovnakom priečinku témy a do spodnej časti dokumentu pridajte nasledujúci riadok kódu:
include('shortcodes-personnalises.php');
Toto povie systému, aby zahrnul všetky zmeny, ktoré v súbore vykonáte custom-shortcodes.php v functions.php pričom vám ich umožní oddeliť. Keď budete pripravení, uložte zmeny a zatvorte súbor.
Krok 2 - Vytvorte funkciu krátkeho kódu
Ďalej budete musieť vytvoriť funkciu krátkeho kódu a dať jej pokyn, čo má robiť. Znova vyberte možnosť Zobraziť/Upraviť vášho súboru custom-shortcodes.php. Pomocou nasledujúceho útržku kódu pridajte akciu na pripojenie vašej funkcie:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Ďalej budete musieť pridať funkciu spätného volania, ktorá sa spustí, keď je aktivovaná akcia zavesenia. Pridaním nasledujúceho riadku kódu priamo za riadok uvedený vyššie poviete WordPress, že vaša funkcia je krátky kód:
add_shortcode('sabonner', 'subscribe_link');Keď vytvoríte krátky kód pomocou funkcie add_shortcode, priradíte značku krátkeho kódu “ ($tag) "a zodpovedajúci funkčný hák" ($func) ktorý sa spustí pri každom použití skratky.
Inými slovami, ak je značka krátkeho kódu [subscribe], potom háčik 'subscribe_link' presmeruje návštevníka na zadanú adresu URL.
Preto celý kód, ktorý používate vo svojom súbore shortcodes-personnalises.php bude vyzerať takto:
Treba poznamenať, že pri pomenovávaní značiek by ste mali používať iba malé písmená, aj keď je možné použiť podčiarkovníky. Je to tiež kľúčové vyhnúť sa používaniu pomlčiek, pretože to môže rušiť iné krátke kódy.
Krok 3 – Pridajte skratku Self-Close na webovú stránku
Teraz môžete otestovať svoj počiatočný kód ako samozatvárací krátky kód na svojom webe WordPress. Pomocou editora blokov WordPress môžete značku [subscribe] vložiť priamo do príspevku:
Návštevníkom vášho webu sa tak zobrazí nasledujúci obsah:
Ak ste s týmto krátkym kódom spokojní, nemusíte robiť nič iné. Ak si ho však chcete prispôsobiť, môžete prejsť na ďalší krok.
Krok 4 - Pridajte parametre do krátkeho kódu
Skrátený kód môžete prispôsobiť "prihlásiť sa" pre ďalšie funkcie na zobrazenie iných odkazov na sociálne médiá. Môžete to urobiť pridaním parametra na úpravu adresy URL.
Liať pridať atribúty riadenia, musíte otvoriť súbor custom-shortcodes.php a pridajte nasledujúci 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í prispôsobiť odkazy vo vašej značke krátkeho kódu a pridať ich do editora Gutenberg. Môžete ho prilepiť na predchádzajúci kód v súbore custom-shortcodes.php. Malo by to vyzerať asi takto:
Pridanie shortcode_atts() funkciu skombinuje používateľské atribúty so všetkými známymi atribútmi a všetky chýbajúce údaje budú nahradené ich predvolenými hodnotami. Keď budete pripravení, uložte zmeny a zatvorte súbor.
Krok 5 – Otestujte nastavenia
Teraz môžete otestovať aktualizovaný krátky kód v editore blokov WordPress. V našom príklade testujeme naše odkazy na Twitter a Facebook s nasledujúcimi krátkymi kódmi:
[odkaz na odber='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[odkaz na odber='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Výsledkom bude nasledujúci výsledok na front-ende:
Tento samozatvárací krátky kód zobrazuje návštevníkom priame adresy URL vašich sociálnych profilov. Možno však budete chcieť, aby táto funkcia vyzerala trochu uhladenejšie.
Napríklad budete môcť vytvoriť priloženú verziu, ktorá vám umožní plne prispôsobiť kotviaci text zobrazený používateľom, keď sa naň chystajú kliknúť. V ďalšom kroku vám ukážeme, ako na to.
Krok 6 – Vytvorte priložený krátky kód
Ohraničujúci krátky kód bude naformátovaný rovnako ako predchádzajúci príklad automatického zatvárania. Bude však obsahovať ďalší parameter pre funkciu.
Najprv budete musieť pridať $content = null, ktorý identifikuje túto funkciu ako uzavretý krátky kód. Potom môžete pridať do_shortcode z WordPress, ktorý v obsahu vyhľadá krátke kódy.
V súbore custom-shortcodes.php, pridajte nový krátky 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');Keď budete pripravení, váš súbor custom-shortcodes.php by mal vyzerať takto:
Predchádzajúci kód má atribút " štýl " dodatočný, ktorý zmení kotviaci text na modrú farbu. Po dokončení nezabudnite zmeny uložiť.
Krok 7 – Pridajte na webovú stránku priložený krátky kód
Teraz môžete vložiť svoj krátky kód do editora blokov WordPress, aby ste videli konečný výsledok:
Ako ste si všimli, pomocou tohto skráteného kódu môžete jednoducho zmeniť adresy URL stránok sociálnych médií a text kotvy zobrazený návštevníkovi. V tomto prípade sme si vybrali " Facebook " et "twitter" :
tam ! Teraz ste vytvorili vlastný krátky kód pre odkazy na odber na vašich stránkach a príspevkoch. Upozorňujeme, že všetky vyššie uvedené kroky je možné upraviť tak, aby sa pomocou funkcie WordPress vytvorili najrôznejšie rôzne prvky Shortcodes.
Pridanie ďalších funkcií na váš web WordPress je oveľa jednoduchšie pomocou krátkych kódov. Môžete ich použiť na prispôsobenie existujúceho obsahu a pridanie interaktívnych funkcií, ako sú kontaktné formuláre, galérie obrázkov alebo odkazy na predplatné.
Ďalšie odporúčané zdroje
Tiež vás pozývame, aby ste si prečítali zdroje uvedené nižšie, aby ste sa presadili a ovládali svoje webové stránky a blog.
- Ako vytvoriť plávajúce tlačidlo s indexom Z pomocou Elementor
- Kedy a ako nainštalovať WordPress v podadresári
- Ako vytvoriť jednoduchý doplnok Gutenberg Block WordPress
- Ako pridať vlastné písma na webovú stránku WordPress
záver
V tomto článku sme sa naučili, ako vytvoriť svoj vlastný krátky kód vo WordPress. Ak máte nejaké obavy alebo návrhy, dajte nám vedieť Komentáre.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Medzitým, zdieľajte tento článok na rôznych sociálnych sieťach.
...
