Hvordan legge til en widget i WordPress? Fra klassiske widgets til blokker

I mer enn et tiår var widget-systemet et av de mest gjenkjennelige elementene i WordPress. Dersom en nettstedeier ønsket å plassere et søkefelt i sidefeltet, legge inn en forfatterpresentasjon eller organisere lenker og juridisk informasjon i bunnteksten (footer), navigerte man direkte til menyen Utseende > Widgets. Der kunne man enkelt dra og slippe forhåndsdefinerte moduler inn i temadefinerte soner.

Med introduksjonen av Gutenberg og den påfølgende overgangen til Full Site Editing (FSE), har dette fundamentet gjennomgått et markant paradigmeskifte. I dag skiller WordPress tydelig mellom tre ulike tilnærminger: klassiske PHP-temaer med tradisjonelle widgets, klassiske temaer med blokk-widgets, og moderne blokk-temaer der hele widget-menyen er fullstendig fjernet til fordel for mal-deler (Template Parts).

I denne tekniske veiledningen analyserer vi utviklingen av widget-arkitekturen i WordPress, hvordan du håndterer overgangen i produksjon, og hvilke kodemønstre som gjelder for moderne temaer.

#De tre fasene i WordPress sin widget-arkitektur

For å navigere riktig i kontrollpanelet er det nødvendig å kjenne til hvilket arkitektonisk rammeverk temaet ditt er bygget på:

1. Den klassiske widget-æraen (før WordPress 5.8): Temaer registrerte sidefelt med register_sidebar(), og redaktører administrerte moduler basert på WP_Widget-klassen via enkle skjemaer med faste innspillinger.
2. Overgangsfasen med blokk-widgets (WordPress 5.8 og nyere): Menypunktet Utseende > Widgets ble oppgradert til å kjøre Gutenberg-editoren. Tradisjonelle widget-områder aksepterer nå alle tilgjengelige blokker (avsnitt, bilder, kolonner, knapper).
3. Full Site Editing (FSE): I rene blokk-temaer, basert på filen theme.json og HTML-maler under mappen /templates/, eksisterer ikke Widgets-menyen i det hele tatt. Alt innhold i bunntekster og sidefelt redigeres direkte i Site Editor.

#Tilnærming 1: Blokk-widgets i klassiske temaer

Dersom prosjektet ditt kjører et etablert tema som Astra, GeneratePress, OceanWP eller et skreddersydd bedriftstema skrevet i PHP, vil du fortsatt finne menyen Utseende > Widgets.

Når du åpner denne menyen, møtes du imidlertid av et blokkbasert grensesnitt i stedet for de gamle skjemaene. Hvert registrerte widget-område fungerer nå som en egen blokkbeholder. Endringen kom med WordPress 5.8 og er dokumentert i den offisielle veiledningen for blokkbaserte widgets. For redaksjonen betyr det at den samme blokkpaletten som brukes i innlegg også er tilgjengelig i sidefelt og bunntekst - med samme stilkontroller for avstand, farger og typografi.

#Slik legger du til en blokk i et sidefelt

1. Gå til Utseende > Widgets i WordPress-administratoren.
2. Klikk på widget-området du vil konfigurere, for eksempel Hovedsidefelt eller Bunntekst Kolonne 1.
3. Trykk på Pluss-ikonet (+) for å åpne blokkvelgeren.
4. Velg den blokken du trenger: Søk, Siste innlegg, Gruppe, Avsnitt eller en tredjeparts blokk.
5. Tilpass blokkinnstillingene i høyre sidepanel (farger, typografi, marger).
6. Trykk på den blå knappen Oppdater øverst i vinduet for å lagre endringene.

Dette gir redaksjonen stor frihet til å formatere innholdet visuelt uten å skrive HTML eller ty til tunge kortkoder (shortcodes).

#Registrering av widget-områder i PHP

For temautviklere er mekanismen for å registrere sidefelt uendret i klassiske og hybride prosjekter. Koden forankres til handlingen widgets_init:

