Shortcodes med en bagkant – Er det godt eller skidt?

De fleste kender til Shortcodes, især hvis man arbejder med WordPress har man helt sikkert stødt på begrebet shortcode. Men har du nogensinde tænkt over hvilken indflydelse det har at du bruger dem? Er det godt eller skidt, og hvornår er det godt eller skidt at bruge disse shortcodes?
Synonymer: Kortkode, Shortcode, Short Code, WordPress Shortcode
shortcodes

Hvad er shortcodes

Til dem som ikke lige ved hvad shortcodes er, kommer lige en hurtig forklaring.

Det er ganske simpelt små koder du kan bruge midt i indholdet på din hjemmeside som i redigeringsøjeblikket erstatter html kode med noget der rent faktisk ligner det lidt. En shortcode er typisk bygget op sådan:

[shortcode][/shortcode]

Ikke at ordet shortcode indgår i selve koden, den kunne nemlig også se ud sådan:

[ one_half ] indhold [ /one_half ]

som faktisk er en erstatning for denne html kode:

<div class="one_half">indhold</div>

Og laver en layoutboks der fylder halvdelen af indholdsområdet.

Det kan også blive mere komplekst, såsom en shortcode for at hente seneste indlæg i en given kategori, en shortkode for at generere et galleri og mange andre ting. Det er faktisk kun fantasien der sætter grænser for hvad man kan bruge som shortcode. Men fælles er at shortkoden skal være indprogrammeret før man kan benytte sig af den og få det resultat man gerne vil have. Nogle er allerede indbygget i fx WordPress, andre findes som plugins, og yderligere findes der også temaer som har indprogrammeret flere af slagsen.

Plugins der kan bruges

Shortcodes Ultimate
https://wordpress.org/plugins/shortcodes-ultimate/

Et plugin til wordpress med rigtig mange shortcodes (30+), som er responsiv og bliver opdateret hele tiden. Et godt valg hvis man gerne lige vil udvide kollektionen af shortcodes.

WordPress Shortcodes
https://wordpress.org/plugins/synved-shortcodes/

Et plugin der ligesom Shortcodes Ultimate har mange muligheder. De fleste ligner dog dem der også er i Shortcodes Ultimate. Der er nogle få som skiller sig ud.

Intense Shortcodes and sitebuilder

https://codecanyon.net/item/intense-shortcodes-and-site-builder-for-wordpress/5600492

Et stort plugin der har over 100 shortcodes, det koster dog lidt, men er de få kroner det nu koster  værd. For lige omkring 100,- kan du få dette plugin.

Temaer med indbyggede shortcodes

Avada – Responsivt tema – Det der bruges her
http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226

Et stort tema til mange funktioner

Bagsiden af medaljen

Der er ganske simpelt rigtig mange ting man kan gøre med disse shortcodes, også rigtig meget godt. Men der er desværre en bagside af medaljen som de fleste ikke rigtig tænker over. Dem der kender mig, ved nok allerede hvad jeg vil skrive nu. For ja det har indflydelse på performance at bruge shortcodes.

Nogen vil nok sige, det kan da ikke være meget det har indflydelse, men jo. Og det giver faktisk også lidt sig selv, så snart man forstår hvad det reelt er der sker bag ved kulissen. Jeg vil ikke komme med nogle kolde tal her, men i stedet forklare hvorfor det har indflydelse på performance af en side benytter sig af Shortcodes.

Hvad sker der når man bruger shortcodes?

Når der er en eller flere shortcodes på en side, sker der det at WordPress først ser efter om der er en shortcode, er den der, skal den lige behandles af den funktion som er grunden til skal PHP ind over for at se om der er en shortcode, hvordan denne shortcode skal behandles samt generere det resultat som skal ud til brugeren.  Selv en simpel shortcode som fx dem der typisk bruges til at lave kolonner i et dokument skal lige ind over PHP.

Det betyder at i stedet for bare at indskrive den html der skal bruges direkte i dokumentet, hvilket uden tvivl vil være hurtigere, så skal det lige behandles af flere PHP funktioner.

Shortcode måden

  • Registrer shortcode
  • Søg efter shortcode i indholdet
  • Behandle shortcode
  • Udskriv html resultat til dokumentet

html måden

  • Html er skrevet til dokumentet

Begge gør det samme, men html måden er bare betydeligt hurtigere, og dermed har det meget lidt indflydelse på performance. Herunder Behandlingstid og Ram forbrug.

Samtidig skal man være opmærksom på at selvom du ikke bruger en shortcode som er installeret og klar til brug på din hjemmeside, så ledes der stadig efter denne i dit indhold.

Her kommer alligevel nogle kolde tal. Ja jeg kunne ikke lade være.

Men jeg har fx testet på siden her, som bruger Avada theme, det betyder at der er indbygget fusion core som har enormt mange shortcodes indbygget. Hvis jeg deaktivere dem jeg ikke bruger, så spare jeg næsten 300ms i behandlingstiden på serveren, samt mellem 3-5MB ram blev skåret væk. Så det er alligevel noget at tage med.

