💡 Så lägger du till ett popup-fönster i WordPress

• Välj din metod: Popup Maker-pluginet för en snabb start eller egen kod för full kontroll
• Installera Popup Maker via "Plugins → Lägg till nytt" och aktivera det
• Skapa en ny popup, ange innehåll för inlägg eller sida och konfigurera en trigger (klick, timer eller scroll)
• För en egen lösning, lägg till CSS-stilar för modalfönstret i din temafil eller anpassaren
• Köa JavaScript-filen via wp_enqueue_script() med ett jquery-beroende och kontrollera laddningsordningen
• Öppna sidan och testa popupen i din webbläsare medan du håller koll på konsolen efter fel

Vad modalfönster är och varför din WordPress-sajt behöver dem

Ett modalfönster är ett popup-block med innehåll som öppnas ovanpå sidan samtidigt som bakgrunden tonas ned. Användaren lämnar aldrig den aktuella webbadressen men ser ytterligare information: inläggstext, ett formulär, en video eller ett galleri.

För en WordPress-sajt löser modalfönster tre specifika problem. För det första, en användarpanel: istället för en separat profilsida visar du inställningar, ordrar eller meddelanden i ett popup-block. För det andra, snabb förhandsvisning av innehåll: en besökare klickar på ett produktkort eller en artikelteaser och ser hela innehållet utan en omladdning. För det tredje, formulär för lead capture: prenumerations-, registrerings- och kontaktformulär visas precis när besökaren är redo att agera.

Den främsta fördelen med ett modalfönster jämfört med en separat sida är hastighet. Det finns ingen väntan på en fullständig sidladdning med sidhuvud, sidofält och sidfot. Du laddar bara the_content(), rent innehåll. Detta sparar både användartid och serverresurser.

WP Post Popup: varför veteranpluginet lämnade scenen

Fram till 2023 var ett av de mest populära alternativen för modalfönster i WordPress pluginet WP Post Popup (wp-post-modal). Det kunde förvandla vilket inlägg, vilken sida eller anpassad innehållstyp som helst till en popup; allt du behövde göra var att ange en webbadress med en parameter. Pluginet fungerade med shortcodes, Contact Form 7 och BuddyPress; det kunde ladda externa sidor och till och med selektivt visa en specifik div från en annan webbplats.

I oktober 2023 stängdes pluginet. Orsaken var en säkerhetssårbarhet. WordPress.org-sidan visar nu statusen "This plugin has been closed… Reason: Security Issue." Sedan dess har det inte varit tillgängligt för nedladdning, och aktiva installationer har sjunkit till noll.

Men idéerna bakom WP Post Popup har inte försvunnit. Uppgiften att visa innehåll i en popup utan omladdning är fortfarande lösbar idag, och via två vägar: moderna plugins och ren kod.

3 Moderna sätt att lägga till ett modalfönster i WordPress

Här är de aktuella alternativen för 2026, från färdiga plugins till en helt egen lösning.

Popup Maker är det mest populära gratispluginet för popups: 700 000+ aktiva installationer och 4,9 i betyg på WordPress.org. Det skapar alla typer av popups, från modalfönster med innehåll till slide-in-paneler och banners. Triggers inkluderar klick, timer, scroll eller exit intent. Om du behöver en snabb lösning utan kod är detta den bästa startpunkten.

Bootstrap 5 är inbyggt i många moderna teman. Dess inbyggda Modal-komponent fungerar direkt: responsivitet, animation, stängning vid Escape och klick utanför fönstret. Inkludera bara Bootstrap i ditt tema och använd den färdiga märkningen med dataattribut.

Ren kod är vägen för dem som behöver total kontroll över varje pixel och beteende i fönstret. Inga extra skript, beroenden eller konflikter med andra plugins. Detta är metoden vi kommer att gå igenom steg för steg.

Videon ovan är en praktisk handledning för att skapa ett eget modalfönster i WordPress från grunden: 12 minuter ren kod med ett färdigt resultat i slutet.

Steg-för-steg-guide: bygga ett modalfönster från grunden

Denna metod fungerar på alla WordPress-sajter oavsett tema. Vi kommer att skriva ett CSS-ramverk för att styla popup-blocket, åtgärda ett typiskt JavaScript-fel och lägga till en smart preloader så att innehållet visas smidigt utan att flimra.

Steg 1: CSS-ramverk för modalfönstret

Grundläggande styling åstadkommer tre saker: den centrerar fönstret på skärmen, tonar ned bakgrunden och anpassar tabeller inuti modalblocket. Här är fungerande kod för ditt temas style.css-fil eller fliken "Ytterligare CSS" i anpassaren:

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
}

Nyckelpunkten: .modal.show-selektorn säkerställer att stilar endast tillämpas när modalfönstret är aktivt. I hopfällt läge påverkar blocket inte sidlayouten. Tabeller inuti modalblocket får separat behandling: rundade hörn på rubriker, streckade radavgränsare och responsiv scrollning.

Steg 2: JavaScript-fel och hur du åtgärdar dem

Det vanligaste problemet när man arbetar med modalfönster i WordPress är felet Uncaught ReferenceError: wp is not defined. Det uppstår när ett plugin eller eget skript försöker använda wp-objektet (WordPress JavaScript-API) innan kärnan har laddat det.

I fallet med WP Post Popup låg problemet i funktionen modalCustomizer(), som hämtade inställningar från admin via wp.customize. Så här såg det ut i plugin-koden:

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

Lösningen är enkel: kommentera bort anropet om du stylar fönstret via din egen CSS:

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

En allmän regel för alla modala skript i WordPress: kontrollera alltid laddningsordningen för beroenden. Köa dina skript via wp_enqueue_script() med explicita beroenden på jquery och wp-util. Och infoga aldrig <script> direkt i inläggets brödtext; det är en säker väg till fel som $ is not defined och wp is not defined.

Steg 3: smart preloader med jQuery

Preloaderns jobb är att visa en laddningsindikator medan inläggsinnehåll laddas via AJAX. När datan har anlänt tonas preloadern ut smidigt. För att spåra DOM-ändringar använder vi mikrobiblioteket jquery-watch (25 rader kod som övervakar attribut- och egenskapsändringar på ett element).

CSS för preloadern: en bakgrunds-gif-indikator centrerad i modalblocket:

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
}

Så fungerar det: initialt är innehållet dolt (opacity: 0) och bakgrundspreloadern är synlig. När data har laddats lägger jQuery till .load-klassen, innehållet tonas in och preloadern försvinner. Här är 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 varning. Koden ovan använder jQuery och jquery-watch-pluginet. Innan du infogar den, se till att jQuery är köat och laddas före ditt skript. På moderna WordPress-sajter levereras jQuery med kärnan, så inga ytterligare inkluderingar är nödvändiga. Lägg till skriptet via wp_enqueue_script() i functions.php, inte direkt i inläggets brödtext.

Vad du ska göra om modalfönstret inte laddas

Under över 6 års arbete med WordPress-modaler har jag sammanställt en lista över typiska orsaker, från de uppenbara till de mer svårfunna. Här är en diagnostisk checklista:

• jQuery är inte laddat eller orsakar konflikt. Kontrollera webbläsarkonsolen (F12 → Console). Felet $ is not defined betyder att jQuery antingen inte är köat eller att ditt skript kördes för tidigt. Lösning: wp_enqueue_script('my-modal', ..., array('jquery')).
• Sidmallen matar inte ut the_content(). Vissa anpassade mallar som page-modal.php använder get_the_content() istället för the_content(). Den förstnämnda tillämpar inte filter, så shortcodes och formatering går sönder.
• Konflikt med caching-plugins. Om du laddar AJAX-innehåll och sajten använder WP Rocket eller LiteSpeed Cache, inaktivera caching för de webbadresser som modalfönstret hämtar.
• CORS-fel vid laddning av en extern sida. Webbläsaren blockerar förfrågningar till en annan domän. Detta löses genom proxy via WordPress REST API eller genom att konfigurera CORS-headers på målservern.
• Brytpunkt. På mobila enheter ersätts modalfönstret ofta av en direktlänk så att användaren helt enkelt navigerar till sidan. Kontrollera @media-reglerna i din CSS: under 768px kanske fönstret avsiktligt inte visas.

