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="http://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(http://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”:

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

Flere artikler om Shortcodes:

  1. Iframe problemer i WordPress
  2. Screenshots af hjemmeside

Lars Bachmann

Iværksætter og Online nørd. Arbejder med WordPress og online markedsføring i min virksomhed Conseo.

Prøv lige at se disse indlæg også!

21 kommentarer til Guide til shortcodes i WordPress

  1. Troels Kjems siger:

    Gode tips 🙂

    Kunne man lokke dig til at smide et eksempel på en stump AdSense kode til functions.php filen?

    Mvh Troels.

  2. Ricco siger:

    Det var fuldstændig nyt for mig, men det ser nyttigt ud – mange tak!

  3. Ruben siger:

    Fantastisk tip. Mange tak! Jeg skal straks finde et eller andet at bruge shortcodes til, bare fordi det er så elegant.

  4. Lars Bachmann siger:

    @Troels: har opdateret indlægget med et eksempel på Adsense 🙂

  5. Troels Kjems siger:

    Tak – Lars!

    Jeg har lige forsøgt mig og det virker i første forsøg.

    Der er ikke noget bedre end konkrete eksempler 🙂

  6. 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)

  7. Lars Bachmann siger:

    Hej Nicolai. Tak for hintet, det er hermed rettet.

    Og ja, Shortcodes er en time saver 🙂

  8. 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

  9. Kan de forresten bruges i Widgets også? Evt. i samspil med booleansk logik. Altså noget a la:

    Hvis kategori = x, kørt shortcode y?

  10. Lars Bachmann siger:

    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.

  11. Lars Bachmann siger:

    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’);

  12. Bastian siger:

    Tak, og fedt med din nye styling af larsbachmann.dk 🙂

    God weekend.

  13. Peter siger:

    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!!

  14. 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

  15. Lars Bachmann siger:

    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?

  16. 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

  17. Mads siger:

    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

  18. Lars Bachmann siger:

    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: http://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.

  19. 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

  1. 14. januar 2013

    […] Vil du læse mere om Shortcodes i WordPress? […]

  2. 26. februar 2013

    […] Når din tabel er færdig, opretter du en side eller redigere en eksisterende, og i værktøjslinjen i editoren er der nu et ekstra ikon, hvor du med få klik kan indsætte din tabel som en shortcode. […]

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *