{"id":35719,"date":"2020-01-27T02:08:34","date_gmt":"2020-01-27T01:08:34","guid":{"rendered":"https:\/\/kinsta.com\/?p=63384"},"modified":"2023-08-24T13:46:00","modified_gmt":"2023-08-24T12:46:00","slug":"wordpress-shortcoder","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/","title":{"rendered":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)"},"content":{"rendered":"<p>WordPress shortcodes er en kraftfuld funktion til at lave fede ting med lidt indsats. Du kan stort set g\u00f8re alt med dem. Med shortcoder er det lige s\u00e5 let at integrere interaktive elementer eller oprette komplekse sidelayout, som at inds\u00e6tte en enkelt kodelinie.<\/p>\n<p>Hvis du vil <a href=\"https:\/\/kinsta.com\/blog\/wordpress-photo-gallery-plugins\/\">tilf\u00f8je et galleri<\/a>, skal du blot indtaste f\u00f8lgende kode:<\/p>\n<pre>[gallery ids=\"47 ,86, 92, 64, 48, 75, 89, 80\" columns=\"4\" size=\"medium\"]<\/pre>\n<p>Dette udsender et galleri med de n\u00e6vnte billed-id&#8217;er. Det har 4 kolonner, og deres maksimale st\u00f8rrelse vil v\u00e6re &#8216;medium&#8217; (som defineret af WordPress).<\/p>\n<p>Der er ingen grund til at benytte grim HTML-kode.<\/p>\n<figure style=\"width: 1133px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/eksempel\u2013shortcode-galleriet-3.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/eksempel\u2013shortcode-galleriet-3.jpg\" alt=\"Eksempel p\u00e5 shortcode til galleriet\" width=\"1133\" height=\"333\"><\/a><figcaption class=\"wp-caption-text\">Eksempel p\u00e5 shortcode til galleriet<\/figcaption><\/figure>\n<p>Shortcoder fjerner behovet for komplicerede scripts. Selv hvis du har ringe eller ingen programmeringsf\u00e6rdigheder, kan du nemt tilf\u00f8je dynamisk indhold med deres hj\u00e6lp.<\/p>\n<p>De er meget popul\u00e6re hos <a href=\"https:\/\/kinsta.com\/blog\/hire-wordpress-developer\/\">WordPress-udviklere<\/a>, da de hj\u00e6lper enormt med automatisering af indhold og design. Genvejskoder er til WordPress-udviklere hvad makroer er til dataanalytikere eller tastaturgenveje til professionelle grafiske designere.<\/p>\n<p>I denne vejledning l\u00e6rer du alt, hvad der er at vide om shortcoder. Du finder ud af, hvordan du arbejder med Shortcode API ved at oprette dine helt egne shortcoder. I sidste ende vil vi diskutere fremtiden for shortcoder, og hvor de passer ind med <a href=\"https:\/\/kinsta.com\/blog\/gutenberg-wordpress-editor\/\">WordPress &#8216;nye Block Editor<\/a>.<\/p>\n<p>Begejstret? Lad os komme igang!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Hvad er en Shortcode?<\/h2>\n<p>Kort sag, <strong>shortcode = Shortcut + code.<\/strong><\/p>\n<p>shortcoder bruger typisk firkantede parentesetags [] til at definere, hvordan de er brugt. Hver shortcode udf\u00f8rer en bestemt funktion p\u00e5 et sted. Det kan v\u00e6re s\u00e5 simpelt som formatering af indholdet eller s\u00e5 komplekst som at definere hele webstedets struktur.<\/p>\n<p>For eksempel kan du bruge shortcoder til at indlejre slidere, <a href=\"https:\/\/kinsta.com\/blog\/wordpress-contact-form-plugins\/\">formularer<\/a> eller <a href=\"https:\/\/kinsta.com\/blog\/wordpress-pricing-table-plugins\/\">pricing tables<\/a>. Du kan endda bruge dem til at oprette genanvendelige skabeloner til sidedesign.<\/p>\n<h3>En kort Historie med Shortcoder<\/h3>\n<p>Shortcoder blev f\u00f8rst gjort popul\u00e6re af en online forum-software kaldet Ultimate Bulletin Board (UBB). I 1998 introducerede de <a href=\"https:\/\/www.bbcode.org\/\">BBCode (Bulletin Board Code)<\/a>, en samling brugervenlige tags til brugere til let at formatere deres indl\u00e6g.<\/p>\n<figure style=\"width: 1110px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/formatering-enkle-bbcodes.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/formatering-enkle-bbcodes.png\" alt=\"Nem formatering med enkle BBCodes\" width=\"1110\" height=\"330\"><\/a><figcaption class=\"wp-caption-text\">Nem formatering med enkle BBCodes<\/figcaption><\/figure>\n<p>Som et lightweight markup language fungerer BBCode efter de samme principper som HTML, bortset fra at det er en meget enklere m\u00e5de.<\/p>\n<p>Brug af foruddefinerede tags er ogs\u00e5 meget sikrere, da brugere ikke kan inds\u00e6tte HTML-kode og introducere <a href=\"https:\/\/kinsta.com\/docs\/service-information\/disclose-security-vulnerability\/\">sikkerhedss\u00e5rbarheder<\/a>. For eksempel kan en bruger med ondsindet hensigt bruge &lt;script&gt; -tagget til at udf\u00f8re JavaScript-kode og \u00f8del\u00e6gge webstedets funktionalitet.<\/p>\n<p>Kort efter tilf\u00f8jede andre online forum software som <a href=\"https:\/\/www.phpbb.com\/\">phpBB<\/a>, <a href=\"https:\/\/www.xmbforum2.com\/\">XMB Forum<\/a> og <a href=\"https:\/\/www.vbulletin.com\/\">vBulletin<\/a> BBCode-funktionalitet i deres opslagstavler.<\/p>\n<p>Shortcodes bemyndigede administratorer til at have st\u00f8rre kontrol over, hvad deres brugere kan og ikke kan g\u00f8re. Desuden tillod de brugere at formatere deres indhold gennem enkle tags.<\/p>\n<p>P\u00e5 grund af de samme sikkerhedsm\u00e6ssige \u00e5rsager forhindrer WordPress, at PHP-kode k\u00f8rer p\u00e5 webstedsindhold. For at overvinde denne begr\u00e6nsning introducerede <a href=\"https:\/\/wordpress.org\/news\/2008\/03\/wordpress-25-brecker\/\">WordPress 2.5<\/a> shortcode-funktionaliteten i 2008 med frigivelsen af \u200b\u200b<a href=\"https:\/\/codex.wordpress.org\/Shortcode_API\">Shortcode API<\/a>. Det har vist sig at v\u00e6re en af \u200b\u200bde mest anvendte funktioner fra mange WordPress plugins og temaudviklere.<\/p>\n<h3>Hvad er WordPress-shortcoder?<\/h3>\n<p>WordPress-shortcoder er firkantede bracket strings (<strong>[ ]<\/strong>), der magisk omdannes til noget fascinerende p\u00e5 fronten. De giver brugerne en nem m\u00e5de at oprette og \u00e6ndre kompliceret indhold uden at bekymre sig om komplekse HTML- eller embedkoder.<\/p>\n<figure id=\"attachment_63403\" aria-describedby=\"caption-attachment-63403\" style=\"width: 1110px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/wordpress-shortcoder-enkle-lette-bruge.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63403 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/wordpress-shortcoder-enkle-lette-bruge.png\" alt=\"WordPress-shortcoder er enkle og lette at bruge\" width=\"1110\" height=\"311\"><\/a><figcaption id=\"caption-attachment-63403\" class=\"wp-caption-text\">WordPress-shortcoder er enkle og lette at bruge<\/figcaption><\/figure>\n<h3>De 2 typer shortcoder<\/h3>\n<p>Der er prim\u00e6rt to typer shortcoder i WordPress.<\/p>\n<figure id=\"attachment_63428\" aria-describedby=\"caption-attachment-63428\" style=\"width: 1110px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63428 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/The-Types-of-WordPress-Shortcodes-Tags-Attribute-Value.png\" alt=\"Selvlukkende og lukkende shortcoder kan v\u00e6re gyldige med eller uden attributter.\" width=\"1110\" height=\"350\"><figcaption id=\"caption-attachment-63428\" class=\"wp-caption-text\">Selvlukkende og lukkende shortcoder kan v\u00e6re gyldige med eller uden attributter.<\/figcaption><\/figure>\n<ul>\n<li><strong>Selvlukkende shortcoder<\/strong>: Disse beh\u00f8ver ikke et lukningskode.<\/li>\n<\/ul>\n<p>Eksempel: <strong>Galleri<\/strong> shortcoden beh\u00f8ver ikke et lukningskode. Vi tilf\u00f8jer alt det behov med forskellige attributter.<\/p>\n<ul>\n<li><strong>Lukning af shortcoder<\/strong>: Disse har brug for et lukningskode. Afslutning af shortcoder manipulerer generelt indholdet mellem \u00e5bnings- og lukningskoder.<\/li>\n<\/ul>\n<p>Eksempel: <strong>Caption<\/strong> shortcoden bruges til at vikle en billedtekst omkring ethvert indhold. Det bruges hovedsageligt til at tilf\u00f8je en billedtekst til billeder, men det fungerer med ethvert HTML-element.<\/p>\n<p>Nogle shortcoder fungerer med eller uden attributter. Det afh\u00e6nger af, hvordan de er defineret.<\/p>\n<h2>Standard WordPress-shortcoder<\/h2>\n<p>WordPress leveres med 6 standardshortcoder:<\/p>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Audio_Shortcode\">audio<\/a>: Integrer lydfiler p\u00e5 dit websted. Det inkluderer enkle afspilningskontroller som Play &#038; Pause.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Caption_Shortcode\">caption<\/a>: Pakkede billedtekster omkring dit indhold med det. Det bruges mest til at tilf\u00f8je billedtekst, men du kan bruge det til ethvert HTML-element.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Embed_Shortcode\">embed<\/a>: Udvid funktionen standard oEmbed. Denne shortcode giver dig mulighed for at indstille forskellige attributter til dine integrationer, som at indstille deres maksimale dimensioner.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Gallery_Shortcode\">galleri<\/a>: Inds\u00e6t et simpelt billedgalleri p\u00e5 dit websted. Du kan bruge attributter til at definere, hvilke billeder der bruges og tilpasse, hvordan galleriet ser ud.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Playlist_Shortcode\">playlist<\/a>: Vis en samling lyd- eller videofiler med denne selvomslutende shortcode. Du kan give den en cool &#8216;m\u00f8rk&#8217; tilstand med dens stilattribut.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Video_Shortcode\">video<\/a>: Integrer en videofil og afspil den ved hj\u00e6lp af en simpel videoafspiller. Denne shortcode underst\u00f8tter indlejring af videoer med disse formater: mp4, webm, m4v, webm, ogv, wmv, flv.<\/li>\n<\/ul>\n<p>For flere detaljer om, hvordan du kan bruge standardshortcoder og hvilke attributter de underst\u00f8tter, kan du henvise til de tilknyttede Codex-dokumenter.<\/p>\n<h3>S\u00e5dan bruges WordPress-shortcoder<\/h3>\n<p>Brug af shortcoder i WordPress er en ligetil proces. Men det afh\u00e6nger af, hvor du vil tilf\u00f8je dem p\u00e5 dit websted. S\u00f8rg for at l\u00e6se shortcode-dokumentationen for at forst\u00e5, hvordan den fungerer. L\u00e6r de attributter, den underst\u00f8tter, s\u00e5 du kan f\u00e5 pr\u00e6cist det, du \u00f8nsker.<\/p>\n<h3>Brug af WordPress-shortcoder i Sider og Indl\u00e6g<\/h3>\n<p>G\u00e5 f\u00f8rst til side \/ indl\u00e6gseditoren, hvor du vil inds\u00e6tte shortcoden.<\/p>\n<p>Hvis du bruger Gutenberg-editoren, kan du tilf\u00f8je shortcode tag i den uafh\u00e6ngige shortcodeblokke. Vi kan finde det i afsnittet Widgets.<\/p>\n<figure id=\"attachment_64718\" aria-describedby=\"caption-attachment-64718\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64718 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/tilfojelse-shortcode-blok-gutenberg.png\" alt=\"Tilf\u00f8jelse af en shortcode blok i Gutenberg\" width=\"1100\" height=\"528\"><figcaption id=\"caption-attachment-64718\" class=\"wp-caption-text\">Tilf\u00f8jelse af en shortcode blok i Gutenberg<\/figcaption><\/figure>\n<figure id=\"attachment_64719\" aria-describedby=\"caption-attachment-64719\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64719 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/gutenbergs-dedikerede-shortcode-blok.png\" alt=\"Gutenbergs dedikerede Shortcode-blok\" width=\"1100\" height=\"216\"><figcaption id=\"caption-attachment-64719\" class=\"wp-caption-text\">Gutenbergs dedikerede Shortcode-blok<\/figcaption><\/figure>\n<p>Bruger du stadig <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor (eller plugin<\/a>)? Du kan indtaste dine shortcode-tags p\u00e5 den klassiske m\u00e5de. Et par shortcoder kan endda have en knap i redigeringssk\u00e6rmen for let at inds\u00e6tte dem.<\/p>\n<figure id=\"attachment_64720\" aria-describedby=\"caption-attachment-64720\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64720 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/tilfojelse-shortcode-klassiske-editor.png\" alt=\"Tilf\u00f8jelse af en shortcode i den klassiske editor \" width=\"1100\" height=\"224\"><figcaption id=\"caption-attachment-64720\" class=\"wp-caption-text\">Tilf\u00f8jelse af en shortcode i den klassiske editor<\/figcaption><\/figure>\n<h3>Brug af WordPress Shortcodes i Sidebar Widgets<\/h3>\n<p>Shortcoder kan ogs\u00e5 inds\u00e6ttes i <a href=\"https:\/\/kinsta.com\/blog\/wordpress-widgets\/\">sidebar-widgets<\/a>. For at tilf\u00f8je dem skal du g\u00e5 til <strong>Udseende \u00bb Widgets <\/strong>og tilf\u00f8je en <strong>tekst<\/strong> widget til det afsnit, hvor du vil tilf\u00f8je genvejen.<\/p>\n<figure id=\"attachment_64721\" aria-describedby=\"caption-attachment-64721\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64721 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/tilfoj-shortcode-sidebar-tekst-widget.png\" alt=\"Tilf\u00f8j shortcode i din sidebar med tekst widget\" width=\"1100\" height=\"546\"><figcaption id=\"caption-attachment-64721\" class=\"wp-caption-text\">Tilf\u00f8j shortcode i din sidebar med tekst widget<\/figcaption><\/figure>\n<p>Inds\u00e6t shortcoden inde i tekst widget og gem den. Du kan bes\u00f8ge dit websteds frontend og se din shortcodes output i din sidebar.<\/p>\n<figure id=\"attachment_64722\" aria-describedby=\"caption-attachment-64722\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64722 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/shortcode-produktionen-galleri-sidefeltet.png\" alt=\"shortcode produktionen (galleri) kan ses i sidefeltet\" width=\"1100\" height=\"464\"><figcaption id=\"caption-attachment-64722\" class=\"wp-caption-text\">shortcode produktionen (galleri) kan ses i sidefeltet<\/figcaption><\/figure>\n<p><strong>Bem\u00e6rk<\/strong>: WordPress 4.8 og nyere versioner underst\u00f8tter ikke shortcoder i sidebar-widgets. L\u00e6s <a href=\"https:\/\/make.wordpress.org\/core\/2017\/10\/24\/widget-improvements-in-wordpress-4-9\/\">Widget Improvements in WordPress 4.9<\/a> opdateringen for mere.<\/p>\n<h3>Brug af WordPress Shortcodes i Header og Footer<\/h3>\n<p>WordPress-shortcodes er generelt beregnet til sider, indl\u00e6g og widgets. Men du har en nem m\u00e5de at inds\u00e6tte shortcodes overalt p\u00e5 dit websted.<\/p>\n<p>Lad os sige, at du vil tilf\u00f8je en call to action-knap i din footer eller i alle dine indl\u00e6g f\u00f8r kommentarsektionen. <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_shortcode\/\">Funktionen do_shortcode() callback<\/a> er praktisk her.<\/p>\n<p>Du skal tilf\u00f8je f\u00f8lgende kode til dit temas header.php, footer.php eller en af \u200b\u200bdets skabelonfiler:<\/p>\n<pre><code class=\"language-php\">&lt;?php echo do_shortcode(\"[name_of_your_shortcode]\"); ?&gt;<\/code><\/pre>\n<p>Dette udsender shortcoden p\u00e5 det sted, hvor du indsatte koden.<\/p>\n<p>Du skal inkludere de firkantede parenteser mellem anf\u00f8rselstegnene for at gentage shortcoden. Bare det at inkludere dets navn fungerer ikke.<\/p>\n<p>Ligeledes kan du bruge do_shortcod () callback funktionen til at aktivere shortcoder overalt i WordPress, som i kommentarfeltet.<\/p>\n<h3>En Hurtig Introduktion til Shortcode API<\/h3>\n<p><a href=\"https:\/\/codex.wordpress.org\/Shortcode_API\">WordPress Shortcode API<\/a> definerer, hvordan du kan bruge shortcoder til at tilpasse og udvide dit websteds funktionalitet. Det g\u00f8r det muligt for udviklere at oprette unikt indhold (f.eks. formularer, karruseller, sliders osv.), Som brugerne kan tilf\u00f8je p\u00e5 deres websteder ved at inds\u00e6tte den relevante shortcode.<\/p>\n<p>Du kan tilf\u00f8je n\u00e6sten enhver funktion, du kan forestille dig til dit websted ved hj\u00e6lp af shortcoder.<\/p>\n<p>API underst\u00f8tter b\u00e5de selvlukkende og lukkede shortcoder. Det h\u00e5ndterer al den vanskelige parsing og inkluderer hj\u00e6lperfunktioner til at indstille og hente standardattributter.<\/p>\n<p>Takket v\u00e6re API&#8217;en kan du dykke direkte i at udvikle og tilpasse shortcoder i stedet for at spilde dyrebar tid p\u00e5 at definere regelm\u00e6ssige udtryk for hver shortcode, du laver.<\/p>\n<h3>At Forst\u00e5 det Grundl\u00e6ggende ved Shortcode API<\/h3>\n<p>Hver gang du \u00e5bner en side eller et indl\u00e6g i WordPress, ser det efter registrerede shortcoder, mens du behandler websteds indhold.<\/p>\n<p>Hvis der findes en registreret shortcode, overtager Shortcode API og returnerer output fra shortcoderne. Den returnerede outputstreng erstatter shortcodekoden p\u00e5 det sted, den blev tilf\u00f8jet.<\/p>\n<p>Du registrerer en shortcode i WordPress med <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\">funktionen add_shortcode()<\/a>. S\u00e5dan g\u00f8res det:<\/p>\n<pre><code class=\"language-php\">add_shortcode( 'shortcode_name', 'shortcode_handler_function' );<\/code><\/pre>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>shortcode_name<\/strong>: M\u00e6rket WordPress vil kigge efter, mens indl\u00e6gsindhold analyseres. Shortcode API anbefaler, at du kun bruger sm\u00e5 bogstaver, tal og understregninger til at definere dens v\u00e6rdi (undg\u00e5 bindestreger).<\/li>\n<li><strong>shortcode_handler_function<\/strong>: Den tilbagekaldsfunktion, der udf\u00f8res efter WordPress, bekr\u00e6fter tilstedev\u00e6relsen af \u200b\u200ben registreret shortcode.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Funktionen til shortcoder er defineret som s\u00e5dan:<\/p>\n<pre><code class=\"language-php\">function shortcode_handler_function( $atts, $content, $tag ){ }<\/code><\/pre>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>$atts<\/strong>: En tilknyttet r\u00e6kke af attributter (dvs. en matrix af key-value pairs). Hvis du definerer ingen attributter, vil den som standard v\u00e6re en tom streng.<\/li>\n<li><strong>$content<\/strong>: Det vedlagte indhold, hvis du definerer en vedh\u00e6ftet shortcode. Det er h\u00e5ndtererfunktionens ansvar at sikre, at $ indholdsv\u00e6rdien returneres til output.<\/li>\n<li><strong>$tag<\/strong>: shortcodens tagv\u00e6rdi (shortcodenavn i ovenst\u00e5ende eksempel). Hvis to eller flere shortcoder deler den samme callback unktion (som er gyldig), hj\u00e6lper $ -tagev\u00e6rdien dig med at bestemme, hvilken shortcode udl\u00f8ste behandlingsfunktionen.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>API analyserer shortcodens tag, attributter og lukkede indhold (hvis nogen) ved at omg\u00e5 v\u00e6rdierne til handlerfunktionen, der behandler dem og returnerer en outputstreng.<\/p>\n<p>Denne outputstreng erstatter shortcodemakroen p\u00e5 dit websteds frontend. Hvad du i sidste ende ser i browseren er denne output.<\/p>\n<h3>Hvor kan du Tilf\u00f8je dine Tilpassede Shortcodeskripts?<\/h3>\n<p>Du kan tilf\u00f8je dine brugerdefinerede shortcodeskripts til temas functions.php-fil eller inkludere dem i et plugin.<\/p>\n<p>Hvis du tilf\u00f8jer den til en temafil, kan du k\u00f8re funktionen <a href=\"https:\/\/kinsta.com\/blog\/wordpress-child-theme\/#how-wordpress-chooses-template-files\">add_shortcode()<\/a> som den er.<\/p>\n<p>Men hvis du tilf\u00f8jer det til et plugin, anbefaler jeg dig at initialisere det f\u00f8rst, n\u00e5r WordPress er indl\u00e6st fuldst\u00e6ndigt. Du kan sikre dig, at funktionen add_shortcode() indpakkes i en anden funktion. Dette kaldes en indpakningsfunktion:<\/p>\n<pre><code class=\"language-php\">function shortcodes_init(){\n add_shortcode( 'shortcode_name', 'shortcode_handler_function' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\n<p>The <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener noreferrer\"><em>add_action()<\/em><\/a> function hooks the <em><strong>shortcodes_init<\/strong><\/em> function to fire only after WordPress has finished loading (it\u2019s called the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/init\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u2018init\u2019 hook<\/a>).<\/p>\n<h2>S\u00e5dan Opretter du en Tilpasset Shortcode i WordPress (begynderniveau)<\/h2>\n<p>Nu hvor vi har d\u00e6kket det grundl\u00e6ggende, er det tid til at oprette en brugerdefineret shortcode.<\/p>\n<p>For at f\u00f8lge nedenst\u00e5ende trin skal du kendskab til at arbejde med PHP-kode og <a href=\"https:\/\/kinsta.com\/blog\/edit-wordpress-code\/\">redigere dine WordPress-temafiler<\/a>. N\u00e5r du er f\u00e6rdig med selvstudiet, har du din f\u00f8rste tilpassede WordPress-shortcode, som er klar til at affyre!<\/p>\n<p>Vi starter med den mest enkle shortcode og g\u00e5r derefter mod mere komplekse. Nyd dine korte milep\u00e6le p\u00e5 din vej til shortcoder mestring!<\/p>\n<h3>Eksempel 1: Shortcode ved Hj\u00e6lp af [current_year]<\/h3>\n<p>Lad os oprette en shortcode kaldet current_year], der udsender det aktuelle \u00e5r p\u00e5 din hjemmeside.<\/p>\n<p>Denne shortcode er nyttig, hvis du tilf\u00f8jer indhold til dit websted, der skal opdateres hvert \u00e5r. For eksempel at tilf\u00f8je en copyright-meddelelse til sidens sidefod.<\/p>\n<p>Jeg bruger et barebones-plugin til at tilf\u00f8je mine shortcode-funktioner. Du kan tilf\u00f8je det til dit temas functions.php-fil og f\u00e5 de samme resultater, men jeg anbefaler det ikke. Det er dog OK at teste og l\u00e6re!<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Tag en backup, f\u00f8r du foretager \u00e6ndringer p\u00e5 dit websted. Kinsta leverer <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/wordpress-backups\/#wordpress-backup\">automatiske backups til alle sine kunder<\/a>.\u00a0<\/p>\n<\/aside>\n\n<p>Lad os komme i gang ved at oprette et plugin. Opret en ny mappe i dit<strong> \/wp-content\/plugins\/ <\/strong>bibliotek.<\/p>\n<figure id=\"attachment_64723\" aria-describedby=\"caption-attachment-64723\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64723 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/bemaerk-placeringen-plugin-biblioteket.png\" alt=\"Bem\u00e6rk placeringen af plugin-biblioteket\" width=\"1100\" height=\"478\"><figcaption id=\"caption-attachment-64723\" class=\"wp-caption-text\">Bem\u00e6rk placeringen af plugin-biblioteket<\/figcaption><\/figure>\n<p>Jeg navngiver mit plugin &#8220;salcodes&#8221;, men du kan navngive det, hvad du vil.<\/p>\n<p>Opret en PHP-fil med det samme navn i <strong>salcodes<\/strong> plugin-biblioteket (<strong>salcodes.php<\/strong>). N\u00e5r det er gjort, skal du tilf\u00f8je f\u00f8lgende header til din plugins fil:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\n\/*\nPlugin Name:  Salcodes\nVersion: 1.0\nDescription: Output the current year in your WordPress site.\nAuthor: Salman Ravoof\nAuthor URI: https:\/\/www.salmanravoof.com\/\nLicense: GPLv2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: salcodes\n*\/<\/code><\/pre>\n<p>Denne enkle plugin-header er god nok til vores form\u00e5l. Du kan l\u00e6re mere om <a href=\"https:\/\/developer.wordpress.org\/plugins\/the-basics\/header-requirements\/\">krav til plugin-header<\/a> i WordPress Codex. Gem denne fil, og g\u00e5 derefter til dit <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress-dashboard<\/a> for at aktivere pluginet.<\/p>\n<p>Lad os registrere shortcoden og dens behandlingsfunktion. For at g\u00f8re det, tilf\u00f8j f\u00f8lgende kode til din plugin-fil:<\/p>\n<pre><code class=\"language-php\">\/**\n * [current_year] returns the Current Year as a 4-digit string.\n * @return string Current Year\n*\/\n\nadd_shortcode( 'current_year', 'salcodes_year' );\nfunction salcodes_init(){\n function salcodes_year() {\n return getdate()['year'];\n }\n}\nadd_action('init', 'salcodes_init');\n\n\/** Always end your PHP files with this closing tag *\/\n?&gt;<\/code><\/pre>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><a href=\"https:\/\/www.php.net\/manual\/en\/function.return.php\">@return-tag<\/a> i PHP-kommentaren definerer typen af \u200b\u200breturneret output. Den efterf\u00f8lges af en kort beskrivelse af det samme.<\/li>\n<li><strong>current_year<\/strong> er shortcodekoden eller navnet. Dette definerer det selvlukkende tag, du har brug for at tilf\u00f8je i dit indhold, som i dette tilf\u00e6lde ville v\u00e6re [actual_year].<\/li>\n<li><strong>salcodes_year<\/strong> er navnet p\u00e5 shortcode handler function, der returnerer outputstrengen. Vi definerer denne callback funktion p\u00e5 de n\u00e6ste linjer. Da vi opretter en simpel selvlukkende shortcode, beh\u00f8ver du ikke videregive den nogle variable v\u00e6rdier som $ attributter, $ indhold eller $ tag.<\/li>\n<li><strong>salcodes_init<\/strong> er den indpakningsfunktion, der er koblet til &#8216;init&#8217; for at sikre, at shortcoden er registreret og k\u00f8res f\u00f8rst, n\u00e5r WordPress er f\u00e6rdig med indl\u00e6sning. WordPress &#8216;indbyggede <strong>add_action()<\/strong> -funktion g\u00f8r dette muligt.<\/li>\n<li><strong>getdate()<\/strong> er en PHP-funktion, der returnerer en matrix med datooplysninger om det aktuelle tidsstempel. \u00c5rsn\u00f8glen har det aktuelle \u00e5rs v\u00e6rdi (som en 4-cifret streng). S\u00e5 <strong>getdate()[\u2018year\u2019]<\/strong> returnerer det aktuelle \u00e5r. Denne output er n\u00f8jagtigt, hvad vi \u00f8nsker.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Gem din plugin-fil. Det er nu tid til at teste, om shortcoden fungerer som tilsigtet.<\/p>\n<p>Tilf\u00f8j shortcoden overalt p\u00e5 dit websted (side, indl\u00e6g, sidebar-widget osv.). Jeg tilf\u00f8jer det til mit websteds sidebar tekst-widget.<\/p>\n<figure id=\"attachment_63394\" aria-describedby=\"caption-attachment-63394\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/test-tilpassede-shortcode-tilfoje-webstedet.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63394 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/test-tilpassede-shortcode-tilfoje-webstedet.png\" alt=\"Test af den tilpassede shortcode ved at tilf\u00f8je den til webstedet.\" width=\"1100\" height=\"542\"><\/a><figcaption id=\"caption-attachment-63394\" class=\"wp-caption-text\">Test af den tilpassede shortcode ved at tilf\u00f8je den til webstedet.<\/figcaption><\/figure>\n<p>Og som forventet fungerer det perfekt.<\/p>\n<figure id=\"attachment_64724\" aria-describedby=\"caption-attachment-64724\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64724 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/output-arets-shortcode.png\" alt=\"Output af \u00e5rets shortcode\" width=\"1100\" height=\"542\"><figcaption id=\"caption-attachment-64724\" class=\"wp-caption-text\">Output af \u00e5rets shortcode<\/figcaption><\/figure>\n<p>Tillykke med at n\u00e5 din f\u00f8rste milep\u00e6l!<\/p>\n<p>Den shortcode, du lige har oprettet, har ikke nogen <strong>$attributs<\/strong> eller <strong>$content<\/strong> variabler tilknyttet den. Du l\u00e6rer, hvordan du bruger dem i de f\u00f8lgende eksempler.<\/p>\n<h3>Eksempel 2: Shortcode til en CTA-knap<\/h3>\n<p>Lad os oprette en tilpasset CTA-knap-kode. Denne lukker ogs\u00e5 selv (beklager <strong>$content<\/strong>, du skal holde igen til n\u00e6ste gang).<\/p>\n<p>Jeg \u00f8nsker, at brugere skal kunne tilpasse CTA-knappens st\u00f8rrelse og farve med shortcode-attributterne.<\/p>\n<p>Da den endelige output er et knap-element, kan dets HTML-attributter som <strong>href<\/strong>, <strong>id, class, target &#038; label <\/strong>bruges til at tilpasse det med lethed.<\/p>\n<p>Du kan bruge <strong>id-<\/strong> og <strong>class <\/strong>attributterne til at style knappen, da de begge er almindelige CSS-v\u00e6lgere.<\/p>\n<p>Jeg indpakker ikke min handler funktionen her for at holde tingene lette at forklare.<\/p>\n<pre><code class=\"language-php\">\/**\n * [cta_button] returns the HTML code for a CTA Button.\n * @return string Button HTML Code\n*\/\n\nadd_shortcode( 'cta_button', 'salcodes_cta' );\n\nfunction salcodes_cta( $atts ) {\n $a = shortcode_atts( array(\n 'link' =&gt; '#',\n 'id' =&gt; 'salcodes',\n 'color' =&gt; 'blue',\n 'size' =&gt; '',\n 'label' =&gt; 'Button',\n 'target' =&gt; '_self'\n ), $atts );\n $output = '&lt;p&gt;&lt;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']) . '\"&gt;' . esc_attr( $a['label'] ) . '&lt;\/a&gt;&lt;\/p&gt;';\n return $output;\n}<\/code><\/pre>\n<p>Woah, der er meget at pakke ud her. Jeg f\u00e5r forklare det linje for linje, s\u00e5 du kan forst\u00e5, hvordan det fungerer.<\/p>\n<ul>\n<li>Vi har d\u00e6kket funktionen<strong> add_shortcode()<\/strong>, og hvordan den fungerer i det foreg\u00e5ende afsnit.<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/shortcode_atts\/\">shortcode_atts()<\/a> er en WordPress-funktion, der kombinerer brugerens shortcode-attributter med kendte attributter. Det udfylder standardv\u00e6rdier efter behov (som du ogs\u00e5 kan indstille dig selv). Resultatet vil v\u00e6re en matrix, der indeholder hver n\u00f8gle fra de kendte attributter, flettet med v\u00e6rdier fra brugerdefinerede shortcodeattributter.<\/li>\n<li>Inde i shortcode handler-funktionen definerer vi en variabel (<strong>$a<\/strong>) og tildeler den til den matrix, der er returneret af shortcode_atts(). Vi tildeler attributterne deres standardv\u00e6rdier med syntaks: &#8216;<strong>attribute&#8217; =&gt;default-value<\/strong>i&#8217;. I ovenst\u00e5ende kode indstiller vi for eksempel standardv\u00e6rdien for attribut-etiketten til knap med syntaksen <strong>&#8216;label&#8217; =&gt; &#8216;button&#8217;<\/strong>.<\/li>\n<li>Vi kan udtr\u00e6kke v\u00e6rdierne for hver attribut-n\u00f8gle med PHP-syntax for arrays: <strong>$a[\u2018attribut\u2019]<\/strong>.<\/li>\n<li>Variablen <strong>$output<\/strong> gemmer HTML-koden for knapelementet (&lt;a&gt; tag med &#8216;button&#8217;-klassen). Det er den streng, der endelig er returneret af funktionen.<\/li>\n<li>Hvis du vil indstille standardlinket til at v\u00e6re webstedets hjemmeside-URL, kan du g\u00f8re brug af <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/home_url\/\">home_url()<\/a> WordPress-funktionen.<\/li>\n<\/ul>\n<p>Lad os pr\u00f8ve at bruge shortcoden som den er, uden attributter defineret, og se, hvad der er angivet.<\/p>\n<figure id=\"attachment_63392\" aria-describedby=\"caption-attachment-63392\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/tilfojer-shortcoden-sidebar-tekst-widget-teste.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63392 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/tilfojer-shortcoden-sidebar-tekst-widget-teste.png\" alt=\"Jeg tilf\u00f8jer shortcoden til en sidebar tekst-widget for at teste den.\" width=\"1100\" height=\"578\"><\/a><figcaption id=\"caption-attachment-63392\" class=\"wp-caption-text\">Jeg tilf\u00f8jer shortcoden til en sidebar tekst-widget for at teste den.<\/figcaption><\/figure>\n<p>Hvis du undrer dig over, hvad de dobbelte firkantede parenteser er beregnet til (<strong>[[<\/strong>cta_button<strong>]]<\/strong>), kaldes de en <a href=\"https:\/\/codex.wordpress.org\/Shortcode#Escaping_Shortcodes\">escaping shortcode<\/a>. De hj\u00e6lper dig med at udskrive enhver registreret shortcode p\u00e5 dit websted som almindelig tekst, som p\u00e5 billedet herunder.<\/p>\n<figure id=\"attachment_64725\" aria-describedby=\"caption-attachment-64725\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-64725 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/output-cta-knap-shortcode-viser-fungerer-perfekt-forventet.jpg\" alt=\"Output af CTA-knap shortcode, der viser, at den fungerer perfekt som forventet\" width=\"1100\" height=\"522\"><figcaption id=\"caption-attachment-64725\" class=\"wp-caption-text\">Output af CTA-knap shortcode, der viser, at den fungerer perfekt som forventet<\/figcaption><\/figure>\n<figure id=\"attachment_63390\" aria-describedby=\"caption-attachment-63390\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/html-output-cta-knappen-attributter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63390 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/html-output-cta-knappen-attributter.png\" alt=\"HTML-output fra CTA-knappen uden attributter.\" width=\"1100\" height=\"432\"><\/a><figcaption id=\"caption-attachment-63390\" class=\"wp-caption-text\">HTML-output fra CTA-knappen uden attributter.<\/figcaption><\/figure>\n<p>Brugere kan tilpasse st\u00f8rrelsen og farven p\u00e5 knappen med shortcoden. Vi indstiller allerede deres standardv\u00e6rdier i behandlingsfunktionen, men vi er n\u00f8dt til at <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\">registrere og indstille stylesheet<\/a> til listen over tilg\u00e6ngelige ressourcer. Dette stylesheet skal have alle klasser defineret i shortcoden.<\/p>\n<p>Du kan ogs\u00e5 indstille disse klasser i dit temas globale stylesheet, men det anbefales at indl\u00e6se dem separat. Dette sikrer, at selv hvis du <a href=\"https:\/\/kinsta.com\/blog\/change-wordpress-theme\/\">\u00e6ndrer<\/a> eller <a href=\"https:\/\/kinsta.com\/blog\/how-to-update-wordpress-theme\/\">opdaterer dit WordPress-tema<\/a>, indl\u00e6ses disse klasser stadig sammen med shortcoden.<\/p>\n<pre><code class=\"language-php\">\/** Enqueuing the Stylesheet for the CTA Button *\/\n\nfunction salcodes_enqueue_scripts() {\n global $post;\n if( is_a( $post, 'WP_Post' ) && has_shortcode( $post-&gt;post_content, 'cta_button') ) {\n wp_register_style( 'salcodes-stylesheet',\u00a0 plugin_dir_url( __FILE__ ) . 'css\/style.css' );\n\u00a0 \u00a0  wp_enqueue_style( 'salcodes-stylesheet' );\n }\n}\nadd_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');<\/code><\/pre>\n<p>Funktionen <strong>salcodes_enqueue_scripts()<\/strong> definerer den globale variabel <strong>$pos<\/strong>t og bekr\u00e6fter derefter to betingelser via:<\/p>\n<ul>\n<li><strong>is_a()<\/strong>: kontrollerer, om<strong> $post<\/strong> er en forekomst af <strong>WP_Post<\/strong> objektet. Det henviser til alle posttyper i WordPress.<\/li>\n<li><strong>has_shortcode()<\/strong>: kontrollerer, om indholdet af indl\u00e6gget indeholder <strong>[cta_button] <\/strong>shortcode.<\/li>\n<\/ul>\n<p>Hvis begge betingelser er rigtige, registrerer og udskriver funktionen <strong>style.css<\/strong> stylesheet, der er inkluderet i <strong>CSS<\/strong>-mappen. Funktionen <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/plugin_dir_url\/\">plugin_dir_url($ fil)<\/a> g\u00f8r det nemt at f\u00e5 URL&#8217;en til plugin-biblioteket.<\/p>\n<p>Jeg vil ikke vise dig CSS-koden her, men du kan finde den i kildekoden, der er knyttet til slutningen af dette afsnit.<\/p>\n<p>Lad os til sidst teste <strong>[cta_button]<\/strong> -koden ved at tilf\u00f8je den til indholdet af indl\u00e6gget:<\/p>\n<figure id=\"attachment_63389\" aria-describedby=\"caption-attachment-63389\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/bemaerk-tilpassede-link-farve-st\u00f8rrelse-etiketattributter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63389 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/bemaerk-tilpassede-link-farve-st\u00f8rrelse-etiketattributter.png\" alt=\"Bem\u00e6rk det tilpassede link, farve, st\u00f8rrelse og etiketattributter.\" width=\"1100\" height=\"238\"><\/a><figcaption id=\"caption-attachment-63389\" class=\"wp-caption-text\">Bem\u00e6rk det tilpassede link, farve, st\u00f8rrelse og etiketattributter.<\/figcaption><\/figure>\n<p>Billedet herunder viser, hvordan CTA-knappen ser ud p\u00e5 fronten:<\/p>\n<figure id=\"attachment_63388\" aria-describedby=\"caption-attachment-63388\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/cta-knappen-ny-url-farve-st\u00f8rrelse-etiket.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63388 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/cta-knappen-ny-url-farve-st\u00f8rrelse-etiket.png\" alt=\"CTA-knappen har nu en ny URL, farve, st\u00f8rrelse og etiket.\" width=\"1100\" height=\"238\"><\/a><figcaption id=\"caption-attachment-63388\" class=\"wp-caption-text\">CTA-knappen har nu en ny URL, farve, st\u00f8rrelse og etiket.<\/figcaption><\/figure>\n<p>Nu, hvor du har l\u00e6rt, hvordan du definerer tilpassede attributter og inkluderer stylesheets, kan du f\u00f8je forskellige andre funktionaliteter til din CTA-knapkode. For eksempel kan du give dine brugere muligheden for at tilf\u00f8je animationer, hover-effekter og forskellige andre knapformater.<\/p>\n<h3>Eksempel 3: Shortcode ved Hj\u00e6lp af $content<\/h3>\n<p>For vores sidste eksempel, lad os opbygge en lukkende shortcode kaldet <strong>[boxed]<\/strong>, der udsender alt indhold mellem dets tags i en boks med farverige titler.<\/p>\n<p>Lad os komme i gang ved at registrere shortcoden og definere dens handler funktion.<\/p>\n<pre><code class=\"language-php\">\/**\n * [boxed] returns the HTML code for a content box with colored titles.\n * @return string HTML code for boxed content\n*\/\n\nadd_shortcode( 'boxed', 'salcodes_boxed' );\n\nfunction salcodes_boxed( $atts, $content = null, $tag = '' ) {\n $a = shortcode_atts( array(\n 'title' =&gt; 'Title',\n 'title_color' =&gt; 'white',\n 'color' =&gt; 'blue',\n ), $atts );\n \n $output = '&lt;div class=\"salcodes-boxed\" style=\"border:2px solid ' . esc_attr( $a['color'] ) . ';\"&gt;'.'&lt;div class=\"salcodes-boxed-title\" style=\"background-color:' . esc_attr( $a['color'] ) . ';\"&gt;&lt;h3 style=\"color:' . esc_attr( $a['title_color'] ) . ';\"&gt;' . esc_attr( $a['title'] ) . '&lt;\/h3&gt;&lt;\/div&gt;'.'&lt;div class=\"salcodes-boxed-content\"&gt;&lt;p&gt;' . esc_attr( $content ) . '&lt;\/p&gt;&lt;\/div&gt;'.'&lt;\/div&gt;';\n \n return $output;\n}<\/code><\/pre>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>content = nul<\/strong>l: dette registrerer shortcoden som en lukkende type. Du kan bruge variablen <strong>$content<\/strong> i din handle-rfunktion til at \u00e6ndre din output, som du \u00f8nsker.<\/li>\n<li><strong>$tag = \u201d<\/strong>: dette definerer shortcodens <strong>$tag<\/strong>-variabel. Det er ikke n\u00f8dvendigt i dette eksempel, men det er en god praksis at medtage det.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>I dette eksempel \u00e6ndrer vi indholdet ved hj\u00e6lp af inline CSS-stylesheets.<\/p>\n<p>Styles for alle klasser, der er brugt inden for shortcoden, registreres og indvindes, som vi gjorde i det forrige shortcodeksempel.<\/p>\n<p>Men at have to shortcoder bruge det samme stylesheet betyder, at du skal indl\u00e6se det, hvis en af dem bruges. S\u00e5 lad os opdatere funktionen <strong>salcodes_enqueue_scripts()<\/strong>:<\/p>\n<pre><code class=\"language-php\">\/** Enqueuing the Stylesheet for Salcodes *\/\n\nfunction salcodes_enqueue_scripts() {\n global $post;\n $has_shortcode = has_shortcode( $post-&gt;post_content, 'cta_button' ) || has_shortcode( $post-&gt;post_content, 'boxed' );\n if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {\n wp_register_style( 'salcodes-stylesheet',\u00a0 plugin_dir_url( __FILE__ ) . 'css\/style.css' );\n\u00a0 \u00a0  wp_enqueue_style( 'salcodes-stylesheet' );\n }\n}\nadd_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');<\/code><\/pre>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>$has_shortcode<\/strong>: en brugerdefineret variabel, der kontrollerer, om en af shortcoderne findes p\u00e5 siden \/ indl\u00e6gget. || (ELLER operat\u00f8r) g\u00f8r det muligt.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Lad os tage vores <strong>[boxed]<\/strong> shortcode ud p\u00e5 en tur.<\/p>\n<figure id=\"attachment_63386\" aria-describedby=\"caption-attachment-63386\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/tilfoj-boksede-shortcode-sammen-titel-titel_farve-farveattributter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63386 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/tilfoj-boksede-shortcode-sammen-titel-titel_farve-farveattributter.png\" alt=\"Tilf\u00f8j den boksede shortcode sammen med en titel, titel_farve og farveattributter.\" width=\"1100\" height=\"316\"><\/a><figcaption id=\"caption-attachment-63386\" class=\"wp-caption-text\">Tilf\u00f8j den boksede shortcode sammen med en titel, titel_farve og farveattributter.<\/figcaption><\/figure>\n<p>Sk\u00e6rmbillede nedenfor viser den output, vi f\u00e5r.<\/p>\n<figure id=\"attachment_63385\" aria-describedby=\"caption-attachment-63385\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/slet-ikke-svaert-smuk-boks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-63385 size-full\" src=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/slet-ikke-svaert-smuk-boks.png\" alt=\"Det er slet ikke s\u00e5 sv\u00e6rt at f\u00e5 en smuk boks!\" width=\"1100\" height=\"316\"><\/a><figcaption id=\"caption-attachment-63385\" class=\"wp-caption-text\">Det er slet ikke s\u00e5 sv\u00e6rt at f\u00e5 en smuk boks!<\/figcaption><\/figure>\n<p>Nu, hvor du har l\u00e6rt, hvordan du opretter dine egne shortcoder, kan du t\u00e6nke ud af <strong>[boksen]<\/strong> og give dem dit eget spin. Glem ikke at dele dine kreationer med os!<\/p>\n<p>Hvis du vil, kan du downloade kildekoden Shortcode Plugin <a href=\"https:\/\/github.com\/SalmanRavoof\/salcodes\">herfra<\/a>.<\/p>\n<h2>WordPress-shortcoder: Fordele imod Ulemper<\/h2>\n<h3>Fordelene<\/h3>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Shortcoder forenkler tilf\u00f8jelsen af \u200b\u200bkomplekse funktioner p\u00e5 WordPress-websteder. Du kan tilf\u00f8je n\u00e6sten alt ved at skrive en enkelt kodelinie.<\/li>\n<li>Shortcoder automatiserer udviklingsarbejdsgangen. De eliminerer behovet for at skrive komplekse scripts, hver gang du vil inds\u00e6tte en bestemt funktion.<\/li>\n<li>Shortcoder er mere brugervenlige end at tilf\u00f8je HTML-kode eller PHP-scripts.<\/li>\n<li>Shortcoder kan pakkes ind i plugins. Selv hvis du opdaterer WordPress eller \u00e6ndrer \/ opdaterer dit tema, vil shortcoderne stadig v\u00e6re gyldige og forts\u00e6tte med at arbejde som de gjorde f\u00f8r.<\/li>\n<li>Bundling af shortcoder inde i plugins g\u00f8r dem nemme at bruge p\u00e5 flere WordPress-websteder. Hvis du er en udvikler, der h\u00e5ndterer mange websteder, er det en livredder at have alle dine tilpassede shortcoder klar til at k\u00f8re.<\/li>\n<li>Da shortcoder ogs\u00e5 accepterer attributter, kan brugerne \u00e6ndre, hvordan den samme shortcode opf\u00f8rer sig ved blot at \u00e6ndre dens attributindstillinger.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Ulemperne<\/h3>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Shortcoder er ikke intuitive til brug for slutbrugeren, is\u00e6r hvis mange af dem bruges p\u00e5 en side. I s\u00e5danne tilf\u00e6lde er de mere velegnede til udviklere.<\/li>\n<li>Det er sv\u00e6rt at fort\u00e6lle, hvad en shortcode g\u00f8r bare ved at se p\u00e5 den. WordPress-kerneteamet har med rette navngivet dem &#8220;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/contributors\/design\/\">mystery meat embed codes<\/a>&#8221; af denne n\u00f8jagtige grund.<\/li>\n<li>Shortcoder, der leveres sammen med temaer, stopper med at fungere, hvis du \u00e6ndrer dit tema.<\/li>\n<li>Shortcoder er tvetydige med hensyn til deres syntaks. For eksempel underst\u00f8tter nogle af dem valgfri lukning, s\u00e5 du kan bruge dem som enten selvlukkende eller lukkende eller endda begge dele, hvis de er indlejret. Du kan g\u00e6tte, hvordan det kan blive super forvirrende super hurtigt.<\/li>\n<li>Shortcoder kan \u00f8del\u00e6gge HTML p\u00e5 grund af modstridende tags eller interoperabilitets-problemer. Det er aldrig et godt syn at se dem p\u00e5 ethvert websteds frontend.<\/li>\n<li>Shortcoder tilf\u00f8jer en ekstra belastning p\u00e5 din server. Efterh\u00e5nden som antallet af shortcoder p\u00e5 din side \/ indl\u00e6g \u00f8ges, indl\u00e6ses dette ogs\u00e5. For mange shortcoder kan bringe dit websted til en gennemgang (f.eks. Output fra de fleste <a href=\"https:\/\/kinsta.com\/blog\/wordpress-page-builders\/\">page builders<\/a>).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Shortcodes og Gutenberg Blocks<\/h2>\n<p>Introduktion af Gutenberg reducerede \u00f8nsket om shortcoder. Brugere kan nu <a href=\"https:\/\/wordpress.org\/gutenberg\/\">tilf\u00f8je blokke direkte fra redigeringsgr\u00e6nsefladen<\/a> i stedet for at h\u00e5ndtere shortcodemarkeringer, uanset hvor enkelt det er.<\/p>\n<p>Og hvis du vil tilf\u00f8je kortnumre, kommer Gutenberg endda med en dedikeret blok til at tilf\u00f8je shortcoder. Blokke er de nye shortcoder.<\/p>\n<blockquote><p>&#8220;Hvis du kunne g\u00f8re det med shortcoder, kan du g\u00f8re det som en blok.&#8221; &#8211; <a href=\"https:\/\/wordpress.org\/support\/topic\/shortcodes-vs-blocks-2\/#post-11577526\">James Huff, lykkeingeni\u00f8r hos Automattic<\/a><\/p><\/blockquote>\n<p>Det forklarer, hvorfor alle <a href=\"https:\/\/calderaforms.com\/2019\/01\/convert-shortcode-gutenberg-block\/\">de popul\u00e6re shortcodes konverteres til blokke<\/a>. Mange WordPress-udviklere er skiftet hen imod at f\u00e5 deres produkter og tjenester udelukkende til at arbejde sammen med blokeditoren (Gutenberg).<\/p>\n<p>Men det betyder ikke, det er verdens ende for shortcoder. WordPress-kerneteamet har lovet mange forbedringer af blokeditoren, som du kunne se i Twenty Twenty, men indtil da er shortcoder her for at blive!<\/p>\n\n<h2>Resum\u00e9<\/h2>\n<p>Det er nemt at tilf\u00f8je kompleks funktionalitet overalt til dit WordPress-sted med shortcoder. De giver brugerne easy-to-type tags, der kan bruges uden at bekymre sig om at rode med komplekse koder.<\/p>\n<p>Selvom der muligvis ikke er nogen genveje i livet, er der bestemt mange genveje, du kan bruge i WordPress. Mine favoritter er <a href=\"https:\/\/wordpress.org\/plugins\/shortcodes-ultimate\/\">Shortcodes Ultimate<\/a> og <a href=\"https:\/\/wordpress.org\/plugins\/wc-shortcodes\/\">Shortcodes af Angie Makes<\/a>.<\/p>\n<p>Og hvis du ikke kan finde den, du leder efter, kan du oprette en selv.<\/p>\n<p>Du kan endda tage en genvej for at oprette din brugerdefinerede genvej ved hj\u00e6lp af <a href=\"https:\/\/wordpress.org\/plugins\/shortcoder\/\">Shortcoder-plugin<\/a>. Det tager sig af alle de vigtigste ting for dig. Og husk: livet er kort, brug shortcoder!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress shortcodes er en kraftfuld funktion til at lave fede ting med lidt indsats. Du kan stort set g\u00f8re alt med dem. Med shortcoder er det &#8230;<\/p>\n","protected":false},"author":117,"featured_media":35740,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[196,121],"topic":[754],"class_list":["post-35719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-shortcodes","tag-wptips","topic-wordpress-udvikling"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)<\/title>\n<meta name=\"description\" content=\"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)\" \/>\n<meta property=\"og:description\" content=\"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-27T01:08:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T12:46:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)\",\"datePublished\":\"2020-01-27T01:08:34+00:00\",\"dateModified\":\"2023-08-24T12:46:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\"},\"wordCount\":4013,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg\",\"keywords\":[\"shortcodes\",\"wptips\"],\"articleSection\":[\"Wordpress Udvikling\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\",\"name\":\"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg\",\"datePublished\":\"2020-01-27T01:08:34+00:00\",\"dateModified\":\"2023-08-24T12:46:00+00:00\",\"description\":\"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress udvikling\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/wordpress-udvikling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/dk\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)","description":"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/","og_locale":"da_DK","og_type":"article","og_title":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)","og_description":"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)","og_url":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2020-01-27T01:08:34+00:00","article_modified_time":"2023-08-24T12:46:00+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Salman Ravoof","Estimeret l\u00e6setid":"22 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)","datePublished":"2020-01-27T01:08:34+00:00","dateModified":"2023-08-24T12:46:00+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/"},"wordCount":4013,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg","keywords":["shortcodes","wptips"],"articleSection":["Wordpress Udvikling"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/","url":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/","name":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg","datePublished":"2020-01-27T01:08:34+00:00","dateModified":"2023-08-24T12:46:00+00:00","description":"WordPress shortcodes g\u00f8r dit liv lettere. L\u00e6r, hvad de er, og hvordan du opretter dine tilpassede WordPress shortcodes med denne vejledning (og kodeeksempler)","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/01\/wordpress-shortcoder.jpg","width":1460,"height":730,"caption":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"WordPress udvikling","item":"https:\/\/kinsta.com\/dk\/emner\/wordpress-udvikling\/"},{"@type":"ListItem","position":3,"name":"Den Ultimative Guide til WordPress-shortcoder (med Eksempler til Oprettelse af dine Egne)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"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.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/dk\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/35719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=35719"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/35719\/revisions"}],"predecessor-version":[{"id":51110,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/35719\/revisions\/51110"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/nl"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/it"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/dk"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/fr"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/translations\/se"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/35719\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/35740"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=35719"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=35719"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=35719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}