7 viktiga tips för att använda kortkoder i WordPress

Oavsett om du är en erfaren WordPress-användare eller en komplett nybörjare, kan användning av kortkoder låsa upp nya sätt att anpassa din webbplats utan någon kodningskunskap.

Kortkoder låter dig lägga till olika funktioner i inlägg, sidor och widgetar utan att faktiskt skriva någon kod. Många WordPress-plugins och teman använder också kortkoder för att lägga till olika element, som prislistor och evenemangskalendrar.

På WPBeginner har vi konsekvent använt kortkoder och kortkodspluginer när vi byggt WordPress-sidor för våra kunder eller testat dem för våra läsare. Under tiden har vi lärt oss några sätt att göra användningen av kortkoder enklare och mer effektiv.

I den här artikeln delar vi med oss av några viktiga tips för att använda kortkoder i WordPress.

Vad är kortkoder i WordPress?

I WordPress är kortkoder små kodavsnitt som är inneslutna i hakparenteser som låter dig lägga till dynamiskt innehåll eller funktionalitet till dina inlägg, sidor eller widgets.

Här är ett exempel:

[example_shortcode]

När du lägger till innehåll på en WordPress-webbplats går det automatiskt igenom säkerhetskontroller och filter för att säkerställa att ingen skadlig kod hamnar i inlägg, sidor eller kommentarer. Det betyder att du inte kan skriva kod direkt i dessa områden.

Det finns dock tillfällen då du kan behöva lägga till specifik kod i dessa avsnitt. Kortkoder ger ett sätt att göra det.

De fungerar som genvägar för att lägga till avancerade funktioner, som vackra responsiva sliders, kontaktformulär, bildgallerier eller inbäddade videor, på ett enkelt och användarvänligt sätt.

Till exempel, istället för att manuellt bädda in ett komplext HTML- eller JavaScript-utdrag, kan du använda en kortkod för att få samma resultat med bara en textrad. Detta gör kortkoder otroligt användbara för både nybörjare och experter.

Men även om kortkoder är lätta att använda, kan kunskap om de bästa sätten att lägga till och hantera dem spara tid, förbättra ditt arbetsflöde och förhindra problem.

Med det sagt, låt oss titta på några tips för att använda kortkoder i WordPress. Du kan klicka på länkarna nedan för att hoppa till valfritt tips:

• Vet när du inte ska använda kortkoder
• Framtidssäkra dina kortkoder
• Hur man söker efter kortkoder i ditt WordPress-tema
• Använda kortkoder i widgets
• Tips 5: Lägg till kortkod i temafiler
• Tips 6: Dölja en trasig kortkod
• Tips 7: Hitta kortkoder som används i inlägg
• Bonus: Vanliga kortkodsfel att undvika

Tips 1: Vet när du inte ska använda kortkoder

Kortkoder kan vara otroligt användbara, men att förlita sig på dem för varje inlägg eller sida är inte alltid den bästa idén. Många WordPress-teman hävdar att de har över 200 kortkoder, men att använda för många av dem kan skapa problem på lång sikt.

Till exempel, om du använder ett tema för att skapa kortkoder för att skapa knappar för uppmaning till handling (CTA) i dina inlägg, då binder du dig till det temat. Om du någonsin byter tema kan dessa kortkoder sluta fungera, vilket lämnar trasigt eller oläsligt innehåll kvar.

Om du råkar leta efter ett sätt att lägga till CTA-knappar i dina inlägg, bör du läsa vår guide om att lägga till CSS-knappar i WordPress utan att använda kortkoder.

Du kan också använda det inbyggda WordPress-knappblocket för att skapa call-to-action-knappar utan någon kod.

På samma sätt, om du använder kortkoder för repetitiva element som bannerannonser eller signaturtext i slutet av dina inlägg, rekommenderar vi att du överväger ett annat tillvägagångssätt. Du kan använda ett WordPress-plugin eller arbeta med en utvecklare för att lägga till dessa element på din blogg.

Den här metoden säkerställer konsekvent styling och gör det enklare att uppdatera eller ta bort element i framtiden.

Slutligen, kom ihåg att kortkoder utspridda över inlägg kan vara besvärliga att ta bort om du bestämmer dig för att sluta använda dem. Att redigera varje inlägg manuellt är tidskrävande.

Därför är det viktigt att vara försiktig med hur och var du använder kortkoder. Håll dig till att bara lägga till dem där de är nödvändiga, eftersom överanvändning kan skapa större problem senare.

Tips 2: Framtidssäkra dina kortkoder

Kortkoder är bra, men om ditt tema tillhandahåller dem, kanske du vill tänka efter två gånger innan du använder dem överdrivet.

Detta beror på att om du någonsin byter tema, är chansen stor att ditt nya tema inte stöder samma kortkod, vilket lämnar dig med trasigt innehåll.

