• Gå direkte til primær navigation
  • Skip til indhold
  • Gå direkte til primær sidebar

WPTRICKS{DK}

En blog om WordPress, Webudvikling og gode idéer!

  • Forsiden
  • WordPress Guide
  • WordPress Hosting
  • Gratis WordPress Sparring
  • Er mit domæne ledigt?
  • Få gratis hjælp til WordPress
Du er her: Forside / WordPress Guide / Lav din egen shortcode

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!

Primær Sidebar

Søg

Mine anmeldelser

  • Kinsta.com(☆☆☆☆☆)
  • Nordicway.dk(☆☆☆☆)
  • UnoEuro / simply.com (☆☆☆)
  • One.com (☆☆)

Hold dig opdateret

Et par gange om året sender jeg et nyhedsbrev ud, med alle de nye tiltag jeg har gang i.
INGEN SPAM - det lover jeg!


… eller vælg en kategori

  • AngularJS (3)
  • Gammel (1)
  • Generelt (46)
  • Gør det selv (30)
  • Hosting (4)
  • WooCommerce (1)
  • WordPress Admin (3)
  • WordPress Fejl (3)
  • WordPress Guide (16)
  • WordPress Nyt (7)
  • WordPress Plugins (18)
  • WordPress Temaer (10)
  • WordPress Tips (30)
  • WordPress Tutorials (2)

Arkiver

  • februar 2022 (2)
  • januar 2022 (1)
  • december 2021 (2)
  • oktober 2021 (1)
  • april 2021 (1)
  • marts 2021 (1)
  • februar 2021 (2)
  • november 2020 (1)
  • august 2020 (1)
  • juli 2020 (2)
  • juni 2020 (1)
  • marts 2020 (1)
  • februar 2020 (2)
  • januar 2020 (5)
  • november 2019 (1)
  • maj 2019 (1)
  • april 2019 (1)
  • september 2018 (1)
  • juni 2018 (2)
  • april 2018 (1)
  • december 2017 (3)
  • oktober 2017 (1)
  • september 2017 (1)
  • november 2016 (1)
  • juni 2016 (1)
  • april 2016 (1)
  • marts 2016 (1)
  • juli 2015 (1)
  • september 2014 (1)
  • juni 2014 (3)
  • marts 2014 (5)
  • februar 2014 (2)
  • november 2013 (4)
  • oktober 2013 (1)
  • maj 2013 (1)
  • april 2013 (2)
  • marts 2013 (1)
  • januar 2013 (7)
  • december 2012 (2)

© Copyright 2012 - 2022 | WPTricks.dk | Sitemap | Cookie- og Privatlivspolitik