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

Flere artikler om Shortcodes:

1. Iframe problemer i WordPress
2. Screenshots af hjemmeside