Vodnik za WordPress shortcodes

Kaj so WordPress shortcodes

Shortcodes so posebne oznake v oglatih oklepajih, ki jih WordPress mehanizem samodejno zamenja z dinamično vsebino. Na primer [gallery] prikazuje galerijo slik, [video] vgradi video in [contact-form] prikaže kontaktni obrazec. Shortcodes omogočajo uporabnikom brez tehničnega znanja, da v objave in strani vnesejo kompleksno vsebino s preprostim vnosom kratke kode.

WordPressovi vgrajeni shortcodes pokrivajo osnovne potrebe, vendar prava moč prihaja iz možnosti ustvarjanja lastnih shortcodov. Razvijalci vtičnikov jih uporabljajo za dodajanje funkcionalnosti, kot so obrazci, tabele s cenami, drsniki in gumbi, theme razvijalci pa shortcodes uporabljajo za ponavljajoče elemente oblikovanja. Razumevanje sistema shortcodov je pomembna veščina za vsakega WordPress uporabnika in razvijalca.

Vgrajeni WordPress shortcodes

WordPress prihaja z več vgrajenimi shortcodes, ki pokrivajo osnovne multimedijske potrebe. Ti shortcodes delujejo iz škatle brez potrebe po dodatnih vtičnikih in podpirajo različne parametre za prilagajanje izhoda.

Seznam vgrajenih shortcodov

• [caption] - doda napis pod sliko s slogovnim okvirom
• [gallery] - prikazuje galerijo slik iz medijske knjižnice z možnostmi za stolpce in velikost
• [audio] - vgradi avdio predvajalnik s kontrolami za predvajanje
• [video] - vgradi video predvajalnik s podporo za formate MP4, WebM in Ogg
• [playlist] - ustvari avdio ali video playlist iz več datotek
• [embed] - vgradi vsebino z zunanjih storitev prek protokola oEmbed

Gallery shortcode podrobno

Gallery shortcode je najpogosteje uporabljen vgrajen shortcode, saj omogoča hitro ustvarjanje galerij slik. Podpira parametre, kot so ids za specifične slike, columns za število stolpcev, size za velikost slik, orderby za razvrščanje in link za določanje, kam vodi klik na sliko. Na primer [gallery ids="1,2,3" columns="3" size="medium"] prikaže tri specifične slike v treh stolpcih srednje velikosti.

Ustvarjanje prilagojenih shortcodov

Ustvarjanje lastnih shortcodov v WordPress razvojnem okolju je presenetljivo preprosto. Uporablja se funkcija add_shortcode(), ki sprejme dva argumenta: ime shortcoda in callback funkcijo, ki vrne HTML, ki ga je treba prikazati. To funkcijo dodate v functions.php vaše teme ali v prilagojen vtičnik.

Osnovna struktura

Callback funkcija prejme do tri parametre: $atts (polje atributov, ki jih uporabnik posreduje), $content (vsebina med odpiralno in zapiralno oznako) in $tag (ime samega shortcoda). Funkcija mora vrniti niz s HTML in nikoli ne sme uporabljati echo, saj bi to pokvarilo vrstni red prikaza na strani. To je pogosta napaka pri začetnikih, ki vodi do tega, da se vsebina shortcoda pojavi na vrhu strani namesto na mestu, kjer je shortcode vstavljen.

Primer preprostega shortcoda

Predstavljajte si, da želite shortcode, ki prikazuje izpostavljen citat z imenom avtorja. V functions.php bi definirali funkcijo, ki prejema atribute (author, color) in vsebino (besedilo citata) ter vrača slogovni HTML blok. Uporabnik bi v urejevalniku napisal [citat author="Ivan Cankar"]Na klancu...[/citat] in WordPress bi to zamenjal s formatiranim citatom z imenom avtorja pod besedilom.

Parametri shortcodov

Parametri (atributi) shortcodes naredijo prilagodljive, saj uporabnikom omogočajo prilagajanje izhoda brez spreminjanja kode. Funkcijo shortcode_atts() uporabite za določanje privzetih vrednosti in združevanje z vrednostmi, ki jih je uporabnik posredoval. To zagotavlja, da shortcode deluje tudi, ko uporabnik ne navede vseh parametrov.

Vrste parametrov