<?php
declare(strict_types=1);

/**
 * Registrerer tilpassede sidefelt og widget-soner for temaet.
 */
function wppoland_registrer_sidefelt(): void {
    register_sidebar( [
        'name'          => __( 'Primært Sidefelt', 'wppoland' ),
        'id'            => 'primaert-sidefelt',
        'description'   => __( 'Vises på høyre side av artikler og arkivsider.', 'wppoland' ),
        'before_widget' => '<section id="%1$s" class="widget-enhet %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h3 class="widget-overskrift">',
        'after_title'   => '</h3>',
    ] );

    register_sidebar( [
        'name'          => __( 'Bunntekst Kolonne 1', 'wppoland' ),
        'id'            => 'bunntekst-kol-1',
        'description'   => __( 'Første kolonne i bunnteksten.', 'wppoland' ),
        'before_widget' => '<div id="%1$s" class="bunntekst-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="bunntekst-tittel">',
        'after_title'   => '</h4>',
    ] );
}
add_action( 'widgets_init', 'wppoland_registrer_sidefelt' );

Uthenting av sidefeltet i malfilen, for eksempel i sidebar.php, utføres med funksjonen dynamic_sidebar():

<?php if ( is_active_sidebar( 'primaert-sidefelt' ) ) : ?>
    <aside id="sekundaert-innhold" class="sidefelt-omrade" role="complementary">
        <?php dynamic_sidebar( 'primaert-sidefelt' ); ?>
    </aside>
<?php endif; ?>

ID-verdien i register_sidebar() må være stabil over tid. Endrer du id etter at redaksjonen har lagret widgets, mister sidefeltet koblingen til lagret innhold. Bruk beskrivende, små bokstaver og bindestrek, og dokumenter IDene i temaets README slik at senere utviklere ikke «rydder» dem bort under en refaktor.

#Egendefinerte widgets med WP_Widget

Før blokk-æraen var nesten all skreddersydd widget-logikk bygget som underklasser av WP_Widget. Klassen krever tre metoder: __construct() for identifikator og tittel, widget() for front-end-markup, og form() for admin-skjemaet. Lagring av innstillinger skjer i update(), der du saniterer alle felt før de skrives til databasen.

<?php
declare(strict_types=1);

class Wppoland_Kontaktboks_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wppoland_kontaktboks',
            __( 'Kontaktboks', 'wppoland' ),
            [ 'description' => __( 'Viser en kort kontakttekst i sidefeltet.', 'wppoland' ) ]
        );
    }

    public function widget( $args, $instance ): void {
        echo $args['before_widget'];
        $tittel = ! empty( $instance['tittel'] )
            ? $instance['tittel']
            : __( 'Kontakt oss', 'wppoland' );
        echo $args['before_title'] . esc_html( $tittel ) . $args['after_title'];
        echo '<p>' . esc_html( $instance['tekst'] ?? '' ) . '</p>';
        echo $args['after_widget'];
    }

    public function form( $instance ): void {
        $tittel = $instance['tittel'] ?? '';
        $tekst  = $instance['tekst'] ?? '';
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'tittel' ) ); ?>">
                <?php esc_html_e( 'Tittel', 'wppoland' ); ?>
            </label>
            <input class="widefat"
                id="<?php echo esc_attr( $this->get_field_id( 'tittel' ) ); ?>"
                name="<?php echo esc_attr( $this->get_field_name( 'tittel' ) ); ?>"
                type="text"
                value="<?php echo esc_attr( $tittel ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'tekst' ) ); ?>">
                <?php esc_html_e( 'Tekst', 'wppoland' ); ?>
            </label>
            <textarea class="widefat"
                id="<?php echo esc_attr( $this->get_field_id( 'tekst' ) ); ?>"
                name="<?php echo esc_attr( $this->get_field_name( 'tekst' ) ); ?>"
                rows="4"><?php echo esc_textarea( $tekst ); ?></textarea>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ): array {
        return [
            'tittel' => sanitize_text_field( $new_instance['tittel'] ?? '' ),
            'tekst'  => sanitize_textarea_field( $new_instance['tekst'] ?? '' ),
        ];
    }
}

add_action( 'widgets_init', static function (): void {
    register_widget( 'Wppoland_Kontaktboks_Widget' );
} );

I WordPress 5.8 og nyere dukker slike klassiske widgets fortsatt opp i blokkeditoren via Eldre widget-blokken. Det er praktisk under migrering, men det er ikke en langsiktig løsning: hver gang du berører innstillingene, risikerer du at redaksjonen mister oversikt over hvilke felt som faktisk styrer front-enden. Planlegg derfor en konvertering til native blokker eller en skreddersydd blokk når kapasiteten tillater det.

#Gjenopprette det klassiske grensesnittet

I en del etablerte bedriftsinstallasjoner kan det blokkbaserte widget-grensesnittet oppleves som unødvendig tregt, eller det kan skape konflikter med spesialutviklede eldre plugins. Det finnes to ryddige måter å hente tilbake det opprinnelige dra-og-slipp-skjermbildet:

#Løsning A: Den offisielle utvidelsen Classic Widgets

Utvidelsen Classic Widgets, vedlikeholdt av WordPress-kjerneteamet og publisert på wordpress.org/plugins/classic-widgets, krever ingen oppsett. Så snart den aktiveres, overstyrer den blokkeditoren på widgets-skjermen og gjenoppretter det klassiske brukergrensesnittet. Resten av nettstedet, inkludert blokkredigering av vanlige sider og innlegg, forblir uberørt. Pluginen er ment som en midlertidig bro for temaer og plugins som fortsatt forventer det gamle skjemaet - ikke som en permanent erstatning for blokkarkitekturen.

#Løsning B: Deaktivering via PHP-filter

Dersom du foretrekker å unngå unødige utvidelser i produksjon, kan du deaktivere blokkeditoren for widgets med to linjer kode i functions.php eller i en Must-Use (MU) plugin:

<?php
// Deaktiver Gutenberg-blokkeditoren for widget-administrasjon
add_filter( 'use_widgets_block_editor', '__return_false' );

Denne koden slår av blokkeditoren kun for widgets, og lar redaktørene jobbe videre med standard Gutenberg på artikler og sider.

#Tilnærming 2: Blokk-temaer og Full Site Editing (FSE)

Dersom du bygger på et moderne blokk-tema (som Twenty Twenty-Four eller Twenty Twenty-Five), vil du oppdage at menyen Utseende > Widgets er helt borte. Det samme gjelder det tradisjonelle tilpasningsverktøyet (Customizer).

I FSE-verdenen eksisterer det ikke lenger noe kunstig skille mellom selve sideinnholdet og de ytre rammene. Alt bygges av blokker og maler.

#Hvordan organisere sidefelt og bunntekster i Site Editor

1. Åpne Utseende > Redigerer i kontrollpanelet.
2. Velg Mønstre (Patterns) eller Mal-deler (Template Parts) i venstre meny.
3. For å redigere bunnteksten klikker du direkte på mal-delen Footer. Her kan du fritt flytte på kolonner, bytte logo og oppdatere opphavsrettstekst direkte i det visuelle lerretet.
4. For å bygge et sidefelt åpner du malen for enkeltinnlegg (Enkeltinnlegg eller Single).
5. Legg inn en Kolonner-blokk (Columns), for eksempel delt 70 % og 30 %.
6. Plasser blokken Innleggsinnhold i hovedkolonnen, og sett sammen de ønskede widget-elementene (søk, kategorier, forfatterboks) i høyrekolonnen.

