Den ultimata guiden till WordPress-kortkoder (med exempel för att skapa dina egna)

WordPress kortkoder är en kraftfull funktion för att göra coola saker med liten ansträngning. Du kan göra i stort sett vad som helst med dem. Om du nyttjar kortkoder är det lika enkelt att exempelvis bädda in interaktiva element eller skapa komplexa sidlayouter som att infoga en enda kodrad.

Ifall du vill lägga till ett galleri behöver du bara skriva in följande kod:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Detta skapar därefter ett galleri med de bild-ID: n som nämns. Det kommer att ha 4 kolumner och deras maxstorlek kommer att vara ”medium” (som har definierats av WordPress).

Det finns inget behov av någon ful HTML-kod.

Kortkoder eliminerar dessutom behovet av komplicerade skript. Även om du har små eller noll programmerings-kunskaper kan du lägga till dynamiskt innehåll utan problem med hjälp av dem.

De är mycket populära bland WordPress-utvecklare, eftersom de hjälper till att automatisera skapandet av innehåll och design. Kortkoder är för WordPress-utvecklare vad makron är för dataanalytiker, eller tangentbordsgenvägar för professionella grafiska formgivare.

I den här guiden kommer du att lära dig allt som finns att veta om kortkoder. Du kommer att få reda på hur du arbetar med Kortkod API genom att skapa dina egna kortkoder. I slutet kommer vi att diskutera framtiden för kortkoder och hur de passar in i WordPress nya Block-redigerare.

Är du exalterad? Låt oss komma igång!

Föredrar du att titta på videoversionen?

Vad är en kortkod?

Kortfattat kan man säga att Kortkod = Genväg + Kod.

Kortkoder använder vanligtvis hakparenteser [] för att definiera hur de används. Varje kortkod utför en viss funktion på en webbplats. Det kan vara så enkelt som att formatera innehållet eller så komplext som att definiera hela webbplatsens struktur.

Du kan exempelvis använda kortkoder för att bädda in sliders, formulär eller pristabeller. Du kan dessutom använda dem för att skapa återanvändbara mallar för sid-design.

En kort historia om kortkoder

Kortkoder gjordes först populära av en onlineforum-programvara som heter Ultimate Bulletin Board (UBB). År 1998 introducerade de BBCode (Bulletin Board Code), en samling lättanvända taggar där användare enkelt kunde formatera sina inlägg.

BBCode är ett lättviktigt markerings-språk som fungerar enligt samma principer som HTML, men det är mycket enklare.

Att använda fördefinierade taggar är dessutom mycket säkrare, eftersom användare inte kan infoga HTML-kod och skapa säkerhetsproblem. En användare med onda avsikter kan exempelvis använda taggen <script> för att exekvera JavaScript-kod och förstöra webbplatsens funktionalitet.

Strax därefter lade andra onlineforums-program som phpBB, XMB Forum och vBulletin till BBCode-funktionalitet i sina anslagstavlor.

Kortkoder gav administratörer större kontroll över vad deras användare kunde och inte kunde göra. Dessutom kunde användarna formatera sitt innehåll med hjälp av enkla taggar.

Av samma säkerhetsskäl förhindrar WordPress att PHP-kod körs inuti webbplatsens innehåll. För att övervinna denna begränsning introducerade WordPress 2.5 kortkods-funktionen 2008 med lanseringen av Shortcode API. Det har visat sig vara en av de mest använda funktionerna av många WordPress-plugins och temautvecklare.

Vad är WordPress-kortkoder?

WordPress-kortkoder är hakparentessträngar ([ ]) som magiskt förvandlas till något fascinerande på frontend. De ger användarna ett enkelt sätt att skapa och ändra komplicerat innehåll utan att behöva oroa sig för komplex HTML eller inbäddnings-koder.

De 2 typerna av kortkoder

Det finns främst två typer av kortkoder i WordPress.

• Självstängande kortkoder: Dessa behöver ingen avslutande tagg.

Exempel: Kortkoden för galleri behöver ingen avslutande tagg. Vi lägger till allt som den behöver med olika attribut.

• Omslutande kortkoder: Dessa behöver en avslutande tagg. Omslutande kortkoder manipulerar i allmänhet innehållet mellan de inledande och avslutande taggarna.

Exempel: Kortkoden för bildtext används för att linda in en bildtext runt allt innehåll. Den används främst för att lägga till en bildtext till bilder, men fungerar med alla HTML-element.

Vissa kortkoder fungerar med eller utan attribut. Det beror på hur de definieras.

Standard-kortkoderna för WordPress

WordPress levereras med 6 standard-kortkoder:

• • ljud: Bädda in ljudfiler på din webbplats. Den innehåller exempelvis enkla uppspelnings-kontroller som Play & Pause.
  • bildtext: Lägg till bildtexter runt ditt innehåll. Denna kortkod används mest för att lägga till bildtexter, men du kan använda den för alla HTML-element.
  • embed: Utöka standardfunktionen oEmbed. Med den här kortkoden kan du ställa in olika attribut för dina inbäddningar, som att exempelvis ställa in deras max-dimensioner.
  • gallery: Infoga ett enkelt bildgalleri på din webbplats. Du kan använda attribut för att definiera vilka bilder som används och därefter anpassa hur galleriet ser ut.
  • spellista: Visa en samling ljud- eller videofiler med den här kortkoden. Du kan ge den ett coolt ”mörkt” läge med dess stilattribut.
  • video: Bädda in en videofil och spela upp den med en enkel videospelare. Denna kortkod stöder inbäddning av videor med dessa format: mp4, webm, m4v, webm, ogv, wmv, flv.

För mer information om hur du kan använda standard-kortkoderna och vilka attribut som de stöder, kan du hänvisa till de länkade Codex-dokumenten.

Hur man använder WordPress-kortkoder

Att använda kortkoder i WordPress är en enkel process. Men det beror dock på var du vill lägga till dem på din webbplats. Se till att läsa kortkods-dokumentationen för att förstå hur den fungerar. Lär dig därefter vilka attribut som den stöder, så att du kan få exakt vad du vill ha.

Använda WordPress-kortkoder på sidor och i inlägg

Gå först till sid-redigeraren/inläggs-redigeraren där du vill infoga kortkoden.

Om du använder Gutenberg-redigeraren kan du lägga till kortkodstaggen i det fristående Kortkods-blocket. Vi hittar detta i avsnittet Widgets.

Använder du fortfarande den klassiska redigeraren (eller pluginet)? Du kan då skriva in dina kortkods-taggar på det klassiska sättet. Några kortkoder kan dessutom ha en knapp i redigeringsskärmen för en enkel infogning.

Använda WordPress-kortkoder i sidofält-widgets

Kortkoder kan dessutom infogas i sidofältets widgets. För att lägga till dem går du till Utseende ” Widgets och lägger till en textwidget i det avsnitt där du vill lägga till genvägen.

Klistra in kortkoden i textwidgeten och spara den. Du kan därefter besöka webbplatsens frontend och se kortkodens resultat i sidofältet.

Obs: WordPress 4.8 och senare versioner stöder inte kortkoder i sidofältwidgets. Läs Widget-förbättringar i WordPress 4.9-uppdateringen för mer information.

Använda WordPress-kortkoder i sidhuvud och sidfot

WordPress-kortkoder är generellt avsedda för sidor, inlägg och widgets. Men det finns dessutom ett enkelt sätt att infoga kortkoder var som helst på din webbplats.

Säg att du vill lägga till en CTA-knapp i sidfoten, eller i alla dina inlägg före kommentars-avsnittet. Här kommer callback-funktionen do_shortcode() väl till pass.

Du måste lägga till följande kod i ditt temas header.php, footer.php eller någon av dess mallfiler:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Detta kommer därefter att mata ut kortkoden på den plats där du infogade koden.

Se dock till att inkludera hakparenteserna mellan citattecknen för att ”echo” kortkoden. Att bara inkludera dess namn fungerar inte.

På samma sätt kan du använda callback-funktionen do_shortcode() för att aktivera kortkoder var som helst i WordPress, exempelvis i kommentarsavsnittet.

En snabb introduktion till Shortcode API