• Besedilni - naslov, barva, razred, ID (npr. title="Naslov")
• Numerični - število stolpcev, omejitev rezultatov, širina (npr. columns="3")
• Boolean - da/ne možnosti (npr. show_date="true")
• Seznam - ID-ji, ločeni z vejicami (npr. ids="1,5,12,7")
• Enum - vnaprej določene možnosti (npr. size="small|medium|large")

Vedno validirajte in sanirajte parametre, ki jih uporabnik posreduje, saj so shortcodes lahko vektor za XSS napade, če se uporabniški vnos neposredno vgradi v HTML. Za čiščenje izhoda uporabljajte funkcije esc_attr(), esc_html() in wp_kses(). Numerične parametre pretvorite v int z intval(), boolean parametre pa primerjajte z nizom true ali false.

Ugnezdeni shortcodes

WordPress podpira ugnezdovanje shortcodov, kar pomeni, da lahko en shortcode postavite znotraj drugega. To je uporabno za ustvarjanje kompleksnih postavitev, kjer imate na primer shortcode za vrstico in znotraj njega shortcode za stolpce. Ugnezdena vsebina se obdela s klicanjem funkcije do_shortcode() na parametru $content znotraj vaše callback funkcije.

Pomembna omejitev je, da istega shortcoda ne morete ugnezditi znotraj sebe, saj WordPress parser ne more pravilno razlikovati odpiralnih in zapiralnih oznak. Če potrebujete takšno funkcionalnost, ustvarite različice shortcoda z različnimi imeni, kot je na primer [row] za vrstico in [column] za stolpec znotraj vrstice. Ta omejitev je po zasnovi in malo verjetno je, da bo spremenjena v prihodnjih različicah.

Primer ugnezdovanja

Klasičen primer je layout shortcode, kjer [row] ustvari flex ali grid vsebnik, [col width="6"] pa ustvari stolpec določene širine. Uporabnik lahko napiše [row][col width="4"]Levi stolpec[/col][col width="8"]Desni stolpec[/col][/row] in dobi dvostolpčno postavitev. Row shortcode mora poklicati do_shortcode($content), da WordPress pred vrnitvijo končnega HTML obdela ugnezdene col shortcodes.

Shortcodes v WordPress Block editorju

Z uvedbo Gutenberg Block editorja so shortcodes dobili namenski blok z imenom Shortcode, ki sprejme katerikoli shortcode. Vendar pa trend v sodobnem WordPress razvoju gre k zamenjavi shortcodov s prilagojenimi bloki, ki v urejevalniku zagotavljajo vizualni predogled namesto surovega besedila v oglatih oklepajih. Za nove projekte razmislite o ustvarjanju blokov namesto shortcodov, vendar shortcodes za obstoječe spletne strani ostajajo popolnoma podprti in funkcionalni.

Kdaj uporabiti shortcodes in kdaj bloke

• Shortcodes so boljši za preproste vrivke (citat, gumb, ikona)
• Bloki so boljši za kompleksne layout elemente z vizualnim prikazom
• Shortcodes delujejo v Classic in Block editorju
• Bloki delujejo samo v Block editorju (Gutenberg)
• Shortcodes so hitrejši za razvoj, bloki zahtevajo znanje JavaScripta
• Za združljivost vtičnikov so shortcodes bolj univerzalni

Praktični nasveti in najboljše prakse

Shortcodes poimenujte s predpono vaše teme ali vtičnika, da se izognete konfliktom z drugimi vtičniki. Na primer namesto [button] uporabite [beo_button], saj je manj verjetno, da bo drug vtičnik uporabljal isto ime. Dodajte dokumentacijo za vsak shortcode, ki ga ustvarite, vključno s seznamom parametrov, privzetimi vrednostmi in primeri uporabe, saj brez dokumentacije ne boste pomnili vseh možnosti niti vi sami po nekaj mesecih.

Za bolj kompleksne shortcodes, ki generirajo pomemben HTML, uporabljajte output buffering ali template datoteke namesto konkatenacije nizov. To naredi kodo bolj berljivo in lažjo za vzdrževanje. Predpomnite rezultate shortcodov, ki zahtevajo poizvedbe v podatkovno bazo. Uporabljajte orodje za preverjanje zmogljivosti z uporabo Transients API, saj se shortcodes izvajajo ob vsakem nalaganju strani in počasni shortcodes lahko bistveno upočasnijo spletno stran. Shortcodes vedno preizkusite v različnih kontekstih, vključno z widgeti, izvlečki in RSS feedi, saj se vedenje lahko razlikuje.