En trinn-for-trinn-guide til å lage shortcodes i WordPress

Shortcodes i WordPress er den lille superkraften mange glemmer. Med en enkel tag – som [min_shortcode] – kan de hente data, formatere innhold og integrere eksterne tjenester uten at redaktører må røre PHP. Denne guiden viser, steg for steg, hvordan de lager trygge, raske og vedlikeholdbare shortcodes i WordPress. Underveis dekkes beste praksis, sikkerhet, ytelse og hvordan alt spiller sammen med blokkredigereren. Målet: en robust oppskrift de faktisk vil bruke – og som tåler både oppdateringer og trafikk.

Hva Er Shortcodes, Og Når Bør Du Bruke Dem?

Shortcodes er små kodesnutter som oversettes til dynamisk innhold når WordPress rendrer siden. De ser slik ut i editoren: [galleri id=»123″] eller [pris]129[/pris]. Bak kulissene peker de mot en PHP-funksjon som returnerer HTML (eller tekst).

De passer når redaktører skal gjenbruke funksjonalitet uten å kode: vise lister med innhold, trekke data fra API-er, bygge små komponenter (tabs, varsler), eller eksponere kontrollerte database-spørringer. Shortcodes kombinerer fleksibiliteten fra kode med enkelheten i editoren.

Når ikke bruke dem? Hvis behovet er rent visuelt og løses bedre som en blokk, velg en Gutenberg-blokk. Men når funksjonen skal kunne brukes både i eldre innhold, widgets og PHP-maler, er shortcodes i WordPress fortsatt et trygt valg.

Forberedelser Og Beste Praksis

Hvor Koden Bør Ligge: Egen Utvidelse Eller Child Tema

For modulær og oppgraderbar kode bør shortcodes ligge i en egen, liten plugin. Det gjør funksjonen tema-uavhengig og enklere å versjonere. Dersom shortcoden kun hører til ett spesifikt tema og aldri skal flyttes, er child-temaets functions.php et akseptabelt sted. Unngå å putte egendefinert kode i hovedtema eller tredjeparts-plugins – det ryker ved oppdatering.

Navngivning Og Prefiks For Å Unngå Kollisjoner

Navngi konsekvent og bruk prefiks både på shortcodens tag og PHP-funksjoner: prefix_min_shortcode og function prefix_min_shortcode(). Det reduserer risiko for navnekollisjoner med andre utvidelser. Har de mange shortcodes, etabler et lite navnerom eller klasse med konsekvente metodenavn.

Sikkerhet På Et Overordnet Nivå

• All output må escapes med esc_html(), esc_attr(), esc_url() osv.
• Valider og rens input: sanitize_text_field(), absint(), floatval() etter behov.
• Anta at attributter og innhold kan være ondsinnet.
• Unngå direkte databasekall – bruk WP_Query og forberedte spørringer via $wpdb ved behov.
• Sett WP_DEBUG til true i utvikling for å fange feil tidlig.

Steg-For-Steg: Din Første Shortcode

En minimal shortcode krever én funksjon og én registrering. Viktig: funksjonen skal returnere en streng – ikke echo.

// I egen plugin eller i child-temaets functions.php

function min_shortcode($atts, $content = null) {

return '<div>' . esc_html($content) . '</div>':

}


add_shortcode('min_shortcode', 'min_shortcode'):

Registrer Med add_shortcode

add_shortcode(‘min_shortcode’, ‘min_shortcode’) kobler taggen [min_shortcode] til PHP-funksjonen min_shortcode(). Plasser dette i plugin-filen eller i child-temaet.

Returner HTML, Ikke Echo

WordPress forventer at shortcoden returnerer en streng som kan plasseres riktig i innholdet. Echo kan bryte layout, spesielt inne i lister, tabeller eller blokker. Return er alltid riktig.

Test I Innlegg Og Sider

I blokkredigereren: legg inn blokken «Shortcode» og skriv [min_shortcode]Tekst[/min_shortcode]. I klassisk editor kan taggen skrives rett i innholdet. Resultatet skal være en

Avanserte Parametere: Attributter, Innhold Og Rensing

Bruk Av shortcode_atts Og Standardverdier

Attributter gjør shortcoden fleksibel. Definer standarder med shortcode_atts(), og husk validering/escaping.

function min_shortcode($atts, $content = null) {

$a = shortcode_atts([

'farge' => 'blå',

'størrelse' => '16px'

], $atts):


$farge = sanitize_text_field($a['farge']):

$size = sanitize_text_field($a['størrelse']):


return '<div style="color:' . esc_attr($farge) . ': font-size:' . esc_attr($size) . '">'
. esc_html($content) . '</div>':

}

Støtt Innhold Mellom Åpne Og Lukke-Tags

$content-parameteren inkluderer alt mellom [tag] og [/tag]. Den bør som hovedregel esc_html()’es, med mindre shortcoden bevisst skal støtte begrenset HTML – i så fall whitelist med wp_kses().

Validering, Escaping Og Output Buffering

• Valider input før bruk. Konverter tall med absint()/floatval().
• Escape alt som går ut i HTML-attributter/tekst.
• For kompleks markup kan output buffering hjelpe:

function prefix_kortkode($atts){

ob_start():

?>

<section class="boks" aria-label="<?php echo esc_attr(__('Info-boks','domenet')): ?>">

<h3><?php echo esc_html(__('Tittel','domenet')): ?></h3>

</section>

<?php

return ob_get_clean():

}

Buffering holder koden ryddig, men ikke bruk den for å skjule unødvendig kompleksitet.

Dynamikk, Ytelse Og Integrasjon

Hent Data Med WP_Query Eller Eksterne API-Kall

For dynamisk innhold, bruk WP_Query til å hente innlegg/produkter etter taksonomi, meta eller dato. Ved eksterne API-er, bruk wp_remote_get() med tidsavbrudd og feilkontroll. Unngå tunge kall ved hvert sidevisning – cache er nøkkelen.

Eksempel, enkel loop:

$q = new WP_Query(['post_type' => 'post', 'posts_per_page' => 5]):

if ($q->have_posts()) {

while ($q->have_posts()) { $q->the_post():

echo '<li>' . esc_html(get_the_title()) . '</li>':

}

wp_reset_postdata():

}

Cache Resultater Med Transients

Transients reduserer belastning ved dyre spørringer og API-kall.

$key = 'prefix_top5':

$html = get_transient($key):

if (false === $html) {

// Bygg $html ...

$html = '<ul>…</ul>':

set_transient($key, $html, HOUR_IN_SECONDS):

}

return $html:

Bruk meningsfulle nøkler med prefiks. Husk å slette transienter ved innholdsoppdatering med passende hooks (f.eks. save_post).

Bruk I Blokkredigereren Og I PHP-Maler

I blokkredigereren brukes «Shortcode»-blokken. I PHP-maler kan de kjøre shortcodes slik: do_shortcode(‘[min_shortcode]Innhold[/min_shortcode]’). For renere maler kan funksjonen kalles direkte hvis den er designet for det, men do_shortcode() er tryggest for tags.

Feilsøking Og Vanlige Fallgruver

Aktiver WP_DEBUG Og Logg Problemer

I wp-config.php under utvikling:

define('WP_DEBUG', true):

define('WP_DEBUG_LOG', true):

define('WP_DEBUG_DISPLAY', false):

Sjekk wp-content/debug.log for PHP-notices og -feil. Bruk error_log() strategisk for å spore attributter og respons fra API-er.

Kollisjoner, Tilgangskontroll Og Sikkerhetshull

• Kollisjoner: Bruk prefiks. Test med shortcode_exists(‘min_shortcode’) før registrering hvis flere kilder kan definere den.
• Tilgang: Ikke eksponer sensitiv info. Bruk is_user_logged_in() og current_user_can() før beskyttet output.
• XSS: Escape konsekvent. Whitelist kun det som må gjennom.
• CSRF er mindre relevant for visningsshortcodes, men hvis shortcoden skriver skjemaer som poster, bruk nonces (wp_nonce_field / check_admin_referer).

Internasjonalisering, Tilgjengelighet Og SEO-Hensyn

• Pakk synlige tekster i __() eller _e() og last textdomain i plugin.
• Tilgjengelighet: Semantiske tags, kontrast, aria-* der det gir mening. Ikke gjem viktig info i title-attributter.
• SEO: Sørg for at output rendres server-side (som shortcodes gjør), bruk riktige overskriftsnivåer og meningsfulle lenketekster. Unngå å blokkere innhold bak unødvendig JS.

Konklusjon

Shortcodes i WordPress gir redaktører superkrefter – når de er bygget riktig. Legg koden i riktig sted (helst plugin), bruk prefiks, valider og escape alt, og tenk caching fra dag én. Med shortcode_atts, WP_Query, transients og god i18n/a11y‑praksis blir resultatet både robust og raskt. Start lite, test i blokkredigereren, og bygg videre med trygghet.

Ofte stilte spørsmål om shortcodes i WordPress

Hva er shortcodes i WordPress, og når bør jeg bruke dem?

Shortcodes i WordPress er små tagger som blir til dynamisk HTML når siden rendres. De er nyttige når redaktører skal gjenbruke funksjonalitet uten å skrive PHP: lister, API-data, tabs, varsler eller kontrollerte spørringer. Velg blokker for rent visuelle behov; bruk shortcodes når funksjonen må fungere i eldre innhold, widgets og maler.

Hvor bør jeg legge koden for en shortcode – i plugin eller child-tema?

Legg egendefinerte shortcodes i en liten, egen plugin for modulær, tema-uavhengig kode som kan versjoneres og gjenbrukes. Bruk child-temaets functions.php bare dersom funksjonen er spesifikk for det temaet. Unngå hovedtema og tredjeparts-plugins – endringer kan forsvinne ved oppdateringer.

Hvordan lager jeg en sikker og rask shortcode i WordPress?

Registrer med add_shortcode og sørg for at funksjonen returnerer en streng. Rens og valider attributter (shortcode_atts, sanitize_text_field, absint), og escape all output (esc_html, esc_attr). Hent data via WP_Query, og cache dyre kall med transients. Test via Shortcode-blokken. Aktiver WP_DEBUG under utvikling.

Påvirker shortcodes SEO og Core Web Vitals?

Shortcodes i seg selv skader ikke SEO – de rendrer server-side, så innholdet indekseres. Effekt på Core Web Vitals avhenger av hva shortcoden gjør. Tunge spørringer eller API-kall kan bremse. Optimaliser med caching (transients), effektiv markup, lazy loading, og unngå unødvendig blokkerende JS/CSS.

Hvordan deaktivere eller erstatte shortcodes i WordPress uten å ødelegge innhold?

Fjern registreringen med remove_shortcode(‘tag’), eller legg inn en midlertidig fallback som returnerer tom streng for å unngå rå tagger. Planlegg migrering med WP-CLI search-replace, test i staging og tøm cache. Ved konflikt, bruk shortcode_exists før registrering eller gi ny tag med prefiks.