WordPress Shortcode API definierar hur du kan använda kortkoder för att anpassa och utöka webbplatsens funktionalitet. Det gör det exempelvis möjligt för utvecklare att skapa unikt innehåll (t.ex. formulär, karuseller, sliders, osv.) som användare därefter kan lägga till på sina webbplatser genom att klistra in den relevanta kortkoden.

Med hjälp av kortkoder kan du lägga till nästan alla funktioner du kan föreställa dig på din webbplats.

API: et stöder både självstängande och inneslutande kortkoder. Det hanterar all knepig tolkning och innehåller hjälpfunktioner för att ställa in och hämta standardattribut.

Tack vare API: et kan du dyka rakt in i att utveckla och anpassa kortkoder, snarare än att slösa dyrbar tid på att definiera reguljära uttryck för varje kortkod som du skapar.

Förstå grunderna i Shortcode API

Varje gång du öppnar en sida eller ett inlägg i WordPress letar den efter registrerade kortkoder medan den bearbetar webbplatsens innehåll.

Om en registrerad kortkod hittas tar Shortcode API över och returnerar utdata från kortkoden/kortkoderna. Den returnerade utdatasträngen ersätter därefter kortkodstaggen på den plats där den lades till.

Du registrerar en kortkod i WordPress med funktionen add_shortcode(). Så här går det till:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• • • shortcode_name: Den tagg som WordPress kommer att leta efter när inläggsinnehållet analyseras. Shortcode API rekommenderar att du endast använder små bokstäver, siffror och understrykningar för att definiera dess värde (undvik bindestreck).
    • kortkod_hanterare_funktion: Callback-funktionen som kommer att köras efter att WordPress bekräftar närvaron av en registrerad kortkod.

Kortkodshanterings-funktionen

Kortkodshanterings-funktionen definieras som sådan:

function shortcode_handler_function( $atts, $content, $tag ){ }

• • • $atts: En associativ matris med attribut (dvs. en matris med nyckel-värdepar). Om du inte definierar några attribut kommer den som standard att vara en tom sträng.
    • $innehåll: Det bifogade innehållet, om du definierar en bifogad kortkod. Det är hanterar-funktionens ansvar att se till att $content-värdet returneras till utdata.
    • $tag: Kortkodens taggvärde(kortkod_namn i exemplet ovan). Om två eller flera kortkoder delar samma callback-funktion (vilket är giltigt), hjälper $tag-värdet dig att avgöra vilken kortkod som utlöste hanterar-funktionen.

API: et analyserar kortkodens tagg, attribut och bifogade innehåll (om det finns något) och skickar värdena vidare till hanterar-funktionen, som bearbetar dem och returnerar en utdata-sträng.

Denna utdata-sträng ersätter därefter kortkods-makrot på webbplatsens frontend. Vad du i slutändan ser i webbläsaren är denna utdata.

Var ska du lägga till dina anpassade kortkodskript?

Du kan lägga till dina anpassade kortkods-skript i temats functions.php-fil eller inkludera dem i ett plugin.

Om du exempelvis lägger till det i en temafil kan du köra add_shortcode() funktionen som den är.

Men om du lägger till det i ett plugin rekommenderar vi att du initierar den först efter att WordPress har laddats helt. Du kan säkerställa detta genom att linda in add_shortcode() -funktionen i en annan funktion. Detta kallas en wrapper-funktion:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

Funktionen add_action() hakar i Shortcode_init så att den aktiveras först efter att WordPress har slutfört laddningen (det kallas ”init”-kroken).

Så här skapar du en anpassad kortkod i WordPress (nybörjarnivå)

Nu när vi har gått igenom grunderna är det dags att skapa en anpassad kortkod.

För att följa stegen nedan behöver du vara bekant med att arbeta med PHP-kod och redigera dina WordPress-temafiler. När du är klar med handledningen kommer din första anpassade WordPress-kortkod vara redo att användas!

Vi börjar med den enklaste kortkoden och går därefter vidare till mer komplexa kortkoder. Njut av dina korta milstolpar på din väg till kortkods-briljans!

Kolla in vår video – Hur man skapar en anpassad kortkod i WordPress för nybörjare:

Exempel 1: Kortkod som använder [current_year]

Låt oss skapa en kortkod som heter [current_year] som matar ut det aktuella året på din webbplats.

Den här kortkoden är exempelvis användbar om du lägger till innehåll på din webbplats som behöver uppdateras varje år. Det kan ju bland annat hända att du lägger till ett meddelande om upphovsrätt i sidfoten på din webbplats.

Jag kommer att använda ett barebones-plugin för att lägga till mina kortkods-funktioner. Du kan lägga till det i ditt temas functions.php-fil och få samma resultat, men jag rekommenderar inte detta. Det är dock OK för testning och lärande!

Låt oss komma igång genom att skapa ett plugin. Skapa en ny mapp i din /wp-content/plugins/-katalog.

Jag kallar mitt plugin för ”salcodes” men du kan kalla det vad du vill.

I salcodes plugin-katalog skapar du en PHP-fil med samma namn (salcodes.php). När du är klar lägger du till följande rubrik i din plugin-fil:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Detta enkla plugin-huvud är tillräckligt bra för våra syften. Du kan läsa mer om kraven för plugin-huvuden i WordPress Codex. Spara den här filen och gå därefter till din WordPress-panel för att aktivera pluginet.

Registrering av kortkoden

Nu ska vi registrera kortkoden och dess hanterar-funktion. För att göra detta, lägg till följande kod i din plugin-fil:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• • • @return-taggen i PHP-kommentaren definierar vilken typ av utdata som returneras. Den följs av en kort beskrivning av samma sak.
    • current_year är kortkodstaggen eller namnet. Detta definierar den självstängande tagg som du behöver lägga till i ditt innehåll, vilket i detta fall skulle vara [current_year].
    • salcodes_year är namnet på den kortkodshanterings-funktion som returnerar utdatasträngen. Vi kommer att definiera denna callback-funktion på nästa rad. Eftersom vi skapar en enkel självstängande kortkod behöver du inte skicka några variabelvärden som $attributes, $content eller $tag till den.
    • salcodes_init är wrapper-funktionen som är kopplad till ”init” för att se till att kortkoden registreras och körs först efter att WordPress har slutfört laddningen. WordPress inbyggda add_action()-funktion gör detta möjligt.
    • getdate() är en PHP-funktion som returnerar en matris med datum-information för den aktuella tidsstämpeln. Year-nyckeln innehåller det aktuella årets värde (som en 4-siffrig sträng). Så getdate()[’year’] returnerar det aktuella året. Detta resultat är exakt vad vi vill ha.

Spara din plugin-fil. Det är nu dags att testa om kortkoden fungerar som avsett.

Lägg till kortkoden var som helst på din webbplats (sida, inlägg, sidofält-widget, osv.). Jag lägger till den i sidofältetsText-widget på min webbplats.

Och som förväntat fungerar det helt perfekt.

Grattis till att ha nått din första milstolpe!

Kortkoden som du just skapade har inga $attribut eller $innehållsvariabler associerade med den. Du kommer att lära dig hur du använder dem i följande exempel.

Exempel 2: Kortkod för en CTA-knapp

Låt oss skapa en anpassningsbar kortkod för en CTA-knapp. Denna kommer dessutom att vara självstängande (ledsen $content, du måste hålla ut till nästa).

Jag vill att användarna ska kunna anpassa CTA-knappens storlek och färg med kortkodens attribut.

Eftersom slutresultatet är ett knapp-element kan dess HTML-attribut som href, id, class, target & label användas för att enkelt anpassa detta.

Du kan använda id- och class-attributen för att styla knappen eftersom de båda är vanliga CSS-väljare.

Jag lindar inte in min handler-funktion här för att hålla saker och ting lite enkelt.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, det finns mycket att packa upp här. Jag kommer att förklara detta rad för rad, så att du därefter kan förstå hur det fungerar.

• • • Vi har gått igenom add_shortcode() och hur den fungerar i föregående avsnitt.
    • shortcode_atts() är en WordPress-funktion som kombinerar användarens kortkods-attribut med kända attribut. Den fyller i standardvärden när det behövs (som du dessutom kan ställa in själv). Resultatet blir en matris som innehåller varje nyckel från de kända attributen, sammanslagna med värden från användardefinierade kortkods-attribut.
    • Inuti kortkodshanterar-funktionen definierar vi en variabel ($a) och tilldelar den till matrisen som returneras av shortcode_atts(). Vi tilldelar attributen deras standardvärden med syntaxen: ’attribut’ => ’standardvärde’. I koden ovan ställer vi exempelvis in standardvärdet för attributet label till Button med syntaxen ’ label’ => ’Button’.
    • Vi kan extrahera värdena för varje attributnyckel med PHP-syntaxen för matriser: $a[’attribute’].
    • Variabeln $output lagrar HTML-koden för knapp-elementet (<a>-tagg med ’button’-klass). Det är den sträng som slutligen returneras av funktionen.

Använd WordPress-funktionen home_url()

Om du vill att standardlänken ska vara webbplatsens startsida kan du dessutom använda WordPress-funktionen home_url().

Låt oss försöka använda kortkoden som den är, utan några definierade attribut, och se vad som matas ut.

Om du undrar vad de dubbla hakparenteserna är till för ([[cta_button]]), kallas de en escaping-kortkod. De hjälper dig att mata ut alla registrerade kortkoder på din webbplats som vanlig text, som i bilden nedan.

Användare kan anpassa knappens storlek och färg med kortkoden. Vi har redan ställt in deras standardvärden i hanterarfunktionen, men vi måste dessutom registrera och köa in formatmallen i listan över tillgängliga resurser. Stilmallen ska innehålla alla klasser som definieras i kortkoden.

Du kan även ställa in dessa klasser i ditt temas globala formatmall. Det rekommenderas dock att du laddar dem separat. Detta säkerställer att även om du ändrar eller uppdaterar ditt WordPress-tema, kommer dessa klasser fortfarande att laddas tillsammans med kortkoden.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Kortkoden salcodes_engueue_scripts()

Kortkoden salcodes_enqueue_scripts()-funktionen definierar den globala variabeln $post och bekräftar sedan två villkor via:

• • • is_a(): kontrollerar om $post är en instans av WP_Post-objektet. Det hänvisar till alla inläggstyper i WordPress.
    • has_shortcode(): kontrollerar om inläggsinnehållet innehåller kortkoden [cta_button].

Om båda villkoren är sanna registrerar och köar funktionen stilmallen style.css som ingår i CSS-mappen. Funktionen plugin_dir_url( $file ) gör det därefefter enkelt att få webbadressen till pluginets katalog.

Jag kommer inte att visa dig CSS-koden här, men du kan hitta den i källkoden som länkas i slutet av detta avsnitt.

Slutligen, låt oss testa [cta_button]-kortkoden genom att lägga till den i inläggs-innehållet:

Bilden nedan visar hur CTA-knappen ser ut på frontend:

Nu när du har lärt dig hur du definierar anpassade attribut och inkluderar stilar kan du lägga till olika andra funktioner i din kortkod för CTA-knappen. Du kan exempelvis ge dina användare möjlighet att lägga till animationer, hover-effekter och olika andra knappstilar.

Exempel 3: Kortkod som använder $content

I vårt sista exempel bygger vi en omslutande kortkod som heter [boxed] som matar ut allt innehåll mellan dess taggar i en ruta med färgglada titlar.

Låt oss börja med att registrera kortkoden och definiera dess hanterar-funktion.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

• • • $content = null: detta registrerar kortkoden som en inneslutande typ. Du kan använda variabeln $content i din hanterar-funktion för att ändra utdata som du vill.
    • $tag = ”: Definierar kortkodens $tag-variabel. Det är inte nödvändigt i det här exemplet, men är en bra praxis att inkludera den.

I det här exemplet ändrar vi innehållet med hjälp av inbundna CSS-stilar.

Stilar registreras och köas

Stilar för alla klasser som används i kortkoden registreras och köas som vi gjorde i det tidigare kortkods-exemplet.

Om två kortkoder använder samma formatmall måste du dock ladda den om någon av dem används. Så låt oss uppdatera salcodes_enqueue_scripts()-funktionen:

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• • • $has_shortcode: en användardefinierad variabel som kontrollerar om någon av kortkoderna finns på sidan/inlägget. Operatorn || (OR) gör detta möjligt.

Låt oss nu ta vår [boxed] kortkod på en provtur.

Skärmdumpen nedan visar resultatet som vi får.

