[gallery ids=\"47 ,86, 92, 64, 48, 75, 89, 80\" columns=\"4\" size=\"medium\"]<\/pre>\nDetta skapar d\u00e4refter ett galleri med de bild-ID: n som n\u00e4mns. Det kommer att ha 4 kolumner och deras maxstorlek kommer att vara ”medium” (som har definierats av WordPress).<\/p>\n
Det finns inget behov av n\u00e5gon ful HTML-kod.<\/p>\n
Exempel p\u00e5 kortkoden f\u00f6r galleri<\/figcaption><\/figure>\n Kortkoder eliminerar dessutom behovet av komplicerade skript. \u00c4ven om du har sm\u00e5 eller noll programmerings-kunskaper kan du l\u00e4gga till dynamiskt inneh\u00e5ll utan problem med hj\u00e4lp av dem.<\/p>\n
De \u00e4r mycket popul\u00e4ra bland WordPress-utvecklare<\/a>, eftersom de hj\u00e4lper till att automatisera skapandet av inneh\u00e5ll och design. Kortkoder \u00e4r f\u00f6r WordPress-utvecklare vad makron \u00e4r f\u00f6r dataanalytiker, eller tangentbordsgenv\u00e4gar f\u00f6r professionella grafiska formgivare.<\/p>\n
I den h\u00e4r guiden kommer du att l\u00e4ra dig allt som finns att veta om kortkoder. Du kommer att f\u00e5 reda p\u00e5 hur du arbetar med Kortkod API genom att skapa dina egna kortkoder. I slutet kommer vi att diskutera framtiden f\u00f6r kortkoder och hur de passar in i WordPress nya Block-redigerare<\/a>.<\/p>\n
\u00c4r du exalterad? L\u00e5t oss komma ig\u00e5ng!<\/p>\n
<\/div><\/kinsta-auto-toc>\n F\u00f6redrar du att titta p\u00e5 videoversionen<\/a>?<\/h3>\n
<\/kinsta-video><\/p>\n Vad \u00e4r en kortkod?<\/h2>\n
Kortfattat kan man s\u00e4ga att Kortkod = Genv\u00e4g + Kod<\/strong>.<\/p>\n
Kortkoder anv\u00e4nder vanligtvis hakparenteser [] f\u00f6r att definiera hur de anv\u00e4nds. Varje kortkod utf\u00f6r en viss funktion p\u00e5 en webbplats. Det kan vara s\u00e5 enkelt som att formatera inneh\u00e5llet eller s\u00e5 komplext som att definiera hela webbplatsens struktur.<\/p>\n
Du kan exempelvis anv\u00e4nda kortkoder f\u00f6r att b\u00e4dda in sliders<\/a>, formul\u00e4r<\/a> eller pristabeller<\/a>. Du kan dessutom anv\u00e4nda dem f\u00f6r att skapa \u00e5teranv\u00e4ndbara mallar f\u00f6r sid-design.<\/p>\n
En kort historia om kortkoder<\/h3>\n
Kortkoder gjordes f\u00f6rst popul\u00e4ra av en onlineforum-programvara som heter Ultimate Bulletin Board (UBB). \u00c5r 1998 introducerade de BBCode (Bulletin Board Code)<\/a>, en samling l\u00e4ttanv\u00e4nda taggar d\u00e4r anv\u00e4ndare enkelt kunde formatera sina inl\u00e4gg.<\/p>\n
Enkel formatering med enkla BBCoder<\/figcaption><\/figure>\n BBCode \u00e4r ett l\u00e4ttviktigt markerings-spr\u00e5k som fungerar enligt samma principer som HTML, men det \u00e4r mycket enklare.<\/p>\n
Att anv\u00e4nda f\u00f6rdefinierade taggar \u00e4r dessutom mycket s\u00e4krare, eftersom anv\u00e4ndare inte kan infoga HTML-kod och skapa s\u00e4kerhetsproblem<\/a>. En anv\u00e4ndare med onda avsikter kan exempelvis anv\u00e4nda taggen <script> f\u00f6r att exekvera JavaScript-kod och f\u00f6rst\u00f6ra webbplatsens funktionalitet.<\/p>\n
Strax d\u00e4refter lade andra onlineforums-program som phpBB<\/a>, XMB Forum<\/a> och vBulletin<\/a> till BBCode-funktionalitet i sina anslagstavlor.<\/p>\n
Kortkoder gav administrat\u00f6rer st\u00f6rre kontroll \u00f6ver vad deras anv\u00e4ndare kunde och inte kunde g\u00f6ra. Dessutom kunde anv\u00e4ndarna formatera sitt inneh\u00e5ll med hj\u00e4lp av enkla taggar.<\/p>\n
Av samma s\u00e4kerhetssk\u00e4l f\u00f6rhindrar WordPress att PHP-kod k\u00f6rs inuti webbplatsens inneh\u00e5ll. F\u00f6r att \u00f6vervinna denna begr\u00e4nsning introducerade WordPress 2.5<\/a> kortkods-funktionen 2008 med lanseringen av Shortcode API<\/a>. Det har visat sig vara en av de mest anv\u00e4nda funktionerna av m\u00e5nga WordPress-plugins och temautvecklare.<\/p>\n
Vad \u00e4r WordPress-kortkoder?<\/h3>\n
WordPress-kortkoder \u00e4r hakparentesstr\u00e4ngar ([ ]<\/strong>) som magiskt f\u00f6rvandlas till n\u00e5got fascinerande p\u00e5 frontend. De ger anv\u00e4ndarna ett enkelt s\u00e4tt att skapa och \u00e4ndra komplicerat inneh\u00e5ll utan att beh\u00f6va oroa sig f\u00f6r komplex HTML eller inb\u00e4ddnings-koder.<\/p>\n
WordPress-kortkoder \u00e4r enkla och l\u00e4tta att anv\u00e4nda<\/figcaption><\/figure>\n De 2 typerna av kortkoder<\/h3>\n
Det finns fr\u00e4mst tv\u00e5 typer av kortkoder i WordPress.<\/p>\n
Sj\u00e4lvst\u00e4ngande och inneslutande kortkoder kan vara giltiga med eller utan attribut.<\/figcaption><\/figure>\n \n
- Sj\u00e4lvst\u00e4ngande kortkoder:<\/strong> Dessa beh\u00f6ver ingen avslutande tagg.<\/li>\n<\/ul>\n
Exempel: Kortkoden f\u00f6r galleri<\/strong> beh\u00f6ver ingen avslutande tagg. Vi l\u00e4gger till allt som den beh\u00f6ver med olika attribut.<\/p>\n
\n
- Omslutande kortkoder:<\/strong> Dessa beh\u00f6ver en avslutande tagg. Omslutande kortkoder manipulerar i allm\u00e4nhet inneh\u00e5llet mellan de inledande och avslutande taggarna.<\/li>\n<\/ul>\n
Exempel:<\/em> Kortkoden f\u00f6r bildtext<\/strong> anv\u00e4nds f\u00f6r att linda in en bildtext runt allt inneh\u00e5ll. Den anv\u00e4nds fr\u00e4mst f\u00f6r att l\u00e4gga till en bildtext till bilder, men fungerar med alla HTML-element.<\/p>\n
Vissa kortkoder fungerar med eller utan attribut. Det beror p\u00e5 hur de definieras.<\/p>\n
Standard-kortkoderna f\u00f6r WordPress<\/h2>\n
WordPress levereras med 6 standard-kortkoder:<\/p>\n
\n
- \n
\n
- ljud<\/a>: B\u00e4dda in ljudfiler p\u00e5 din webbplats. Den inneh\u00e5ller exempelvis enkla uppspelnings-kontroller som Play & Pause.<\/li>\n
- bildtext<\/a>: <\/strong>L\u00e4gg till bildtexter runt ditt inneh\u00e5ll. Denna kortkod anv\u00e4nds mest f\u00f6r att l\u00e4gga till bildtexter, men du kan anv\u00e4nda den f\u00f6r alla HTML-element.<\/li>\n
- embed<\/a>: Ut\u00f6ka standardfunktionen oEmbed. Med den h\u00e4r kortkoden kan du st\u00e4lla in olika attribut f\u00f6r dina inb\u00e4ddningar, som att exempelvis st\u00e4lla in deras max-dimensioner.<\/li>\n
- gallery<\/a>: Infoga ett enkelt bildgalleri p\u00e5 din webbplats. Du kan anv\u00e4nda attribut f\u00f6r att definiera vilka bilder som anv\u00e4nds och d\u00e4refter anpassa hur galleriet ser ut.<\/li>\n
- spellista<\/a>: Visa en samling ljud- eller videofiler med den h\u00e4r kortkoden. Du kan ge den ett coolt ”m\u00f6rkt” l\u00e4ge med dess stilattribut.<\/li>\n
- video<\/a>: B\u00e4dda in en videofil och spela upp den med en enkel videospelare. Denna kortkod st\u00f6der inb\u00e4ddning av videor med dessa format: mp4, webm, m4v, webm, ogv, wmv, flv.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
F\u00f6r mer information om hur du kan anv\u00e4nda standard-kortkoderna och vilka attribut som de st\u00f6der, kan du h\u00e4nvisa till de l\u00e4nkade Codex-dokumenten.<\/p>\n
Hur man anv\u00e4nder WordPress-kortkoder<\/h3>\n
Att anv\u00e4nda kortkoder i WordPress \u00e4r en enkel process. Men det beror dock p\u00e5 var du vill l\u00e4gga till dem p\u00e5 din webbplats. Se till att l\u00e4sa kortkods-dokumentationen f\u00f6r att f\u00f6rst\u00e5 hur den fungerar. L\u00e4r dig d\u00e4refter vilka attribut som den st\u00f6der, s\u00e5 att du kan f\u00e5 exakt vad du vill ha.<\/p>\n
Anv\u00e4nda WordPress-kortkoder p\u00e5 sidor och i inl\u00e4gg<\/h3>\n
G\u00e5 f\u00f6rst till sid-redigeraren\/inl\u00e4ggs-redigeraren d\u00e4r du vill infoga kortkoden.<\/p>\n
Om du anv\u00e4nder Gutenberg-redigeraren kan du l\u00e4gga till kortkodstaggen i det frist\u00e5ende Kortkods-blocket<\/em>. Vi hittar detta i avsnittet Widgets<\/em>.<\/p>\n
L\u00e4gga till ett kortkods-block i Gutenberg<\/figcaption><\/figure>\n Gutenbergs s\u00e4rskilda kortkods-block<\/figcaption><\/figure>\n Anv\u00e4nder du fortfarande den klassiska redigeraren (eller pluginet)<\/a>? Du kan d\u00e5 skriva in dina kortkods-taggar p\u00e5 det klassiska s\u00e4ttet. N\u00e5gra kortkoder kan dessutom ha en knapp i redigeringssk\u00e4rmen f\u00f6r en enkel infogning.<\/p>\n
L\u00e4gga till en kortkod i den klassiska redigeraren<\/figcaption><\/figure>\n Anv\u00e4nda WordPress-kortkoder i sidof\u00e4lt-widgets<\/h3>\n
Kortkoder kan dessutom infogas i sidof\u00e4ltets widgets<\/a>. F\u00f6r att l\u00e4gga till dem g\u00e5r du till Utseende ” Widgets<\/strong> och l\u00e4gger till en textwidget<\/strong> i det avsnitt d\u00e4r du vill l\u00e4gga till genv\u00e4gen.<\/p>\n
L\u00e4gg till kortkod i sidof\u00e4ltet med textwidgeten<\/figcaption><\/figure>\n Klistra in kortkoden i textwidgeten<\/em> och spara<\/em> den. Du kan d\u00e4refter bes\u00f6ka webbplatsens frontend och se kortkodens resultat i sidof\u00e4ltet.<\/p>\n
Kortkodens resultat (galleri) kan ses i sidof\u00e4ltet<\/figcaption><\/figure>\n Obs:<\/strong> WordPress 4.8 och senare versioner st\u00f6der inte kortkoder i sidof\u00e4ltwidgets. L\u00e4s Widget-f\u00f6rb\u00e4ttringar i WordPress 4.9-uppdateringen<\/a> f\u00f6r mer information.<\/p>\n
Anv\u00e4nda WordPress-kortkoder i sidhuvud och sidfot<\/h3>\n
WordPress-kortkoder \u00e4r generellt avsedda f\u00f6r sidor, inl\u00e4gg och widgets. Men det finns dessutom ett enkelt s\u00e4tt att infoga kortkoder var som helst p\u00e5 din webbplats.<\/p>\n
S\u00e4g att du vill l\u00e4gga till en CTA-knapp i sidfoten, eller i alla dina inl\u00e4gg f\u00f6re kommentars-avsnittet. H\u00e4r kommer callback-funktionen do_shortcode()<\/a> v\u00e4l till pass.<\/p>\n
Du m\u00e5ste l\u00e4gga till f\u00f6ljande kod i ditt temas header.php<\/em>, footer.php<\/em> eller n\u00e5gon av dess mallfiler:<\/p>\n
<?php echo do_shortcode(\"[name_of_your_shortcode]\"); ?><\/code><\/pre>\nDetta kommer d\u00e4refter att mata ut kortkoden p\u00e5 den plats d\u00e4r du infogade koden.<\/p>\n
Se dock till att inkludera hakparenteserna mellan citattecknen f\u00f6r att ”echo” kortkoden. Att bara inkludera dess namn fungerar inte.<\/p>\n
P\u00e5 samma s\u00e4tt kan du anv\u00e4nda callback-funktionen do_shortcode()<\/em> f\u00f6r att aktivera kortkoder var som helst i WordPress, exempelvis i kommentarsavsnittet.<\/p>\n
En snabb introduktion till Shortcode API<\/h3>\n
WordPress Shortcode API<\/a> definierar hur du kan anv\u00e4nda kortkoder f\u00f6r att anpassa och ut\u00f6ka webbplatsens funktionalitet. Det g\u00f6r det exempelvis m\u00f6jligt f\u00f6r utvecklare att skapa unikt inneh\u00e5ll (t.ex. formul\u00e4r, karuseller, sliders, osv.) som anv\u00e4ndare d\u00e4refter kan l\u00e4gga till p\u00e5 sina webbplatser genom att klistra in den relevanta kortkoden.<\/p>\n
Med hj\u00e4lp av kortkoder kan du l\u00e4gga till n\u00e4stan alla funktioner du kan f\u00f6rest\u00e4lla dig p\u00e5 din webbplats.<\/p>\n
API: et st\u00f6der b\u00e5de sj\u00e4lvst\u00e4ngande och inneslutande kortkoder. Det hanterar all knepig tolkning och inneh\u00e5ller hj\u00e4lpfunktioner f\u00f6r att st\u00e4lla in och h\u00e4mta standardattribut.<\/p>\n
Tack vare API: et kan du dyka rakt in i att utveckla och anpassa kortkoder, snarare \u00e4n att sl\u00f6sa dyrbar tid p\u00e5 att definiera regulj\u00e4ra uttryck f\u00f6r varje kortkod som du skapar.<\/p>\n
F\u00f6rst\u00e5 grunderna i Shortcode API<\/h3>\n
Varje g\u00e5ng du \u00f6ppnar en sida eller ett inl\u00e4gg i WordPress letar den efter registrerade kortkoder medan den bearbetar webbplatsens inneh\u00e5ll.<\/p>\n
Om en registrerad kortkod hittas tar Shortcode API \u00f6ver och returnerar utdata fr\u00e5n kortkoden\/kortkoderna. Den returnerade utdatastr\u00e4ngen ers\u00e4tter d\u00e4refter kortkodstaggen p\u00e5 den plats d\u00e4r den lades till.<\/p>\n
Du registrerar en kortkod i WordPress med funktionen add_shortcode()<\/a>. S\u00e5 h\u00e4r g\u00e5r det till:<\/p>\n
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );<\/code><\/pre>\n\n
- \n
\n
- \n
\n
- shortcode_name:<\/strong> Den tagg som WordPress kommer att leta efter n\u00e4r inl\u00e4ggsinneh\u00e5llet analyseras. Shortcode API rekommenderar att du endast anv\u00e4nder sm\u00e5 bokst\u00e4ver, siffror och understrykningar f\u00f6r att definiera dess v\u00e4rde (undvik bindestreck).<\/li>\n
- kortkod_hanterare_funktion:<\/strong> Callback-funktionen som kommer att k\u00f6ras efter att WordPress bekr\u00e4ftar n\u00e4rvaron av en registrerad kortkod.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Kortkodshanterings-funktionen<\/h3>\n
Kortkodshanterings-funktionen definieras som s\u00e5dan:<\/p>\n
function shortcode_handler_function( $atts, $content, $tag ){ }<\/code><\/pre>\n\n
- \n
\n
- \n
\n
- $atts:<\/strong> En associativ matris med attribut (dvs. en matris med nyckel-v\u00e4rdepar). Om du inte definierar n\u00e5gra attribut kommer den som standard att vara en tom str\u00e4ng.<\/li>\n
- $inneh\u00e5ll:<\/strong> Det bifogade inneh\u00e5llet, om du definierar en bifogad kortkod. Det \u00e4r hanterar-funktionens ansvar<\/a> att se till att $content-v\u00e4rdet returneras till utdata.<\/li>\n
- $tag:<\/strong> Kortkodens taggv\u00e4rde(kortkod_namn<\/em> i exemplet ovan). Om tv\u00e5 eller flera kortkoder delar samma callback-funktion (vilket \u00e4r giltigt), hj\u00e4lper $tag-v\u00e4rdet dig att avg\u00f6ra vilken kortkod som utl\u00f6ste hanterar-funktionen.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
API: et analyserar kortkodens tagg, attribut och bifogade inneh\u00e5ll (om det finns n\u00e5got) och skickar v\u00e4rdena vidare till hanterar-funktionen, som bearbetar dem och returnerar en utdata-str\u00e4ng.<\/p>\n
Denna utdata-str\u00e4ng ers\u00e4tter d\u00e4refter kortkods-makrot p\u00e5 webbplatsens frontend. Vad du i slut\u00e4ndan ser i webbl\u00e4saren \u00e4r denna utdata.<\/p>\n
Var ska du l\u00e4gga till dina anpassade kortkodskript?<\/h3>\n
Du kan l\u00e4gga till dina anpassade kortkods-skript i temats functions.php-fil<\/em> eller inkludera dem i ett plugin.<\/p>\n
Om du exempelvis l\u00e4gger till det i en temafil kan du k\u00f6ra add_shortcode()<\/em><\/a> funktionen som den \u00e4r.<\/p>\n
Men om du l\u00e4gger till det i ett plugin rekommenderar vi att du initierar den f\u00f6rst efter att WordPress har laddats helt. Du kan s\u00e4kerst\u00e4lla detta genom att linda in add_shortcode()<\/em> -funktionen i en annan funktion. Detta kallas en wrapper-funktion:<\/p>\n
function shortcodes_init(){\n add_shortcode( 'shortcode_name', 'shortcode_handler_function' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\nFunktionen add_action()<\/em><\/a> hakar i Shortcode_init<\/em> <\/strong>s\u00e5 att den aktiveras f\u00f6rst efter att WordPress har slutf\u00f6rt laddningen (det kallas ”init”-kroken<\/a>).<\/p>\n
S\u00e5 h\u00e4r skapar du en anpassad kortkod i WordPress (nyb\u00f6rjarniv\u00e5)<\/h2>\n
Nu n\u00e4r vi har g\u00e5tt igenom grunderna \u00e4r det dags att skapa en anpassad kortkod.<\/p>\n
F\u00f6r att f\u00f6lja stegen nedan beh\u00f6ver du vara bekant med att arbeta med PHP-kod och redigera dina WordPress-temafiler<\/a>. N\u00e4r du \u00e4r klar med handledningen kommer din f\u00f6rsta anpassade WordPress-kortkod vara redo att anv\u00e4ndas!<\/p>\n
Vi b\u00f6rjar med den enklaste kortkoden och g\u00e5r d\u00e4refter vidare till mer komplexa kortkoder. Njut av dina korta milstolpar p\u00e5 din v\u00e4g till kortkods-briljans!<\/p>\n
Kolla in v\u00e5r video<\/a> – Hur man skapar en anpassad kortkod i WordPress f\u00f6r nyb\u00f6rjare:<\/h3>\n
<\/kinsta-video><\/p>\n Exempel 1: Kortkod som anv\u00e4nder [current_year]<\/h3>\n
L\u00e5t oss skapa en kortkod som heter [current_year] som matar ut det aktuella \u00e5ret p\u00e5 din webbplats.<\/p>\n
Den h\u00e4r kortkoden \u00e4r exempelvis anv\u00e4ndbar om du l\u00e4gger till inneh\u00e5ll p\u00e5 din webbplats som beh\u00f6ver uppdateras varje \u00e5r. Det kan ju bland annat h\u00e4nda att du l\u00e4gger till ett meddelande om upphovsr\u00e4tt i sidfoten p\u00e5 din webbplats.<\/p>\n
Jag kommer att anv\u00e4nda ett barebones-plugin f\u00f6r att l\u00e4gga till mina kortkods-funktioner. Du kan l\u00e4gga till det i ditt temas functions.php-fil<\/em> och f\u00e5 samma resultat, men jag rekommenderar inte detta. Det \u00e4r dock OK f\u00f6r testning och l\u00e4rande!<\/p>\n
![\"Exempel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/Gallery-Shortcode-Output-by-WordPress.jpg\")
![\"Enkel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/BBCode-Shortcode-Examples-Usage-Output.png\")
![\"WordPress-kortkoder](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/How-WordPress-Shortcodes-Work.png\")
![\"Sj\u00e4lvst\u00e4ngande](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/The-Types-of-WordPress-Shortcodes-Tags-Attribute-Value.png\")
![\"L\u00e4gga](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/01\/Adding-Gutenberg-Shortcode-Block.png\")
![\"Gutenbergs](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/01\/Gutenberg-Shortcode-Block.png\")
![\"L\u00e4gga](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/01\/Adding-Shortcode-Classic-Editor-WordPress.png\")
![\"L\u00e4gg](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/01\/Adding-Shortcode-to-Sidebar-Widget-WordPress.png\")
![\"Kortkodens](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/01\/Gallery-Outputted-in-Sidebar-with-Shortcode.png\")