För att undvika detta problem kan du flytta till ett webbplatsspecifikt plugin. På så sätt förblir dina kortkoder oberoende och fortsätter att fungera oavsett vilket tema du använder.

För att göra detta kan du helt enkelt lokalisera kortkodssnutten i ditt temas functions.php-fil och kopiera den. Klistra sedan in den i ett webbplatsspecifikt plugin för att säkerställa att den förblir funktionell.

Att redigera functions.php-filen direkt är dock inte idealiskt, eftersom en liten fel kan krascha hela din webbplats.

Det är här WPCode kommer in. Enligt vår mening erbjuder det det enklaste sättet att lägga till ett kortkod-snippet i ditt tema.

Det låter dig lägga till anpassad kod med bara några få klick och markerar till och med fel i dina kodsnuttar.

Vi har grundligt testat pluginet på vår webbplats och funnit att det är ganska nybörjarvänligt. För att lära dig mer, se vår WPCode-recension.

Dessutom kommer det inte att krascha din webbplats om du av misstag lägger till felaktig kod, vilket gör det till ett pålitligt alternativ för alla.

För mer information, se vår guide om hur man lägger till anpassad kod i WordPress.

Tips 3: Hur man söker efter kortkoder i ditt WordPress-tema

För att säkerställa att dina kortkoder förblir funktionella är det viktigt att veta hur de ser ut och hur du hittar dem i ditt tema.

Först måste du öppna din temas mapp, som vanligtvis finns på /wp-content/themes/ditt-tema-namn/.

Du vill leta efter den inuti functions.php-filen, eller om temat har en 'includes'-mapp, då inuti där.

När du har hittat filen, öppna den och sök efter termen 'add_shortcode'. Detta hjälper dig att hitta alla kortkoder som för närvarande används av ditt WordPress-tema.

Här är ett exempel på hur ett kortkodssnutt ser ut:

function my_shortcode_function() { 
$i = '<p>Hello World!</p>';
return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

Den här koden skapar en kortkod 'my-shortcode', som returnerar en enkel text hälsning och kan bäddas in i ett WordPress-inlägg eller en sida så här:

[min-kortkod]

För mer information kan du se vår guide om hur man lägger till en kortkod i WordPress.

Tips 4: Använda kortkoder i widgets

Många användare tror att kortkoder bara är för inlägg och sidor, men så är inte fallet.

Du kan också använda dem inuti WordPress-widgets, vilket ger dig ännu mer flexibilitet för att lägga till dynamiskt innehåll i sidofält, sidfötter och andra widget-redo områden.

För att göra detta, besök sidan Utseende » Widgets från WordPress-instrumentpanelen och klicka på knappen 'Lägg till block' (+). Detta öppnar blockmenyn, varifrån du behöver lägga till blocket 'Kortkod'.

För att göra detta måste du navigera till rätt redigerare för ditt tema. Om du använder ett klassiskt tema, gå till Utseende » Widgets från WordPress-instrumentpanelen. Om du använder ett blocktema, går du istället till Utseende » Redigerare.

När du är i rätt redigerare klickar du helt enkelt på knappen 'Lägg till block' (+) för att öppna blockmenyn. Sök därifrån efter och lägg till blocket 'Kortkod' i din sidofält eller annat widgetområde.

Tänk på att ovanstående metod bara fungerar om du använder ett klassiskt tema som Hestia.

Men om du använder ett blocktema, kan du lägga till en kortkod i valfritt widgetområde med hjälp av fullständig webbplatsredigerare.

För mer information, se vår handledning om hur man använder kortkoder i dina WordPress-sidofältswidgetar.

Tips 5: Lägg till kortkod i temafiler

Behöver du lägga till en kortkod utanför inlägg, sidor eller widgets?

Om du vill lägga till en kortkod i en anpassad temafil eller en specifik del av ditt tema, kan du enkelt göra det genom att lägga till kortkoden direkt i ditt temas kod.

Till exempel, säg att du har skapat en anpassad sidmall och vill inkludera en responsiv slider med en kortkod.

Istället för att manuellt infoga kortkoden i innehållsområdet kan du mata ut den direkt i temat. Lägg helt enkelt till din kortkod så här:

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

Denna teknik är användbar när du vill bädda in kortkoder i områden som anpassade sidor, rubriker, sidfötter eller andra delar av ditt tema som inte är kopplade till den vanliga innehållsredigeraren.

Om du behöver hjälp, se vår guide om att klistra in kodavsnitt från webben i WordPress.

Tips 6: Dölja en trasig kortkod

Ofta byter användare teman utan att inse att deras gamla kortkoder inte kommer att fungera. Ibland upptäcker de det efter månader när en användare besöker deras gamla inlägg och hittar konstig text där.

Tja, du har två sätt att fixa det. Du kan antingen manuellt ta bort den trasiga kortkoden från varje inlägg eller dölja den. Vi rekommenderar att dölja den eftersom det är en snabbare lösning.

För att göra detta behöver du installera och aktivera pluginet WPCode. Efter aktivering, besök sidan Kodavsnitt » + Lägg till avsnitt och välj alternativet ‘Lägg till ny anpassad kod (nytt avsnitt)’

Detta tar dig till sidan 'Skapa anpassad kodsnutt', där du måste välja alternativet 'PHP-kodsnutt' från rullgardinsmenyn.

Lägg sedan till följande kod i rutan 'Kodförhandsgranskning' och växla omkopplaren 'Inaktiv' till 'Aktiv'.

add_shortcode( 'shortcodetag', '__return_false' );

Glöm inte att ersätta kortkodstag med ditt kortkodsnamn. Klicka slutligen på knappen 'Spara utdrag' för att lagra dina inställningar.

Den här koden kommer nu att lägga tillbaka den föräldralösa kortkoden utan någon utdata.

Tips 7: Hitta kortkoder som används i inlägg

Om du inte vill använda tricket i tips 6 och vill ta bort alla kortkoder manuellt, är det första steget att hitta alla inlägg som använder kortkoden.

För att göra detta, lägg till följande kod i din temas functions.php-fil eller WPCode:

function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
		'find' => '',
	), $atts ) );