Nu när du har lärt dig hur du skapar dina egna kortkoder kan du tänka utanför [boxen] och ge dem din egen prägel. Glöm inte att dela dina skapelser med oss!

Om du vill kan du ladda ner källkoden för Shortcode-plugins härifrån.

WordPress-kortkoder: Fördelar vs Nackdelar

Fördelar

• • • Kortkoder förenklar tillägget av komplexa funktioner på WordPress-webbplatser. Du kan exempelvis lägga till nästan vad som helst genom att skriva en enda kodrad.
    • De automatiserar arbetsflödet för utveckling. Behovet av att skriva komplexa skript varje gång som du vill infoga en viss funktion elimineras.
    • Kortkoder är mer användarvänliga än att lägga till HTML-kod eller PHP-skript.
    • De kan dessutom paketeras i plugins. Även om du uppdaterar WordPress eller ändrar/uppdaterar ditt tema kommer kortkoderna fortfarande att vara giltiga och fortsätta att fungera som de gjorde tidigare.
    • Att paketera kortkoder i plugins gör dem enkla att använda på flera WordPress-webbplatser. De kan därför vara en livräddare, om du är en utvecklare som hanterar många webbplatser.
    • Eftersom kortkoder även accepterar attribut kan användare ändra hur samma kortkod beter sig genom att bara ändra dess attribut-alternativ.

Nackdelar

• • • Kortkoder är inte intuitiva att använda för slutanvändaren, särskilt om många av dem används på en sida. I sådana fall är de mer lämpade för utvecklare.
    • Det är svårt att säga vad en kortkod gör bara genom att titta på den. WordPress kärnteam har därför döpt dem till ”mystery meat embed codes”.
    • Alla kortkoder som levereras med teman kommer att sluta fungera om du ändrar ditt tema.
    • De är tvetydiga när det gäller deras syntax. Vissa av dem stöder exempelvis valfri stängning. Du kan därför använda dem som antingen självstängande eller inneslutande eller till och med båda om de är kapslade. Detta kan verkligen bli superförvirrande väldigt fort.
    • Kortkoder kan krascha HTML på grund av motstridiga taggar eller interoperabilitets-problem. Det är aldrig bra om de syns på någon webbplats frontend.
    • Kortkoder lägger till en extra belastning på din server. När antalet kortkoder på din sida / inlägg ökar, ökar dessutom denna belastning. Allt för många kortkoder kan därför få din webbplats att krypa (exempelvis resultatet av de flesta sidbyggare).

Kortkoder och Gutenberg-block

Införandet av Gutenberg har gjort kortkoder mindre önskvärda. Användare kan nu lägga till block direkt från redigeringsgränssnittet, istället för att hantera kortkodsmarkeringar, oavsett hur enkelt det är.

Och om du vill lägga till kortkoder inkluderar Gutenberg dessutom ett dedikerat block för att lägga till kortkoder. Block är de nya kortkoderna.

”Om du kan göra det med en kortkod kan du göra det med ett block.” – James Huff, Happiness Engineer på Automattic

Det förklarar varför alla de populära kortkoderna konverteras till block. Många WordPress-utvecklare har därför gått över till att låta sina produkter och tjänster fungera uteslutande med blockredigeraren (Gutenberg).

Men det betyder inte att detta är slutet för kortkoder. WordPress Core Team har utlovat många förbättringar av blockredigeraren, som du kan se i Twenty Twenty. Tills dess är dock kortkoderna här för att stanna!

Sammanfattning

Att lägga till en komplex funktionalitet var som helst på din WordPress-webbplats är enkelt med kortkoder. De ger exempelvis användarna enkla taggar som kan användas utan att de behöver hålla på med komplexa koder.

Även om det kanske inte finns några genvägar i livet, finns det verkligen många kortkoder att använda i WordPress. Mina favoriter är Shortcodes Ultimate och Shortcodes by Angie Makes.

Och om du inte kan hitta den som du letar efter, kan du skapa en själv.

Du kan dessutom ta en genväg för att skapa din anpassade kortkod genom att använda Shortcode-pluginet. Det tar hand om alla väsentliga saker för dig. Och kom ihåg: livet är kort, använd kortkoder!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.

• Hemsida
• LinkedIn
• Twitter