Vsi, ki delamo z WordPressom se srečujemo s pojmom »shortcode«. Oglejmo si kaj točno shortcode je in kaj nam omogoča.
Kot pove že poimenovanje: shortcode je okrajšana programska koda, s katero lahko z minimalno programske kode poskrbimo za prikaz specifičnega elementa. Pri delu s spletnimi vsebinami gre večinoma za vnos teksta ali slikovnega materiala, za kar je v WordPressu že odlično poskrbljeno. Včasih pa naletimo na zahtevo, da določene vsebine prikažemo vizualno drugače, mogoče z vključenim gibanjem ali pa gre za prikaz podatkov, ki jih pridobimo iz kakšnega drugega vira.
Za uporabo shortcode ni potrebno nikakršno programersko znanje, saj nam že urejevalnik vsebin ponuja te na izbiro.
WordPress ima kar precej shortcodov že vključenih, kot so recimo audio, video, galerija, poglavje, in še precej drugih. Dodatne shortcode je možno dodati preko vtičnikov, ki uporabljajo shortcode API, lahko pa jih popolnoma po meri za vas pripravi razvijalec spletne strani.
Kot primer vzemimo kodo, ki prikaže video posnetek:
[video src="video-source.mp4"]
Če bi isti video želeli prikazati direktno s HTML, bi izgledalo nekako tako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div style="width: 640px;" class="wp-video"> <!--[if lt IE 9]><script>document.createElement('video');</script><![endif]--> <span class="mejs-offscreen">Video Player</span><div style="width: 640px; height: 360px;" id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" tabindex="0" role="application" aria-label="Video Player"> <div class="mejs-inner"> <div class="mejs-mediaelement"> <video src="http://video-source.mp4?_=1" style="width: 100%; height: 100%;" class="wp-video-shortcode" id="video-5275-1" preload="metadata" height="360" width="640"> <source type="video/mp4" src="http://video-source.mp4?_=1"><a href="http://video-source.mp4">http://video-source.mp4</a></video> </div> <div class="mejs-layers"> <div style="display: none; width: 100%; height: 100%;" class="mejs-poster mejs-layer"></div> <div style="display: none; width: 100%; height: 100%;" class="mejs-overlay mejs-layer"> <div class="mejs-overlay-loading"><span></span></div> </div> <div style="width: 100%; height: 100%;" class="mejs-overlay mejs-layer"> <div class="mejs-overlay-error">Error loading this resource</div> </div> <div style="width: 100%; height: 100%; display: none;" class="mejs-overlay mejs-layer mejs-overlay-play"> <div class="mejs-overlay-button"></div> </div> </div> <div style="display: block; visibility: hidden;" class="mejs-controls"> <div class="mejs-button mejs-playpause-button mejs-play"> <button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button> </div> <div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off"><span class="mejs-currenttime">00:00</span></div> <div style="width: 496px;" class="mejs-time-rail"><span style="width: 486px;" class="mejs-time-total mejs-time-slider"><span style="display: none;" class="mejs-time-buffering"></span><span class="mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-handle"></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span></div> <div class="mejs-time mejs-duration-container"><span class="mejs-duration">00:00</span></div> <div class="mejs-button mejs-volume-button mejs-mute"> <button type="button" aria-controls="mep_0" title="Brez zvoka" aria-label="Brez zvoka"></button> <a tabindex="0" role="slider" aria-valuetext="80%" aria-valuenow="80" aria-valuemax="100" aria-valuemin="0" aria-label="volumeSlider" style="display: none;" href="javascript:void(0);" class="mejs-volume-slider"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-volume-total"></div> <div style="height: 80px; top: 28px;" class="mejs-volume-current"></div> <div style="top: 25px;" class="mejs-volume-handle"></div> </a> </div> <div class="mejs-button mejs-fullscreen-button"> <button type="button" aria-controls="mep_0" title="Celozaslonski način" aria-label="Celozaslonski način"></button> </div> </div> <div class="mejs-clear"></div> </div> </div> </div> |
Prihranili smo kar nekaj vrstic. Drži?
Shortcode, dodan z vtičnikom
Če privzete kratke kode niso dovolj, lahko WordPressovo funkcionalnost razširimo z vtičniki. Eden od vtičnikov med drugim omogoča prikaz vsebin v zavihkih. Primer:
Slajder, ki vsebuje veliko različnih animacij, tekstov, slik in celo dinamičnih podatkov, lahko prikličemo s preprosto vrstico:
[rev_slider primer]
Vse nastavitve slajderja pa urejamo na za to namenjenem mestu.
Na podoben način lahko tudi strukturiramo vsebino po širini na polovice, tretjine, četrtine in druge deleže. Tudi za zgornja primera (delitev kode in primera 1/3 in 2/3) je uporabljen shortcode.
Shortcode, pripravljen po meri
Na željo stranke se lahko pripravi poljubne shortcode, za različne elemente, ki jih želimo na strani pogosto uporabljati, pri tem pa ohraniti enoten dizajn in obnašanje. Primer takšnega elementa je gumb:
[button url="/izdelava-spletne-strani/"]Spletne strani[/button]
Rezultat:
Spletne strani
Shortcode mi ni preveč všeč. Kaj pa zdaj?
Kratke kode so zelo priročne in nam resnično lahko prihranijo veliko dela. Če pa ste zahtevnejši uporabnik in vam način dela s shortcode-i ni všeč, se vam zato še ni potrebno odpovedati modernim in privlačnim elementom na svoji spletni strani. Za platformo WordPress je namreč mogoče pripraviti tudi popolnoma vizualni urejevalnik. Povprašajte nas.
