Integroi modaalinen valintaikkuna käyttämällä sisäänrakennettua ThickBoxia WordPressissä

Modaaliset valintaikkunat on joskus välttämättä integroitava WordPress-verkkosivustoon. Modaalisen valintaikkunan avulla voimme näyttää sisällön nykyisen sivun yläosassa.

Kun kyse on modaalisesta ponnahdusikkunasta, ihmiset yleensä haluavat käyttää Lightbox- tai Fancybox- kirjastoa. Nämä ovat suosittuja kirjastoja ja toimivat melko hyvin.

Jotta nämä kirjastot voidaan sisällyttää WordPressiin, meidän on ladattava JS- ja CSS-tiedostot kirjastosta ja sisällytettävä se projektiin tavalliseen tapaan. Sen jälkeen kirjaston ohjeiden mukaan meidän on pakattava sisältö, kutsuttava menetelmä modaalisen ikkunan avaamiseksi.

WordPress sisälsi ThickBox jQuery -laajennuksen modifioidulla versiolla. Ja sitä voidaan käyttää ulkoisten kirjastojen sijasta. Tämän ydinominaisuuden avulla saamme käyttöliittymän, joka on sama kuin WordPress-järjestelmänvalvojan modaaliset ponnahdusikkunat kuten mediapainikkeessa.

Voit kokeilla tätä sisäänrakennettua ominaisuutta. Jos se täyttää tarpeesi, se säästää aikaa ulkoisen kirjaston integroinnissa.

Kun käytät ThickBoxia sisäisen sisällön kanssa, saat tuotoksen jotain, kuten alla olevassa kuvakaappauksessa näkyy.

Modaalinen valintaikkuna käyttämällä ThickBoxia

WordPress ThickBox toimii hyvin sisäisen sisällön kanssa. Lyhytkoodia voidaan käyttää myös modaalisessa valintaikkunassa. Voit esimerkiksi näyttää yhteyslomakkeen modaalisessa ikkunassa käyttämällä yhteydenottolomakkeen 7 lyhytkoodia.

Tämän jälkeen katsotaan, kuinka ThickBoxia käytetään WordPressissä.

Esimerkiksi näytämme nuken sisäistä sisältöä ankkuritunnisteen napsautuksella. Joten, aseta alla oleva koodi minne haluat käyttää ThickBoxia.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

Thichboxin käyttämiseksi meidän on sisällytettävä ensimmäinen add_ThickBox()menetelmä. Tämä toiminto lataa kirjaston ytimestä. Seuraavaksi meidän on annettava ankkuritunnisteen href-määritteelle #TB_inline sekä säilön leveys, korkeus ja tunnus, johon sisäinen sisältö on kääritty.

Samalla tavalla, jos haluat näyttää yhteydenottolomakkeen modaalisessa valintaikkunassa, sinun on sijoitettava pikanäppäimen sijaan pikakoodi do_shortcode()WordPress-toiminnon avulla.

<?php echo do_shortcode('[shortcode_here]'); ?>

Se siitä! Toivomme, että ymmärrät kuinka lisätä modaalinen valintaikkuna käyttämällä ThickBoxia WordPressissä. Haluamme kuulla ajatuksesi alla olevassa kommentissa.

Voit myös lukea artikkeleitamme Uudelleenohjaus kiitossivulle yhteydenottolomakkeen 7 lähettämisen jälkeen ja kuinka yhteystietolomakkeen 7 lähetysten tallentaminen WordPress-tietokantaan