⁉️🤔 Vanliga frågor

Plugin eller ren kod: vad ska jag välja för ett modalfönster?

Om du behöver en färdig lösning på 5 minuter, installera Popup Maker. Det täcker de flesta typiska scenarier: prenumerationsformulär, snabba förhandsvisningar, aviseringar. Om du har en icke-standarddesign, komplex AJAX-logik eller prestandakrav (inte ett enda extra kilobyte), skriv det för hand. Ren kod ger full kontroll till priset av flera timmars utveckling. Popup Maker lägger till ungefär 40-60 KB skript och stilar på en sida. En egen lösning ryms inom 2-5 KB, en skillnad på 10-30 gånger. För en sajt med hög trafik är det märkbart.

Kan jag öppna en extern sida i ett popup-fönster?

Ja, men med begränsningar. WordPress proxar inte tredjepartsinnehåll som standard. Om målsajten inte skickar CORS-headern Access-Control-Allow-Origin: * kommer webbläsaren att blockera AJAX-förfrågan. Lösningen är att skriva en egen server-side proxy med wp_remote_get() eller sätta upp en REST API-endpoint som hämtar innehållet och levererar det till din frontend. För publika API:er och betrodda källor är CORS vanligtvis redan konfigurerat. GitHub API och WordPress.org API är öppna för läsning från vilken domän som helst.

Hur påverkar användningen av modalfönster SEO?

Innehåll inuti ett modalfönster som laddas via AJAX är mindre synligt för sökmotorer än statisk HTML på en dedikerad sida. Regeln är enkel: om innehållet är viktigt för rankning bör det ha en egen kanonisk sida med en direkt webbadress. Använd modalfönstret som en extra ingång, inte som en ersättning för en sida. Googlebot har kört JavaScript sedan 2019, men indexering av dynamiskt laddat innehåll är fortfarande instabil. Det är bättre att ta det säkra före det osäkra och ha en statisk version.

Varför stängdes WP Post Popup och vad kan ersätta det?

Pluginet wp-post-modal stängdes i oktober 2023 på grund av en olöst säkerhetssårbarhet. Om det fortfarande är installerat på din sajt, ta bort det omedelbart. Som ersättning, överväg Popup Maker (gratis, universellt) eller den egna lösningen som beskrivs i denna artikel. Båda alternativen är säkra och supporteras under 2026.

Krävs jQuery för ett modalfönster i WordPress?

Nej, det krävs inte. Modern inbyggd JavaScript (ES6+) täcker alla nödvändiga operationer: fetch() för AJAX, classList för att växla CSS-klasser och addEventListener för att hantera klick. jQuery är dock fortfarande djupt integrerat i WordPress-kärnan och de flesta teman, så det är enklare att använda det som redan är laddat än att inkludera ytterligare ett ramverk.

Modalfönster 2026: vad du ska installera och hur du bygger

Om du har nått detta avsnitt har du tre färdiga vägar. Popup Maker är för dem som behöver en "ställ in och glöm"-lösning. 700 tusen aktiva installationer ljuger inte: pluginet är stabilt, flexibelt och gratis i sin grundversion. Bootstrap 5 Modal: om ditt tema redan körs på Bootstrap, använd den inbyggda komponenten och skapa inte extra beroenden. Ren kod är för perfektionister och alla som vill kontrollera varje rad.

Personligen väljer jag 2026 den andra eller tredje vägen. Plugins för modalfönster löser problemet här och nu, men egen kod löser det för alltid, utan uppdateringar, sårbarheter eller konflikter. Och 2-5 KB istället för 40-60 KB per sida är ett argument som är svårt att ignorera.

Prova båda tillvägagångssätten på en testsubdomän och jämför. WordPress har överlevt i 20 år just för att det erbjuder valfrihet, från noll kod till ett färdigt plugin på en minut.