Guide til shortcodes i WordPress
Her kommer en guide til hvordan du bruger din functions.php til at lave shortcodes i WordPress. Sidder du selv og leger med udvikling af themes enten til dig selv eller for kunder, så har du sikkert hørt om shortcodes før?
Shortcodes kort fortalt.
Shortcodes er en foruddefineret “kode”, som indsættes på en side/indlæg i WordPress og erstattes af noget andet ved visning.
Et eksempel på en shortcode kunne være:
[MyBanner]
Som ved visning erstattes af en banner kode, eller et link.
Hvorfor bruge shortcodes?
Shortcodes er nemme at huske, og nemt for brugeren at indsætte. Man skal som webudvikler huske at slutbrugeren sjældent er lige så teknisk som dig selv, og det derfor skal være nemt og brugervenligt. Har man aftalt med kunden at de skal kunne sætte en knap ind et vilkårligt sted på en side, nytter det ikke at sige til dem at de bare skal skrive HTML koden for at indsætte den knap. Her kan man bruge shortcodes.
Eksempel på en shortcode der laver et link:
function showlink() { return '<a href="http://www.google.dk">Link til Google</a>'; } add_shortcode('googlelink', 'showlink');
Følgende kode erstatter [ googlelink ] (uden mellemrum) med et link til Google.
Nu er det at lave et link ikke så svært, så vi prøver med et andet eksempel.
function showknap() { return '<div id="knap"><a href="https://www.larsbachmann.dk">Besøg Larsbachmann.dk</a></div>'; } add_shortcode('knap', 'showknap');
Her er det igen et link, men med lidt CSS tilknyttet. I mit stylesheet har jeg så tilføjet følgende:
#knap { background: url(https://www.larsbachmann.dk/wp-content/knap-bg.png) repeat-x; padding: 12px; margin: 0 12px 0 0; float:left; clear:both; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #knap a { color:#FFF; text-decoration: none; display:block; }
I dette eksempel har jeg brugt et link til mig selv, men det kunne være et link til en PDF, tilmelding til nyhedsbrev, kontakt side osv.
Her under kan du se “knappen”:
[knap]
Det er kun fantasien der sætter grænser for hvordan du kan udnytte din functions.php og shortcodes i WordPress.
Shortcodes og Adsense
Kører du for eksempel et site med Adsense, kan du paste din adsense kode ind i en function, og så lave en shortcode der hedder [adsense], så kan du hurtig og nemt indsætte din Adsense der hvor du syntes den skal være.
Troels spurgte i en kommentar om jeg kunne give et eksempel på shortcodes og Adsense, og selvfølgelig kan jeg det 🙂
function showadsense() { return '<script type="text/javascript"><!-- google_ad_client = "ca-pub-4137896367590235"; google_ad_slot = "2537949387"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>'; } add_shortcode('adsense', 'showadsense');
Bare indsæt følgende kode til din functions.php (Husk altid at tage en backup af functions.php inden du begynder at ændre i den), og så udskriver du den med [adsense].
Husk også at ændre “ca-pub-4137896367590235” til din egen Adsense id
Gode tips 🙂
Kunne man lokke dig til at smide et eksempel på en stump AdSense kode til functions.php filen?
Mvh Troels.
Det var fuldstændig nyt for mig, men det ser nyttigt ud – mange tak!
Fantastisk tip. Mange tak! Jeg skal straks finde et eller andet at bruge shortcodes til, bare fordi det er så elegant.
@Troels: har opdateret indlægget med et eksempel på Adsense 🙂
Tak – Lars!
Jeg har lige forsøgt mig og det virker i første forsøg.
Der er ikke noget bedre end konkrete eksempler 🙂
Fy for pokker, det kunne have sparret mig masser af tid. Tak.
(Der er lige en lille typo i starten af indlægget, hvor du har skrevet funtions.php i stedet for functions.php)
Hej Nicolai. Tak for hintet, det er hermed rettet.
Og ja, Shortcodes er en time saver 🙂
Jeg har tidligere løst den slags via plugins, som dog har det med at sløve WordPress ned, når de bli’r for mange og komplekse. Den her løsning burde være langt bedre ud fra et performancesynspunkt, fordi der kun skal et php-kald til at opnå den ønskede funktionalitet (fra post/pagen til functions.php).
Så du skal have tak for at have banket lidt ny lærdom ind i knolden på mig.
Det er jo lige til at gå til!
Alt godt,
Kasper
Kan de forresten bruges i Widgets også? Evt. i samspil med booleansk logik. Altså noget a la:
Hvis kategori = x, kørt shortcode y?
Hej Kasper. Rigtig mange plugins kan faktisk erstattes ved brugen af functions.php i WordPress.
Som det ser ud, skal shortcodes afvikles inden for “loop’et”, men jeg har en test version af WordPress 3.3 (beta2), og her lader det til at kan bruges i text-widgets også 🙂
Med hensyn til dit sidste spørgsmål, så kan det sikkert lade sig gøre, med noget If, Else i PHP, men det vil jeg ikke lige kaste mig ud i.
Hej Kasper
Jeg har kigget lidt på det og dette lille trick kan klare det med at at bruge shortcodes i dine text-widgets.
tilføj denne kode i din functions.php
add_filter(‘widget_text’, ‘do_shortcode’);
Tak, og fedt med din nye styling af larsbachmann.dk 🙂
God weekend.
Nu har jeg selv arbejdet med wordpress (på mine egne sider) det seneste halve års tid og jeg anede ikke at kodning af shortcodes var så nemt (men ok, jeg er heller ingen haj!). MANGE tak for det!!
Hej Lars.
Hvad skal man gøre, for f.eks at kunne bruge [adsense id=2], hvis man nu ville have mulighed for at vælge mellem forskellige AdSense blokke?
De bedste hilsner
Frederik
Du lave bare en shortcode funktion mere.
Kopier koden og kald den
function showadsense2()
og til sidst kalder du den med
add_shortcode(‘adsense2’, ‘showadsense2’);
Giver det mening?
Det giver mening, men så får du jo en masse unødvendige funktioner.
Det jeg tænker er, at det vil være lettere hvis du bare kan skrive [adsense id=2] og så i funktionen laver du en switch på id’et.
De bedste hilsner
Frederik
Hej,
Jeg ved ikke helt om det er relevant her, men ved i hvordan man løser følgende problem. Hvis jeg indsætter et link til et indlæg fra min blog med en video på facebook kommer følgende tekst til at stå på FB, hvilket ikke er særligt pænt.
Disse HTML koder og attributter er tilladte:
Ved i hvordan det løses?
mvh
Mads
Hej Mads
Det kan der være flere årsager til, men det er højst sandsynligt (hvis jeg har forstået spørgsmålet korrekt), fordi Facebook automatisk tager et uddrag fra din blog og viser sammen med dit link.
Problemet er så at den tager en tekst der ikke relevant. Du kan sikkert løse det ved at installere et SEO plugin, som tilføjer en “description” til dine sider.
Jeg kan anbefale http://yoast.com/wordpress/seo/ som jeg har lavet en guide til her: https://www.larsbachmann.dk/wordpress-seo-plugin.html
plugin’et kan du downloade her http://wordpress.org/extend/plugins/wordpress-seo/ ellers søg på WordPress SEO i dit kontrolpanel i WordPress under -> plugins -> Tilføj nyt.
Hej Lars,
Jamen – er det virkelig så nemt! – Tja! Når man ikke vidste det… Og det gjorde jeg ej! – Før nu!
Thihi jeg har masser at bruge dette til.. takker!
Jeg har et “proskin” med masser af deres egne shortcodes og jeg kunne ikke dreje hvordan det fungerede!
Disse shortcodes konflikter fra tid til anden med mit Shortcode plugin… Så nu kan jeg jo “rette” navne!.
Takker… Mega brugbart
Peter