💡 Näin lisäät ponnahdusikkunan WordPressiin

• Valitse lähestymistapasi: Popup Maker-lisäosa nopeaan aloitukseen tai räätälöity koodi täyteen hallintaan
• Asenna Popup Maker kohdasta "Lisäosat → Lisää uusi" ja aktivoi se
• Luo uusi ponnahdusikkuna, aseta artikkeli- tai sivusisältö ja määritä laukaisin (klikkaus, ajastin tai vieritys)
• Räätälöityä ratkaisua varten lisää modaali-ikkunan CSS-tyylit teematiedostoosi tai muokkausnäkymään
• Ota JavaScript-tiedosto käyttöön wp_enqueue_script()-funktiolla jquery-riippuvuudella ja varmista latausjärjestys
• Avaa sivu ja testaa ponnahdusikkunaa selaimessasi samalla konsolia virheiden varalta seuraten

Mitä modaali-ikkunat ovat ja miksi WordPress-sivustosi tarvitsee niitä

Modaali-ikkuna on ponnahdusmuotoinen sisältölohko, joka avautuu sivun päälle himmentäen taustan. Käyttäjä ei koskaan poistu nykyisestä URL-osoitteesta, mutta näkee lisätietoa: artikkelitekstiä, lomakkeen, videon tai gallerian.

WordPress-sivustolle modaali-ikkunat ratkaisevat kolme erityistä ongelmaa. Ensinnäkin käyttäjän hallintapaneeli: erillisen profiilisivun sijaan näytät asetukset, tilaukset tai viestit ponnahduslohkossa. Toiseksi nopea sisällön esikatselu: kävijä klikkaa tuotekorttia tai artikkelivinkkiä ja näkee koko sisällön ilman uudelleenlatausta. Kolmanneksi liidienkaappauslomakkeet: tilaus-, rekisteröitymis- ja yhteydenottolomakkeet ilmestyvät juuri silloin, kun kävijä on valmis toimimaan.

Modaali-ikkunan keskeinen etu erilliseen sivuun verrattuna on nopeus. Ei tarvitse odottaa koko sivulatausta otsikoineen, sivupalkkeineen ja alatunnisteineen. Lataat vain the_content()-funktion, pelkkää sisältöä. Tämä säästää sekä käyttäjän aikaa että palvelimen resursseja.

WP Post Popup: miksi veteraanilisäosa poistui näyttämöltä

Vuoteen 2023 asti yksi suosituimmista modaali-ikkunoiden ratkaisuista WordPressissä oli WP Post Popup (wp-post-modal) -lisäosa. Se pystyi muuttamaan minkä tahansa artikkelin, sivun tai mukautetun sisältötyypin ponnahdusikkunaksi; tarvitsi vain määrittää URL-osoite parametrilla. Lisäosa toimi shortcodejen, Contact Form 7:n ja BuddyPressin kanssa; se pystyi lataamaan ulkoisia sivuja ja jopa näyttämään valikoidusti tietyn div-elementin toiselta sivustolta.

Lokakuussa 2023 lisäosa suljettiin. Syynä oli tietoturvahaavoittuvuus. WordPress.org-sivulla näkyy nyt tila "Tämä lisäosa on suljettu… Syy: Tietoturvaongelma." Sen jälkeen se ei ole ollut ladattavissa, ja aktiiviset asennukset ovat pudonneet nollaan.

Mutta WP Post Popupin taustalla olevat ideat eivät ole kadonneet minnekään. Sisällön näyttäminen ponnahdusikkunassa ilman uudelleenlatausta on yhä ratkaistavissa tänä päivänä, ja kahdella reitillä: nykyaikaisilla lisäosilla ja puhtaalla koodilla.

3 Nykyaikaista tapaa lisätä modaali-ikkuna WordPressiin

Tässä ovat ajankohtaiset vaihtoehdot vuodelle 2026, valmiista lisäosista täysin räätälöityyn ratkaisuun.