$string = $atts['find'];

$args = array(
	's' => $string,
	);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
        echo '<ul>';
	while ( $the_query->have_posts() ) {
	$the_query->the_post(); ?>
	<li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
	}
        echo '</ul>';
} else {
        echo "Sorry no posts found";
}

wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

Den här koden skapar helt enkelt en kortkod som heter shortcodefinder. Den kör en WordPress-fråga och listar inlägg med en given kortkodstagg.

Om du till exempel ville hitta alla inlägg som innehåller kortkoden [kontaktformulär], skulle du helt enkelt skriva [shortcodefinder find=’contact-form’] på en WordPress-sida och spara den. Nu, om du förhandsgranskar sidan, kommer du att kunna se alla inlägg som innehåller kortkoden.

För mer detaljerade instruktioner, kolla in vår guide om hur du hittar och döljer oanvända kortkoder i WordPress.

Bonus: Vanliga kortkodsfel att undvika

Även om kortkoder är användbara och nödvändiga för många webbplatser, gör användare ofta några vanliga misstag när de arbetar med dem.

Dessa fel kan leda till trasig funktionalitet, rörig kod eller dålig webbplatsprestanda. Här är fem viktiga misstag att se upp för och hur du undviker dem:

• Överbelastning av sidor med för många kortkoder: Att använda för många kortkoder på en enda sida kan leda till långsamma laddningstider och en rörig design. Därför rekommenderar vi att du begränsar användningen av kortkoder till väsentliga element.
• Nästla kortkoder felaktigt: Nästlade kortkoder (att använda en kortkod inuti en annan) kan vara knepigt och kan orsaka problem som att en kortkod inte fungerar eller att en sida visar felaktigt innehåll. Om du måste nästla kortkoder, testa dem först för att säkerställa att de visas som förväntat.
• Glömmer att stänga kortkoder korrekt: Ibland glömmer användare att stänga kortkoder, vilket kan bryta layouten på ett inlägg eller en sida. Därför måste du alltid se till att din kortkod är korrekt öppnad och stängd med hakparenteser. För kortkoder som används en gång, se till att du inte lämnar några extra mellanslag eller symboler.
• Använda kortkoder i icke-stödda områden: Vissa områden i WordPress kanske inte stöder kortkoder som standard. Att försöka använda en kortkod där kan resultera i trasigt eller osynligt innehåll. Innan du infogar kortkoder i widgets eller anpassade fält, kontrollera om området stöder dem. Du kan ofta använda ett plugin för att aktivera kortkoder i icke-stödda områden.
• Testa inte kortkoder på mobila enheter: Många användare glömmer att kontrollera hur element som skapats med kortkoder ser ut på mobila enheter. Det som ser bra ut på en stationär dator kan gå sönder eller se dåligt ut på mobila skärmar. Förhandsgranska alltid dina sidor och inlägg på olika enheter för att säkerställa att kortkodens utdata är responsiv.

Genom att undvika dessa vanliga misstag och följa dessa tips kan du få en smidigare upplevelse när du använder kortkoder på din WordPress-webbplats.

Vi hoppas att dessa tips hjälpte dig att lära dig hur du använder kortkoder och får ut det mesta av dem i WordPress. Du kanske också vill se vår nybörjarguide om hur man kopierar och klistrar in i WordPress utan formateringsproblem och våra experttips för att bemästra WordPress innehållsredigerare.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.