Go to Top

Izdelava spletnih strani: Kratke kode (shortcode) v WordPressu

Kratke kode v WordPressu nam lahko kot administratorjem oz. urednikom prihranijo kar nekaj časa, saj nam omogočajo, da s kratkim ukazom vstavimo večji kos (oblikovane) vsebine. Dodaten plus je tudi ta, da lahko funkcijo za izpis kratke kode v prihodnosti popravimo, s tem pa se bo popravil tudi izpis na vseh straneh ali objavah, kjer smo kodo uporabili. Zaradi tega je uporaba kratkih kod nadvse primerna za izpis vsebin, ki jih hočemo prikazati pri vsaki objavi (kontaktni podatki, gumbi za deljenje na družbenih omrežjih, klic k akciji ipd.).

WordPress že v privzeti namestitvi vsebuje nekaj predpripravljenih kratkih kod, njihova prava moč pa se pokaže, ko začnemo razvijati lastne.

Primer kratke kode iz WordPress Codexa.

Izdelava nove kratke kode

Novo kratko kodo napišemo v datoteko functions.php naše izbrane teme (nahaja se v mapi wp-content/themes/<ime predloge>). Če želimo kratke kode ločiti od ostale funkcionalnosti teme, lahko izdelamo tudi novo PHP datoteko npr. shortcodes.php in nato le to vključimo v functions.php z ukazom:

require_once('shortcodes.php');

Kratko kodo lahko uporabljamo na dva načina:

brez parametrov (metodo bomo uporabljali takrat, ko je vsebina, ki jo izpisujemo vedno enaka – statična),

Primer: [mojakoda]

s parametri (izpisujemo podobno vsebino, ki pa je glede na uporabljeni parameter drugačna. V spodnjem primeru, so izpisani različni obrazci glede na vrednost parametra id.)

Primer: [spletniobrazec id=1]

Kratka koda brez parametrov

Najprej pripravimo funkcijo, ki se bo izvedla, ko bomo kratko kodo uporabili. Za primer bomo pripravili kratko kodo, ki nam bo na koncu vsake objave izpisala kontakne podatke avtorja.

function kontaktni_podatki() {
  return '<address>mag. Janez Novak<br>vodja PR službe<br>Data d.o.o.<br>Dunajska 136<br>1000 Ljubljana</address>';
}

Paziti moramo, da uporabimo ukaz “return” in ne katerega od ukazov za izpis v PHP-ju kot sta “echo” ali “print_r”, ker v tem primeru vsebina ne bo izpisana na mestu, kjer smo kratko kodo uporabili ampak drugje (po navadi na vrhu vsebine strani, ni pa nujno) ali pa sploh ne.

Da bomo kratko kodo lahko uporabili v WordPressu, jo moramo še registrirati.

add_shortcode('kontakt', 'kontaktni_podatki');

S tem ukazom imamo zdaj na voljo kratko kodo – [kontakt], ki jo lahko poljubno uporabimo na straneh ali v objavah.

Kratka koda s parametri

Razširimo zgornjo kodo tako, da lahko spreminjamo kontaktno osebo in njeno funkcijo v podjetju.

function napredni_kontaktni_podatki($atts) {
  extract(shortcode_atts(array(
    'ime' => 'mag. Janez Novak',
    'funkcija' => 'vodja PR službe'
  ), $atts));
  return '<address>' . $ime . '<br>' . $funkcija . '<br>Data d.o.o.<br>Dunajska cesta 136<br>1000 Ljubljana</address>';
}

Za izluščenje parametrov smo uporabili PHP funkcijo extract v povezavi z v WordPress vgrajeno funkcijo shortcode_atts. Imena parametrov si lahko poljubno izberemo, ravno tako število, brez težav npr. dodamo še parameter naslov.

Kodo še registrirajmo z ukazom:

add_shortcode('naprednikontakt', 'napredni_kontaktni_podatki');

Zdaj lahko kratko kodo uporabimo v prispevkih:

[naprednikontakt ime="dr. Testko testek" funkcija="vodja svetovalcev"]

V primeru, da uporabnik kratko kodo uporabi brez parametrov [naprednikontakt], bodo uporabljene privzete vrednosti, ki smo jih definirali. V našem primeru je to “mag. Janez Novak” za ime in “vodja PR službe2 za njegovo funkcijo. Privzeta vrednost je lahko tudi prazna npr.

'ime' => '',
'funkcija' => ''

Kratka koda z zaključkom

V primeru, da želimo nek del besedila oblikovati na bolj kompleksen način (npr. pripravljamo nek gumb za klic k akciji), lahko pripravimo tudi “kratko kodo z zaključkom” (enclosing shortcode).

function cta_gumb($atts, $content = null) {
  extract(shortcode_atts(array(
    'link' => '#'
  ), $atts));
  return '<div class="cta"><span class="cta__button"><a href="' . $link . '">' . $content . '</a></span></div>';
}

add_shortcode('ctabox', 'cta_gumb');

Kratko kodo pa potem uporabimo takole:

[ctabox link="https://data.si"]Nujno preberi članek![/ctabox]

Za konec še opozorilo, da na ta način pripravljene kodo ne bodo delovale, če jih boste uporabili v katerem od gradnikov (widget). Če potrebujete tudi to funkcionalnost, morate v datoteko functions.php dodati ukaz (morda ga datoteka že vsebuje od prej):

add_filter('widget_text', 'do_shortcode');

V predstavljenih primerih smo uporabili izjemno preproste kratke kode oz. funkcije, seveda pa bi bile lahko, glede na potrebe, tudi dosti bolj kompleksne npr. izpis zadnjih objav ali komentarja, prikaz naključnega oglasa itd. Možnosti je veliko, vsekakor pa nam bodo kratke kodo prihranile kar nekaj časa pri pripravljanju novih strani ali objav.

Vam je bil prispevek všeč in bi radi prebrali več vodičev po WordPressu? Pripravili smo vam:

Pripravil: Borut Ratej

Izdelava spletnih strani

[hr]Spletno stran z vključeno osnovno optimizacijo za iskalnike na strani (SEO) in prilagojeno mobilnim napravam pri nas dobite že od 160 evrov dalje. Paket vključuje še gostovanje in registracijo domene za eno leto, namestitev WordPress predloge … V primeru, da niste naša stranka, vam bomo prav tako pripravili ugodno ponudbo za izdelavo spletne strani.

Preverite našo akcijsko ponudbo!

Če vam ponudba ne ustreza in bi si spletno stran želeli izdelati sami, vas vabimo na našo delavnico Spletna stran TO GO. Veliko koristnih informacij pa lahko dobite tudi na našem izobraževanju Kako pristopiti k izdelavi dobre spletne strani.

Preverite vsebino delavnice!


Dodajte svoj komentar

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja