Tutorial – Skriv egna shortcodes till WordPress

I WordPress 2.5 introducerades en funktion som kallas shortcodes. Om du någon gång har velat lägga in AdSense annonser mitt i en bloggpost eller till exempel visas din page rank kan du helt enkelt skriva [adsense] eller [pagerank] direkt i bloggposten där du vill visa det aktuella innehållet.

Vad är shortcodes?

Det finns tre grundtyper av shortcodes. Den enklaste varianten är att man endast skriver följande i sin bloggpost:

[adsense]

Ovan version ger inget utrymme för val av till exempel storlek på annonsen. Vill man kunna välja storlek kan man lägga till en parameter:

[adsense format=1]

Ovan version ger dig en AdSense annons med till exempel bredden 468 pixlar. Den sista typen är när man vill lägga till eget innehåll. Så här kan det se ut när man skapar en AdSense annons med en rubrik:

[adsense format=1]Annons:[/adsense]

Dessa koder skriver man helt enkelt in i sin editor där man vill att de ska bli synliga. När sedan en besökare läser din bloggpost kommer denna shortcode att översättas och den bakomliggande funktionen körs och visar innehållet i bloggposten.

Hur skapar man shortcodes?

Att skapa en shortcode är väldigt enkelt. Kan du skriva lite PHP har du stora möjligheter att skapa användbara shortcodes som kommer att spara mycket tid åt dig.

Först skapar vi den enklaste versionen av shortcode:

[adsense]

I detta fall finns det bara en typ av annons man kan välja på.

Börja med att öppna filen functions.php som ligger i ditt tema. Finns den inte kan du skapa den. Efter det skriver du in följande kod:

function add_adsense() {
return '<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXX";
google_ad_slot = 'XXXXXXXXXX';
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
}

Nu när funktionen är klar måste vi berätta för WordPress att det är en shortcode och det gör vi med följande rad:

add_shortcode('adsense', 'add_adsense');

Den första parametern är vad du skriver i din bloggpost för att använda din shortcode och den andra är funktionens namn i functions.php

Om man vill använda sig av flera olika storlekar på annonser kan man lägga till en parameter som anger format. Då får man istället en shortcode som ser ut så här:

[adsense format =1]

I functions.php skriver man istället följande:

function add_adsense( $atts ) {
extract(shortcode_atts(array(
'format' => '1',
), $atts));
switch ($format) {
case 1 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>';
break;
case 2 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>';
break;
}
$rest = '<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
return $ad.$rest;

}
add_shortcode('adsense', 'add_adsense');

Vill man lägga till flera annonstyper är det bara att lägga till fler case i koden ovan.
Om man vill bygga på sin shortcode ytterligare kan man välja att lägga till extra innehåll i form av en text som talar om att det är en annons på följande sätt.

 [adsense format=1]Annons:[/adsense]

I vår functions.php skriver vi då följande kod:

function add_adsense( $atts, $content = null ) {
extract(shortcode_atts(array(
'format' => '1',
), $atts));
switch ($format) {
case 1 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>';
break;
case 2 :
$ad = ' <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>';
break;
}
$rest = '<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';

return = '<strong>'.$content. '</strong><br/>'.$adsense.$rest;

}
add_shortcode('adsense', 'add_adsense');

Det var tre exempel på olika typer av shortcodes man kan använda för att lägga till annonser från Google AdSense mitt i en bloggpost. Glöm inte bort att byta ut AdSense koden till din egen.

Läs mer om WordPress shortcodes API.

Det här inlägget postades i Allmänt. Bokmärk permalänken.

5 kommentarer till Tutorial – Skriv egna shortcodes till WordPress

  1. Marcus Westberg skriver:

    Hej Fredrik!

    Byts functions.php filen ut vid ny WP-uppdatering?

    Bra blogg du har här. Me like.

    • Fredrik Malmgren skriver:

      Tack Marcus,

      Functions.php ligger bland resten av filerna för ditt tema i WordPress.
      När du uppdaterar WordPress ska inte dina shortcodes försvinna. Däremot om du byter tema eller uppdaterar ditt tema så är det risk att de försvinner om du inte manuellt flyttar över dem till ditt nya tema.

      Jag tänkte följa upp denna tutorial med en till där jag beskriver hur man gör om detta till en plugin för att slippa detta problem.

  2. Pingback: Summering av april 2010 | Fredrik Malmgren

  3. Cathrine skriver:

    kan jag ladda ner wordpress gratis?

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *