💡 Slik legger du til et popup-vindu i WordPress

• Velg din tilnærming: Popup Maker-utvidelsen for en rask start eller egendefinert kode for full kontroll
• Installer Popup Maker via «Utvidelser → Legg til ny» og aktiver den
• Opprett en ny popup, angi innholdet for innlegg eller side, og konfigurer en utløser (klikk, tidtaker eller rulling)
• For en egendefinert løsning, legg til CSS-stiler for modale vinduer i temafilen eller tilpasseren
• Last inn JavaScript-filen via wp_enqueue_script() med en jquery-avhengighet, og kontroller innlastingsrekkefølgen
• Åpne siden og test popup-vinduet i nettleseren din mens du overvåker konsollen for feil

Hva modale vinduer er og hvorfor WordPress-nettstedet ditt trenger dem

Et modalt vindu er en popup-blokk med innhold som åpnes over siden mens bakgrunnen dimmes. Brukeren forlater aldri den gjeldende URL-en, men ser tilleggsinformasjon: innleggstekst, et skjema, en video eller et galleri.

For et WordPress-nettsted løser modale vinduer tre spesifikke problemer. For det første, et brukerdashboard: i stedet for en egen profilside viser du innstillinger, ordrer eller meldinger i en popup-blokk. For det andre, rask innholdsforhåndsvisning: en besøkende klikker på et produktkort eller en artikkelteaser og ser hele innholdet uten en ny sidelasting. For det tredje, skjemaer for å fange leads: abonnements-, registrerings- og kontaktskjemaer vises nøyaktig når den besøkende er klar til å handle.

Den viktigste fordelen med et modalt vindu fremfor en egen side er hastighet. Det er ingen venting på en full sidelasting med topptekst, sidemeny og bunntekst. Du laster bare the_content(), rent innhold. Dette sparer både brukerens tid og serverressurser.

WP Post Popup: hvorfor veteranutvidelsen forlot scenen

Frem til 2023 var en av de mest populære løsningene for modale vinduer i WordPress utvidelsen WP Post Popup (wp-post-modal). Den kunne gjøre ethvert innlegg, side eller egendefinert innholdstype om til en popup; alt du trengte å gjøre var å oppgi en URL med en parameter. Utvidelsen fungerte med shortcodes, Contact Form 7 og BuddyPress; den kunne laste eksterne sider og til og med selektivt vise en spesifikk div fra et annet nettsted.

I oktober 2023 ble utvidelsen stengt. Årsaken var et sikkerhetsproblem. WordPress.org-siden viser nå statusen «This plugin has been closed… Reason: Security Issue.» Siden da har den ikke vært tilgjengelig for nedlasting, og aktive installasjoner har falt til null.

Men ideene bak WP Post Popup har ikke forsvunnet. Oppgaven med å vise innhold i en popup uten sidelasting er fortsatt løsbar i dag, og via to ruter: moderne utvidelser og ren kode.

3 Moderne måter å legge til et modalt vindu i WordPress

Her er de aktuelle alternativene for 2026, fra ferdige utvidelser til en fullstendig egendefinert løsning.

Popup Maker er den mest populære gratisutvidelsen for popups: 700 000+ aktive installasjoner og en vurdering på 4,9 på WordPress.org. Den lager alle typer popup, fra modale vinduer med innhold til innskutte paneler og bannere. Utløsere inkluderer klikk, tidtaker, rulling eller exit intent. Hvis du trenger en rask løsning uten koding, er dette det beste utgangspunktet.

Bootstrap 5 er innebygd i mange moderne temaer. Den opprinnelige Modal-komponenten fungerer rett ut av esken: responsivitet, animasjon, lukking ved Escape-tast og klikk utenfor vinduet. Bare inkluder Bootstrap i temaet ditt og bruk den ferdige markeringen med dataattributter.

Ren kode er veien for de som trenger total kontroll over hver piksel og oppførsel til vinduet. Ingen ekstra skript, avhengigheter eller konflikter med andre utvidelser. Dette er metoden vi vil gå gjennom trinn for trinn.

Videoen over er en praktisk veiledning for å lage et egendefinert modalt vindu i WordPress fra bunnen av: 12 minutter med ren kode med et ferdig resultat på slutten.

Trinn-for-trinn-guide: bygge et modalt vindu fra bunnen av

Denne metoden fungerer på ethvert WordPress-nettsted uavhengig av tema. Vi vil skrive et CSS-rammeverk for å style popup-blokken, fikse en typisk JavaScript-feil og legge til en smart forhåndslaster slik at innholdet vises jevnt uten flimring.

Trinn 1: CSS-rammeverk for det modale vinduet

Grunnleggende styling oppnår tre ting: den sentrerer vinduet på skjermen, dimmer bakgrunnen og tilpasser tabeller inne i den modale blokken. Her er fungerende kode for temaets style.css-fil eller fanen «Ekstra CSS» i tilpasseren:

1
/* Modal window — basic styles */
2
.modal.show {
3
    max-width: 650px;
4
}
5
 
6
.modal.show .kk-star-ratings.bottom-right.rgt {
7
    display: none;
8
}
9
 
10
/* Tables inside the modal window */
11
.modal.show table {
12
    border-collapse: separate;
13
    max-width: 100%;
14
    overflow: auto;
15
    table-layout: fixed;
16
    border: none;
17
    width: auto;
18
}
19
 
20
.modal.show table th {
21
    background: #F8F0F8;
22
    padding: 17px 10px;
23
    vertical-align: middle;
24
    color: #7F617E;
25
    font-size: 12px;
26
    text-align: left;
27
}
28
 
29
.modal.show table th:first-child {
30
    border-radius: 5px 0 0 5px;
31
}
32
 
33
.modal.show table th:last-child {
34
    border-radius: 0 5px 5px 0;
35
}
36
 
37
.modal.show table th.th-border {
38
    border-left: 1px solid #ECE1EC;
39
}
40
 
41
.modal.show table td {
42
    color: #424242;
43
    font-size: 13px;
44
    border-bottom: 1px dashed #E5E5E5;
45
    padding: 10px 5px 5px 4px;
46
    text-align: left;
47
}
48
 
49
.modal.show table tr:last-child td {
50
    border-bottom: none;
51
    padding-bottom: 20px;
52
}
53
 
54
.modal.show table td {
55
    border-right: 1px solid #F7F7F7;
56
}
57
 
58
.modal.show table td:last-child {
59
    border-right: none;
60
}
61
 
62
.modal.show table tr:first-child td {
63
    padding-top: 20px;
64
}

Nøkkelpunktet: .modal.show-velgeren sikrer at stiler bare brukes når det modale vinduet er aktivt. I sammenslått tilstand påvirker ikke blokken sidelayouten. Tabeller inne i den modale blokken får separat behandling: avrundede hjørner på overskrifter, stiplede raddelere og responsiv rulling.

Trinn 2: JavaScript-feil og hvordan du fikser dem

Det vanligste problemet når du jobber med modale vinduer i WordPress er feilen Uncaught ReferenceError: wp is not defined. Den oppstår når en utvidelse eller et egendefinert skript prøver å bruke wp-objektet (WordPress JavaScript-API-et) før kjernen har lastet det.

Når det gjelder WP Post Popup, var problemet i funksjonen modalCustomizer(), som hentet innstillinger fra admin via wp.customize. Slik så det ut i utvidelseskoden:

1
// Window load
2
$(window).on('load', function () {
3
    modalCustomizer();
4
});

Løsningen er enkel: kommenter ut kallet hvis du styler vinduet gjennom din egen CSS:

1
// Window load
2
$(window).on('load', function () {
3
    // modalCustomizer();
4
});

En generell regel for alle modale skript i WordPress: bekreft alltid innlastingsrekkefølgen for avhengigheter. Last inn skriptene dine via wp_enqueue_script() med eksplisitte avhengigheter til jquery og wp-util. Og sett aldri inn <script> direkte i brødteksten til et innlegg; det er en sikker vei til feil som $ is not defined og wp is not defined.

Trinn 3: smart forhåndslaster med jQuery

Forhåndslasterens jobb er å vise en lasteindikator mens innleggsinnhold lastes via AJAX. Når dataene ankommer, tones forhåndslasteren jevnt ut. For å spore DOM-endringer bruker vi mikrobiblioteket jquery-watch (25 linjer med kode som overvåker attributt- og egenskapsendringer på et element).

CSS for forhåndslasteren: en bakgrunns-gif-indikator sentrert i den modale blokken:

1
/* Modal window preloader */
2
.modal-wrapper.styled .modal {
3
    min-height: 385px;
4
    background-color: white;
5
    background-size: inherit;
6
}
7
 
8
div#modal-content {
9
    background-color: white;
10
}
11
 
12
.modal-wrapper.styled .modal {
13
    background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
14
}
15
 
16
#single-post-meta-manager {
17
    opacity: 0;
18
}
19
 
20
div.modal-content-post-wrapped.load {
21
    opacity: 1;
22
}

Slik fungerer det: i utgangspunktet er innholdet skjult (opacity: 0) og bakgrunnsforhåndslasteren er synlig. Når data er lastet, legger jQuery til .load-klassen, innholdet tones inn, og forhåndslasteren forsvinner. Her er JS-koden:

1
jQuery(document).ready(function($) {
2
 
3
    // Smooth appearance of content in the modal window
4
    $("div#single-post-meta-manager").animate({ 'opacity': '1' }).fadeIn('slow');
5
 
6
    // Add class-informer "content loaded"
7
    $("div.modal-content-post-wrapped").addClass("load");
8
 
9
    // Track modal window changes via jquery-watch
10
    $(".modal-wrapper").watch({
11
        properties: "top,left,opacity,display,attr_class",
12
        watchChildren: true,
13
        callback: function (data, i) {
14
            // Set preloader as background image
15
            $('.modal-wrapper.styled .modal').css(
16
                'background',
17
                'white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll'
18
            );
19
            // If content is loaded — remove preloader
20
            if ($('.modal-content-post-wrapped').is('.load')) {
21
                $('.modal.show').css('background', 'white');
22
            }
23
        }
24
    });
25
 
26
});

Viktig advarsel. Koden over bruker jQuery og jquery-watch-utvidelsen. Før du setter den inn, sørg for at jQuery er lastet inn og lastes før skriptet ditt. På moderne WordPress-nettsteder leveres jQuery med kjernen, så ingen ekstra inkluderinger er nødvendige. Legg til skriptet via wp_enqueue_script() i functions.php, ikke direkte i innleggsteksten.

Hva du skal gjøre hvis det modale vinduet ikke lastes

Gjennom over 6 år med arbeid med WordPress-modaler har jeg satt sammen en liste over typiske årsaker, fra de åpenbare til de obskure. Her er en diagnostisk sjekkliste:

• jQuery er ikke lastet eller er i konflikt. Sjekk nettleserkonsollen (F12 → Console). Feilen $ is not defined betyr at jQuery enten ikke er lastet inn eller at skriptet ditt kjørte for tidlig. Løsning: wp_enqueue_script('my-modal', ..., array('jquery')).
• *Sidemalen sender ikke ut the_content().* Noen egendefinerte maler som page-modal.php bruker get_the_content() i stedet for the_content(). Førstnevnte bruker ikke filtre, så shortcodes og formatering brytes.
• Konflikt med hurtigbufferutvidelser. Hvis du laster AJAX-innhold og nettstedet bruker WP Rocket eller LiteSpeed Cache, deaktiver hurtigbufring for URL-ene som det modale vinduet henter.
• CORS-feil ved lasting av en ekstern side. Nettleseren blokkerer forespørsler til et annet domene. Dette løses ved å proxy via WordPress REST API eller konfigurere CORS-headere på målserveren.
• Brytningspunkt. På mobile enheter erstattes det modale vinduet ofte av en direkte lenke slik at brukeren ganske enkelt navigerer til siden. Sjekk @media-reglene i CSS-en din: under 768px kan det hende at vinduet med vilje ikke vises.

⁉️🤔 Ofte stilte spørsmål

Utvidelse eller ren kode: hva bør jeg velge for et modalt vindu?

Hvis du trenger en ferdig løsning på 5 minutter, installer Popup Maker. Den dekker de fleste typiske scenarier: abonnementsskjemaer, raske forhåndsvisninger, varsler. Hvis du har et ikke-standard design, kompleks AJAX-logikk eller ytelseskrav (ikke en eneste ekstra kilobyte), skriv det for hånd. Ren kode gir full kontroll på bekostning av flere timers utvikling. Popup Maker legger til omtrent 40-60 KB med skript og stiler på en side. En egendefinert løsning får plass i 2-5 KB, en forskjell på 10-30 ganger. For et nettsted med høy trafikk er det merkbart.

Kan jeg åpne en ekstern side i et popup-vindu?

Ja, men med begrensninger. WordPress proxyer ikke tredjepartsinnhold som standard. Hvis målsiden ikke sender CORS-headeren Access-Control-Allow-Origin: *, vil nettleseren blokkere AJAX-forespørselen. Løsningen er å skrive din egen server-side proxy ved hjelp av wp_remote_get() eller sette opp et REST API-endepunkt som henter innholdet og leverer det til frontenden din. For offentlige API-er og pålitelige kilder er CORS vanligvis allerede konfigurert. GitHub API-et og WordPress.org API-et er åpne for lesing fra ethvert domene.

Hvordan påvirker bruk av modale vinduer SEO?

Innhold inne i et modalt vindu lastet via AJAX er mindre synlig for søkemotorer enn statisk HTML på en dedikert side. Regelen er enkel: hvis innholdet betyr noe for rangering, bør det ha sin egen kanoniske side med en direkte URL. Bruk det modale vinduet som et ekstra inngangspunkt, ikke som en erstatning for en side. Googlebot har kjørt JavaScript siden 2019, men indeksering av dynamisk lastet innhold er fortsatt ustabilt. Det er bedre å være på den sikre siden og ha en statisk versjon.

Hvorfor ble WP Post Popup stengt og hva kan erstatte den?

Utvidelsen wp-post-modal ble stengt i oktober 2023 på grunn av et uløst sikkerhetsproblem. Hvis den fortsatt er installert på nettstedet ditt, fjern den umiddelbart. Som erstatninger, vurder Popup Maker (gratis, universell) eller den egendefinerte løsningen beskrevet i denne artikkelen. Begge alternativene er sikre og støttet i 2026.

Er jQuery nødvendig for et modalt vindu i WordPress?

Nei, det er ikke nødvendig. Moderne, opprinnelig JavaScript (ES6+) dekker alle nødvendige operasjoner: fetch() for AJAX, classList for å veksle CSS-klasser og addEventListener for å håndtere klikk. Imidlertid er jQuery fortsatt dypt integrert i WordPress-kjernen og de fleste temaer, så det er enklere å bruke det som allerede er lastet enn å inkludere enda et rammeverk.

Modale vinduer i 2026: hva du skal installere og hvordan du bygger

Hvis du har nådd denne delen, har du tre klare veier. Popup Maker er for de som trenger en «sett det og glem det»-løsning. 700 tusen aktive installasjoner lyver ikke: utvidelsen er stabil, fleksibel og gratis i grunnversjonen. Bootstrap 5 Modal: hvis temaet ditt allerede kjører på Bootstrap, bruk den opprinnelige komponenten og ikke opprett ekstra avhengigheter. Ren kode er for perfeksjonister og alle som ønsker å kontrollere hver linje.

Personlig, i 2026 velger jeg den andre eller tredje veien. Utvidelser for modale vinduer løser problemet her og nå, men egendefinert kode løser det for alltid, uten oppdateringer, sårbarheter eller konflikter. Og 2-5 KB i stedet for 40-60 KB per side er et argument som er vanskelig å ignorere.

Prøv begge tilnærmingene på et test-subdomene og sammenlign. WordPress har overlevd i 20 år nettopp fordi det tilbyr valgfrihet, fra null kode til en ferdig utvidelse på et minutt.