<!-- Eksempel på sidefeltstruktur i en FSE HTML-mal -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
    <!-- wp:column {"width":"70%"} -->
    <div class="wp-block-column" style="flex-basis:70%">
        <!-- wp:post-content /-->
    </div>
    <!-- /wp:column -->

    <!-- wp:column {"width":"30%"} -->
    <div class="wp-block-column" style="flex-basis:30%">
        <!-- wp:template-part {"slug":"sidebar","theme":"mitt-tema"} /-->
    </div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Ved å samle sidefeltelementene i en mal-del (template-part {"slug":"sidebar"}) sørger du for at oppdateringer utført på ett sted propageres automatisk over hele nettstedet. Template Parts er ryggraden i Full Site Editing: de erstatter det gamle skillet mellom «innhold» og «widget-sone» med gjenbrukbare HTML-fragmenter som Site Editor kan synkronisere. Les mer i den offisielle FSE-introduksjonen dersom teamet ditt skal bygge et rent blokk-tema fra scratch.

#Sammenligning av metodene

#Ytelse og sikkerhet ved bruk av widgets

Uavhengig av hvilken metode du velger, bør du følge noen grunnleggende arkitekturprinsipper:

• Unngå tunge databasespørringer: Widgets som henter dynamisk innhold (f.eks. populære innlegg eller komplekse tag-skyer) bør alltid caches, enten med transients eller via en persistent objektbuffer (Redis).
• Sikring av data: Skreddersydde widgets som lagrer innstillinger må sanere alle verdier med sanitize_text_field() før lagring, og maskere utdata med esc_html() eller esc_url().
• Ressurskontroll: Unngå å laste tunge skript (som kart, sosiale feeder eller animasjonsbiblioteker) globalt dersom widgeten kun er synlig på bestemte undersider.

#Fallgruver ved migrering fra klassiske widgets til blokker

Overgangen fra WP_Widget til blokkbaserte widgets er sjelden en ren «slå på og glem»-operasjon. I norske og nordiske produksjonsmiljøer ser vi de samme feilmønstrene igjen og igjen:

1. Manglende staging-kopi før bytte: Aktiverer du blokkwidget-editoren direkte i produksjon, kan lagrede widget-instanser vises annerledes eller midlertidig forsvinne fra det visuelle lerretet. Ta alltid en databaseeksport av wp_options-radene knyttet til sidefelt før du ruller ut endringen.
2. Hybridtemaer med delvis FSE: Noen temaer registrerer fortsatt register_sidebar() mens de også leverer HTML-maler. Da kan du ende med både Utseende > Widgets og Utseende > Redigerer. Avklar hvilken flate som eier bunnteksten, ellers oppdaterer redaksjonen feil sted.
3. Plugins som antar klassisk DOM: Eldre utvidelser som injecter JavaScript mot .widget-klasser eller faste skjema-ID-er i Classic Widgets-skjermen, bryter ofte mot Gutenberg-DOM. Test filteret use_widgets_block_editor eller Classic Widgets-pluginen i staging før du lover en frist til kunden.
4. Template Parts uten versjonskontroll: I FSE lagres mal-deler i databasen når redaksjonen redigerer dem i Site Editor. Uten eksport til filer under /parts/ mister du endringene ved temabytte. Bruk «Eksporter» eller et synkroniseringsplugin slik at sidebar.html og footer.html ligger i Git.
5. Gjenbrukbare blokker vs. mal-deler: Et søkefelt som bare skal stå i sidefeltet hører hjemme i en Template Part. En CTA som også brukes midt i artikler bør være en synkronisert mønsterblokk. Blandingen av de to er den vanligste årsaken til at «én endring» ikke propagerer som forventet.

Når migreringen er ferdig, dokumenter hvilken flate som er kanonisk for sidefelt og bunntekst. En kort notat i prosjektets Notion eller README sparer timer neste gang noen spør hvorfor Widgets-menyen er borte.

#Ofte stilte spørsmål om widgets

Valget mellom klassiske widgets og moderne blokk-temaer handler om å finne balansen mellom redaksjonell enkelhet og teknisk fleksibilitet. Dersom bedriften din skal migrere eldre maler eller trenger hjelp til å bygge en modulær og framtidsrettet struktur, bistår våre rådgivere gjerne med profesjonell WordPress-utvikling.