Hvad skal du så gøre?

Det er egentlig meget enkelt, du kan følge disse simple råd.

  • Installer ikke Shortcodes du alligevel ikke skal bruge, hvilket reelt betyder at større pakker med shortcodes og større temaer med mange shortcodes, for de fleste ikke er vejen. Men i stedet lav dine egne i eget plugin eller functions.php filen.
  • Brug kun shortcodes når det er for stort et arbejde at indskrive det direkte som html eller slet ikke kan lade sig gøre uden at der skal behandles data eller hentes data fra databasen. Det skal jo ikke forhindre dig i at lave content.
  • Hold dig fra temaer og plugins hvor der er en nem mulighed for at layoute sider, fx drag and drop,  sitebuilder værktøjer mm. eller man skal i det mindste kunne deaktivere det, da de typisk også laver shortcodes.

Gør du alligevel ovenstående, så kan det være en fordel at du i dit WP Child Theme, lige tager højde for de shortcodes som du ikke bruger på siden, eller i det hele taget kommer til at bruge.

Åben din functions.php fil, og skriv:

add_action( 'after_setup_theme', 'deaktiver_shortcodes' );
function deaktiver_shortcodes() {
remove_shortcode('shortkodens navn');
}

Ved du ikke hvilke shortcodes der køre på dit site, kan du et sted i fx footer.php skrive:

<?php
	if ( is_user_logged_in() ) {
	  global $shortcode_tags;
          print_r($shortcode_tags); 
	}
?>

Helt rolig, det er kun brugere som er logget ind der kan se det.

Hvordan laver man sine egne shortcodes?

function minshortkode_func( $atts ){
// hent data, bearbejd data, udskriv data
	return "resultat af min shortkode";
}
add_shortcode( 'minshortkode', 'minshortkode_func' );

Så er du kørende

Nu skulle du være rustet til at varetage dine shortcodes. Held og lykke, og kom endelig med kommentarer så vi kan høre hvordan og hvornår du bruger shortcdes.

kim tetzlaff

Om forfatteren

Se mere Kim Tetzlaff

Jeg har siden 1995 arbejdet med og haft stor fokus på Teknisk SEO og hastighed på hjemmesider. Jeg er programmør, nørd og stolt af det. Jeg bygger hjemmesider, hastighedsoptimere, ser på det SEO tekniske og det er mere end 25 års erfaring der ligger bag – Du er i gode hænder når jeg laver noget for dig 🙂

