Lav din egen shortcode

Mange WordPress themes og plugins nu om dage, indeholder brugbare shortcodes. Det kan være til noget så simpelt som en knap – eller man kan gå big, og lave en hel GUI (Graphical User Interface) som f.eks. Visual Composer har gjort, så man nemt kan opbygge side sider, uden at skulle kode.

Det er da også mega smart, hvis man kan lave en shortcode, som kan bruges flere forskellige steder på websitet, ved bare at insætte noget så simpelt, som f.eks.: “[knap]”

Lær at lave din egen shortcode

For at lave din egen shortcode, skal du kunne kode en smule. Bare rolig, det kræver ikke at du kan PHP, HTML eller CSS udenad, men bare lidt basis-viden kan hjælpe dig godt på vej.

Jeg vil i denne tutorial, lære dig at lave din helt egen knap, som du kan genbruge flere steder på websitet. Vi kommer til at bruge lidt PHP, HTML og CSS – og jeg skal selvfølgelig nok give dig al den kode du skal bruge til dette. Men det kunne være fedt, hvis du tweakede koden lidt, så knappen blev din helt egen.

Den fil, som vi skal smide koden ind i, hedder functions.php – den findes inde i din temamappe – altså “wp-content/themes/DITTHEME/functions.php”. Hvis du vil, kan du også sagtens rette denne fil direkte inde fra dit WordPress kontrolpanel, under “Udseende –> Editor” herefter finder du så “functions.php” ude i højre side.

Når du har åbnet filen, så skal vi til at lave vores egen shortcode.

Den simple version (PHP)

Vi starter med at oprette en funktion, som skal generere det indhold, som vores shortcode skal vise på siden. Det gør du sådan her:

function wptricks_lavShortcode() 
{

echo 'Hej!';

}
add_shortcode('knap', 'wptricks_lavShortcode');

Faktisk, så har vi lige lavet en funktionel shortcode, som skriver “Hej!” på vores side, hvis vi indsætter shortcoden “[knap]”.

Linje 4: Denne linje bruger PHP “echo” til at skrive “Hej!”, når vi bruger vores shortcode. Du kan læse mere om PHP echo her.

Linje 7: Denne linje bruger WordPress “add_shortcode” action-hook til at lave vores shortcode. Ordet “knap” er det ord, som vi skal bruge når vi indsætter shortcoden på vores site. Du kan navngive denne til hvad du end vil, bare husk, at så skal dette også passe med hvad der står imellem [ og ] – f.eks. “add_shortcode(‘tekst’, ‘wptricks_lavShortcode’);” så skal du bruge: “[tekst]”. Den sidste del, altså “wptricks_lavShortcode” angiver hvilken funktion vi skal hente indholdet fra (skal passe med navnet i linje 1).

Koden til knappen (HTML og CSS)

For at lave en flot knap, skal vi bruge lidt HTML og CSS. Jeg har lavet et eksempel på, hvordan denne knap kunne se ud – se koden herunder:

HTML:

<a href="#" class="knap">
  Klik på mig
</a>

CSS:

.knap {
  display: inline-block;
  padding: 10px 15px;
  background: #ff6600;
  width: auto;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
}

Resultat:

Leg lidt med CSS’en, så knappen får dit eget præg, og som passer til dit website. Hvis du vil lære lidt mere om CSS, kan du gøre det her.

Den endelige kode (PHP, HTML og CSS)

Nu skal vi så bare have kombineret de 3 kodestumper, så de kan bruges i en shortcode. For at opnå det bedste resultat – og den mindst forvirrende kode, bruger vi “ob_start()” og “ob_get_clean()“. Hvad disse 2 funktioner gør, og hvordan de virker, kan du læse mere om, ved at klikke på dem. Jeg vil ikke gå i dybden med dem, da denne guide ikke omhandler dette.

Den endelige kode:

function wptricks_lavShortcode() 
{
ob_start(); ?>

<style>
.knap {
  display: inline-block;
  padding: 10px 15px;
  background: #ff6600;
  width: auto;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
}
</style>

<a href="#" class="knap">
  Klik på mig
</a>

<?php 

return ob_get_clean();

}
add_shortcode('knap', 'wptricks_lavShortcode');

Linje 3: Jeg bruger et afsluttende “?>” PHP-tag efter “ob_start();” – idet jeg skal skrive HTML herefter. Og for at gøre det endnu mere overskueligt, vælger jeg derfor at afslutte min PHP kode.

Linje 5 – 15: Her angiver jeg, at jeg bruger CSS, ved at wrappe det i “<style>” tags. Derefter kommer jeg den CSS-kode, som vi har skrevet, ind imellem disse tags.

Linje 17 – 19: Dette er vores HTML. Husk at ændre “href=”#” til en ægte URL – f.eks. kunne du linke til din kontaktside, eller måske endda email. I så fald, skulle du skrive href=”mailto:MIN@EMAIL.DK”, herefter vil brugerens foretrukne mailklient poppe op når de klikker på knappen, og “til” feltet være udfyldt automatisk, men den ønskede mail. Teksten “Klik på¨mig” ændrer du selvfølgelig også til det du nu gerne vil have til at stå i knappen.

Linje 21: Her åbner vi så PHP på ny, idet at vi er færdige med at skrive HTML og CSS – og herefter er det kun PHP vi skal bruge.

Linje 23: Her returner den vores HTML og CSS, dannet som en knap, som du kunne se ovenfor.

Det endelige resultat

Nu har du lige lavet din helt egen shortcode!
Der findes et hav af muligheder, når det kommer til shortcodes, og den kode, som du ser ovenfor, er i sin simpleste form. Hvis du gerne vil vide mere om, hvordan du kan lave lidt mere avancerede shortcodes, er du mere end velkommen ved at klikke på min knap herunder! Som du kan se, så er min en smule tilpasset! Du kan jo gøre det samme

Kom med forslag!