Popup Maker on suosituin ilmainen lisäosa ponnahdusikkunoille: yli 700 000 aktiivista asennusta ja 4,9 arvosana WordPress.orgissa. Se luo minkä tahansa tyyppisen ponnahdusikkunan, modaali-ikkunoista sisältöineen sisään liukuviin paneeleihin ja bannereihin. Laukaisimia ovat klikkaus, ajastin, vieritys tai poistumisaie. Jos tarvitset nopean koodittoman ratkaisun, tämä on paras lähtökohta.

Bootstrap 5 on sisäänrakennettu moniin nykyaikaisiin teemoihin. Sen natiivi Modal-komponentti toimii suoraan laatikosta: responsiivisuus, animaatio, sulkeminen Escape-näppäimellä ja ikkunan ulkopuolelle klikkaamalla. Sisällytä vain Bootstrap teemaasi ja käytä valmista merkintää data-attribuuteilla.

Puhdas koodi on polku niille, jotka tarvitsevat täyden hallinnan ikkunan jokaiseen pikseliin ja toimintaan. Ei ylimääräisiä skriptejä, riippuvuuksia tai ristiriitoja muiden lisäosien kanssa. Tämä on menetelmä, jonka käymme läpi vaihe vaiheelta.

Yllä oleva video on käytännön opas mukautetun modaali-ikkunan luomiseen WordPressissä tyhjästä: 12 minuuttia puhdasta koodia ja valmis lopputulos lopussa.

Vaiheittainen opas: modaali-ikkunan rakentaminen tyhjästä

Tämä menetelmä toimii millä tahansa WordPress-sivustolla teemasta riippumatta. Kirjoitamme CSS-kehyksen ponnahduslohkon tyylittelyyn, korjaamme tyypillisen JavaScript-virheen ja lisäämme älykkään esilataajan, jotta sisältö ilmestyy sulavasti ilman välkkymistä.

Vaihe 1: CSS-kehys modaali-ikkunalle

Perustyylittely hoitaa kolme asiaa: se keskittää ikkunan ruudulle, himmentää taustan ja mukauttaa taulukot modaalilohkon sisällä. Tässä on toimiva koodi teemasi style.css-tiedostoon tai muokkausnäkymän "Lisä-CSS"-välilehdelle:

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
}

Avainkohta: .modal.show-valitsin varmistaa, että tyylit otetaan käyttöön vain, kun modaali-ikkuna on aktiivinen. Suljetussa tilassa lohko ei vaikuta sivun asetteluun. Modaalilohkon sisällä olevat taulukot saavat erillisen käsittelyn: pyöristetyt kulmat otsikoihin, katkoviivalla erotetut rivit ja responsiivinen vieritys.

Vaihe 2: JavaScript-virheet ja niiden korjaaminen

Yleisin ongelma modaali-ikkunoiden kanssa WordPressissä on Uncaught ReferenceError: wp is not defined -virhe. Se ilmenee, kun lisäosa tai mukautettu skripti yrittää käyttää wp-objektia (WordPressin JavaScript-rajapinta) ennen kuin ydin on ladannut sen.

WP Post Popupin tapauksessa ongelma oli modalCustomizer()-funktiossa, joka haki asetuksia hallintapaneelista wp.customize-rajapinnan kautta. Tältä se näytti lisäosan koodissa:

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

Korjaus on yksinkertainen: kommentoi kutsu pois, jos tyylität ikkunan omalla CSS:lläsi:

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

Yleinen sääntö kaikille modaaliskripteille WordPressissä: varmista aina riippuvuuksien latausjärjestys. Ota skriptisi käyttöön wp_enqueue_script()-funktiolla ja määritä eksplisiittiset riippuvuudet jquery- ja wp-util-kirjastoihin. Äläkä koskaan lisää <script>-elementtiä suoraan artikkelin runkoon; se on varma tie virheisiin, kuten $ is not defined ja wp is not defined.

Vaihe 3: älykäs esilataaja jQuerylla

Esilataajan tehtävä on näyttää latausilmaisin, kun artikkelin sisältö latautuu AJAXilla. Kun data saapuu, esilataaja häivyttyy sulavasti pois. DOM-muutosten seuraamiseen käytämme mikrokirjastoa jquery-watch (25 koodiriviä, jotka tarkkailevat elementin attribuutti- ja ominaisuusmuutoksia).

CSS esilataajalle: taustalla oleva gif-ilmaisin keskitettynä modaalilohkoon:

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
}

Miten se toimii: aluksi sisältö on piilotettu (opacity: 0) ja taustan esilataaja on näkyvissä. Kun data on latautunut, jQuery lisää .load-luokan, sisältö häivyttyy näkyviin ja esilataaja katoaa. Tässä on JS-koodi:

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
});

Tärkeä varoitus. Yllä oleva koodi käyttää jQuerya ja jquery-watch-lisäosaa. Ennen sen lisäämistä varmista, että jQuery on otettu käyttöön ja latautuu ennen skriptiäsi. Nykyaikaisilla WordPress-sivustoilla jQuery tulee ytimen mukana, joten erillisiä sisällytyksiä ei tarvita. Lisää skripti wp_enqueue_script()-funktiolla functions.php-tiedostossa, ei suoraan artikkelin runkoon.

Mitä tehdä, jos modaali-ikkuna ei lataudu

Yli 6 vuoden aikana WordPress-modaalien parissa olen koonnut listan tyypillisistä syistä, ilmeisistä vaikeasti havaittaviin. Tässä on diagnostinen tarkistuslista:

• jQuery ei ole ladattu tai se on ristiriidassa. Tarkista selaimen konsoli (F12 → Console). Virhe $ is not defined tarkoittaa, että jQuerya ei joko ole otettu käyttöön tai skriptisi suoritettiin liian aikaisin. Ratkaisu: wp_enqueue_script('my-modal', ..., array('jquery')).
• Sivupohja ei tulosta the_content()-funktiota. Jotkin mukautetut pohjat, kuten page-modal.php, käyttävät get_the_content()-funktiota the_content()-funktion sijaan. Ensin mainittu ei aja suodattimia, joten shortcodet ja muotoilu rikkoutuvat.
• Ristiriita välimuistilisäosien kanssa. Jos lataat AJAX-sisältöä ja sivusto käyttää WP Rocketia tai LiteSpeed Cachea, poista välimuistitus käytöstä URL-osoitteille, joita modaali-ikkuna hakee.
• CORS-virhe ladattaessa ulkoista sivua. Selain estää pyynnöt eri verkkotunnukseen. Tämä ratkaistaan välittämällä pyyntö WordPress REST API:n kautta tai määrittämällä CORS-otsakkeet kohdepalvelimelle.
• Rajapiste. Mobiililaitteilla modaali-ikkuna korvataan usein suoralla linkillä, jotta käyttäjä yksinkertaisesti navigoi sivulle. Tarkista @media-säännöt CSS:ssäsi: alle 768px leveydellä ikkuna ei ehkä ilmesty tarkoituksella.

⁉️🤔 Usein kysytyt kysymykset

Lisäosa vai puhdas koodi: mitä minun pitäisi valita modaali-ikkunalle?

Jos tarvitset valmiin ratkaisun 5 minuutissa, asenna Popup Maker. Se kattaa useimmat tyypilliset skenaariot: tilauslomakkeet, nopeat esikatselut, ilmoitukset. Jos sinulla on epästandardi design, monimutkaista AJAX-logiikkaa tai suorituskykyvaatimuksia (ei yhtään ylimääräistä kilotavua), kirjoita se itse. Puhdas koodi antaa täyden hallinnan usean tunnin kehitystyön hinnalla. Popup Maker lisää sivulle noin 40-60 kt skriptejä ja tyylejä. Räätälöity ratkaisu mahtuu 2-5 kilotavuun, ero on 10-30-kertainen. Paljon liikennettä saavalle sivustolle se on huomattava.

Voinko avata ulkoisen sivun ponnahdusikkunassa?

Kyllä, mutta rajoituksin. WordPress ei oletuksena välitä kolmannen osapuolen sisältöä. Jos kohdesivusto ei lähetä CORS-otsaketta Access-Control-Allow-Origin: *, selain estää AJAX-pyynnön. Kiertotapa on kirjoittaa oma palvelinpuolen välityspalvelin käyttäen wp_remote_get()-funktiota tai pystyttää REST API -päätepiste, joka hakee sisällön ja toimittaa sen frontendillesi. Julkisille rajapinnoille ja luotetuille lähteille CORS on tyypillisesti jo määritetty. GitHubin API ja WordPress.orgin API ovat avoimia luettavaksi mistä tahansa verkkotunnuksesta.

Miten modaali-ikkunoiden käyttö vaikuttaa hakukoneoptimointiin?

AJAXilla ladatun modaali-ikkunan sisältö on vähemmän näkyvää hakukoneille kuin staattinen HTML omalla sivullaan. Sääntö on yksinkertainen: jos sisällöllä on merkitystä sijoituksen kannalta, sillä tulisi olla oma kanoninen sivunsa suoralla URL-osoitteella. Käytä modaali-ikkunaa lisäsisäänkäyntinä, älä sivun korvikkeena. Googlebot on suorittanut JavaScriptiä vuodesta 2019, mutta dynaamisesti ladatun sisällön indeksointi on yhä epävakaata. On parempi pelata varman päälle ja pitää staattinen versio.

Miksi WP Post Popup suljettiin ja mikä voi korvata sen?

wp-post-modal-lisäosa suljettiin lokakuussa 2023 ratkaisemattoman tietoturvahaavoittuvuuden vuoksi. Jos se on yhä asennettuna sivustollesi, poista se välittömästi. Korvaajina harkitse Popup Makeria (ilmainen, yleiskäyttöinen) tai tässä artikkelissa kuvattua räätälöityä ratkaisua. Molemmat vaihtoehdot ovat turvallisia ja tuettuja vuonna 2026.

Tarvitaanko jQuerya modaali-ikkunaan WordPressissä?

Ei, se ei ole pakollinen. Moderni natiivi JavaScript (ES6+) kattaa kaikki tarvittavat toiminnot: fetch() AJAXille, classList CSS-luokkien vaihtamiseen ja addEventListener klikkausten käsittelyyn. jQuery on kuitenkin yhä syvälle integroitunut WordPress-ytimeen ja useimpiin teemoihin, joten on helpompaa käyttää sitä, mikä on jo ladattu, kuin sisällyttää vielä yksi kehys.

Modaali-ikkunat vuonna 2026: mitä asentaa ja miten rakentaa

Jos olet päässyt tähän osioon, sinulla on kolme valmista polkua. Popup Maker on niille, jotka tarvitsevat "asenna ja unohda" -ratkaisun. 700 tuhatta aktiivista asennusta ei valehtele: lisäosa on vakaa, joustava ja ilmainen perusversiossaan. Bootstrap 5 Modal: jos teemasi toimii jo Bootstrapilla, käytä natiivia komponenttia äläkä luo ylimääräisiä riippuvuuksia. Puhdas koodi on perfektionisteille ja kaikille, jotka haluavat hallita jokaista riviä.

Henkilökohtaisesti valitsen vuonna 2026 toisen tai kolmannen polun. Modaali-ikkunoiden lisäosat ratkaisevat ongelman tässä ja nyt, mutta räätälöity koodi ratkaisee sen ikuisesti, ilman päivityksiä, haavoittuvuuksia tai ristiriitoja. Ja 2-5 kt 40-60 kt sijaan sivua kohden on argumentti, jota on vaikea sivuuttaa.

Kokeile molempia lähestymistapoja testialiverkkotunnuksella ja vertaile. WordPress on selvinnyt 20 vuotta juuri siksi, että se tarjoaa valinnanvapauden, nollasta koodista valmiiseen lisäosaan minuutissa.