9 kommentarer til “Shortcodes med en bagkant”

  1. Rigtig god artikel omkring shortcodes (og den eneste på dansk tror jeg?) 🙂

    Vi bruger det selv en del til de WordPress sider vi udvikler.

    Svar
    • Takker Kristian 😉
      Nej det er ikke den eneste på dansk, men det er den eneste med den vinkel. De fleste går på hvordan man laver dem, hvilket man jo også kan finde på wordpress eget site. Kan du fortælle hvordan du bruger shortcodes og hvilke shortcodes du bruger?

      Svar
  2. Jeg bruger themet Tisson. Det var nemt at gå til og har en del fede funktioner samt virker rigtigt fint i responsive.
    Den eneste grund til at jeg ikke allerede har hyret dig til at optimere hastighed (hvilket er tiltrængt) er at jeg ikke er sikker på om jeg beholder det.
    Nu har du lige gjort mig mere usikker på om det er det rette theme at gå videre med.
    Der er nemlig indbygget en form forpagebuilder og en del shortcodes. Det er dog de færreste sider jeg bruger det på. Men som jeg læser dit indlæg er det med til at påvirke hele siden.

    Mange af vores massage klienter (mere end 50%) besøger http://www.godkrop.dk fra mobilen hvilket er en af grundene til at jeg er glad for themets responsive egenskaber. Men den er langsom:)

    Spørgsmålet er: er der håb for en sådan side hastighedsmæssigt eller bør der kigges efter anden løsning?

    Tak for et godt indlæg om bagsiden af shortcodes!

    Svar
    • Der er altid håb for sider selvom der er indbygget dit og dat. Som jeg skriver kan man i dit childtheme deaktivere de shortcodes som du ikke bruger, hvilket allerede der vil gøre noget. Yderligere er der jo også andre ting man kan gøre for at oppe hastigheden. Så det er ikke fordi du skal bekymre dig. Indlægget er skrevet for at folk skal åbne øjnene for at “nemt og bekvemt kan være slemt” 🙂 ja den fandt jeg lige på 🙂

      Men det er fordi nogen sider er fyldt op med shortcodes af både den ene og den anden art, især af den type som man reelt kan lave i selve teksten som almindelig html. det er ikke avanceret, og på et meget lavt niveau. fx en så simpel ting som at indsætte en streg (en såkaldt seperator) hvorfor ikke bare bruge et hr tag, eller en simpel div boks med en klasse på, som enten allerede er stylet fra temaets side, eller man selv kan style via css. der er jo ingen grund til at PHP skal ind over for at lave sådan noget. Det svare til at man indsætter et billede via en shortcode, som rigtig mange også gør, men man kunne jo lige så godt lige lære, hvad er det egentlig den shortcode gør, og typisk er det faktisk bare at sætte en klasse eller to på, som man jo lige så godt kunne sætte på selv, manuelt.

      Svar
  3. Hej Kim!
    Jeg er lige faldet over din side, og har allerede lært en masse. Du skal have meget ros for alt det gode indhold du får lavet her på siden! 😉

    – Hvilke WordPress Themes anbefaler du/bruger du, hvis der skal tages meget hensyng til Hastighed og SEO?

    Jeg bruger selv Avada, og er desværre skyldig i at benytte mig at shortcodes i stor stil. Hvad mener du om dette tema? Er det problematisk ift. SEO og hastighed at bygge sine sider vha. shortcodes i Avada – og hvor problematisk er det?

    Svar
    • Jeg takker.
      Jeg brugte selv Avada for et års tid siden på denne blog, men blev træt af at udvikler ved hver opdatering lavede forskellige ting som nogen gange var godt og andre gange gjorde ting værre. Jeg prøvede så Genesis Framework af, og allerede ved installation og opsætning af netop det tema, blev sitet mere end 4-5 gange hurtigere end Avada, her snakker jeg ventetiden/WAIT/TTFB. på trods af at jeg havde andre shortcode installeret også.

      Avada var på et tidspunkt ret godt, men nok mest fordi der er så meget indbygget at man nærmest ikke kan løbe tør for elementer man kan lave. Problemet er så bare at det er sjældent at man overhovedet har brug for alle de funktioner og effekter, som jo i øvrigt også har stor indflydelse på den samlede loadtid. Det man skal huske er jo samtidig også at Avada jo ikke er det eneste man har kørende, så installerer man også lige slideren, måske endda også de andre slidere som Avada anbefaler, og så skal man også have mulighed for kontakt på andre måder end avada tilbyder, måske endda også gå med på WooCommerce fordi det anbefaler Avada og meget andet (typisk mellem 20 og 30 plugins), som til sammen bliver det ret tungt.

      Det er ikke fordi jeg har haft mission test temaer, men hvis man ser tilbage på fx dengang jeg begyndte at udvikle hjemmesider i PHP, så var alt jo custom, næsten. Hvilket betød at man byggede det der var brug for, og hvis der blev brug for mere, byggede man også det. Det gjorde at sites var super hurtige. Prøv at forestille dig hvis man havde samme tankegang i dag, så ville der virkelig være smæk på hjemmesiderne. Man kan så bruge denne tankegang til at finde det tema der er bedst i lige din situation. Det er den bedste vej at gå.

      Svar
      • Lige præcis TTFB ligger på over 1 sekund, hvilket rent ud sagt… pisser mig ret meget af – og er en af de største grunde til jeg er på udkig efter et andet tema.

        Og du har helt ret i, at man lynhurtigt får hentet de første 10 og 20 plugins, og ens side ender med at være ret tung.

        Jeg kan godt lide ideen i at custombuilde siderne, og har været i gang med et par stykker. Det tager bare en hel masse tid, og man skal jo også være realistisk – ikke alt kan betale sig at bygge selv 😉
        Men jeg må jo finde en mellemvej, og der synes jeg Genesis framework lyder som en god idé.

        Du skal have tak for hjælpen 🙂

        Svar
        • Det er 100% korrekt at det ikke altid kan betale sig, men andre gange kan det – Da http://www.arcomus.com og kommunikationssystemet vi tilbyder der, i sin tid blev bygget i drupal, det kunne ikke alt det det skulle kunne og var ikke færdigt. Så blev jeg partner, og jeg byggede det fra bunden og op. Systemet kræver næsten ingen ressourcer og køre super hurtigt, selv på en gammel PHP 5.3. Hvad ville der mon ske hvis jeg flyttede det over på PHP 7 🙂 det ville gå amok og loade før man trykkede på knappen 🙂

          Der er selvfølgelig plugins det ikke kan betale sig selv at lave. Men man skal væk fra tankegangen, så installerer vi bare et plugin.

          Og ja, Genesis er bestemt en rigtig god mellemvej. Men husk stadig at se på de plugins du evt benytter dig af, også dem som fx er nødvendige for at avada fungerer 100%. For de er helt sikkert også med til at skabe en høj TTFB.

          Svar

Skriv et svar til Kim Tetzlaff Annuller svar

Kategorier og tags på dette indlæg

, ,

Måske du også vil læse disse indlæg

Ja, jeg har også skrevet andre indlæg som måske kunne have din interesse