WordPressin modaalidialogien lisääminen (käyttäen staattista dataa)

Viimeisin päivitys marras 15, 2022

Sisältö

WordPressin modaalidialogit: Staattiset tiedot

Edellisessä viestissä kävin läpi prosessin, joka vaaditaan, jotta WordPressin modaalivalintaikkunat ilmestyvät hallinta-alueen kontekstiin.

Tämä käyttää:

sisäänrakennettu WordPress API,
toimitettu Thickbox-kirjasto,
ja esimerkkikoodin sen näyttämiseksi.

Tässä opetusohjelmassa käyn läpi modaalisen valintaikkunan täyttämisen tiedoilla. Sen jälkeen kerron, kuinka tiedot täytetään dynaamisesti Ajaxin avulla.

WordPressin modaalidialogit: Staattiset tiedot

Tätä viestiä varten oletan, että olet lukenut sarjan ensimmäisen viestin ja ymmärrät koodin toiminnan (vaikka on vielä parempi, jos sinulla on toimiva koodi paikallisessa kehitysympäristössäsi).

Siitä huolimatta, puhutaanpa metalaatikon täyttämisestä tiedoilla. Eli katsotaan:

tietojen sijoittaminen metalaatikon runkoon,
täyttämällä otsikon sisällöllä.

Kun se on tehty, siirrymme tietojen keräämiseen palvelimelta asynkronisesti ja sitten täyttämään tähän mennessä meillä olevan koodin.

1 Tietojen määrittäminen

Sisällön lisääminen metalaatikkoon on todella helppoa. Muista edellisestä viestistä; meillä on HTML-elementti, jossa on näyttö: none; arvo sen tyylimääritteelle.

Tässä alkuperäinen ydin :

<?php
/**
 * A basic plugin page that will eventually be used to demonstrate how to use the
 * Thickbox library included with WordPress.
 *
 * @package Acme
 */
add_thickbox();
?>

<div id="acme-thickbox-demo" class="wrap">

  <h1>Acme Thickbox Demo</h1>
  <p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>

  <div id="acme-thickbox-content">
    <a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
    <div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
  </div><!-- #acme-thickbox-content -->

</div><!-- #acme-thickbox-demo -->

Sisällön lisääminen modaalivalintaikkunaan on helppoa. Etsi vain elementti acme-modal-dialog ja täytä se sitten kaikilla tiedoilla, jotka haluat näyttää käyttäjälle.

Katso esimerkiksi tämä koodiesimerkki :

<div id="acme-modal-dialog" style="display:none;">
  <h2>Hello World</h2>
  <p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
  <p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
  <p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
  <p>
    <ul>
      <li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
      <li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
    </ul>
  </p>
  <p>
    Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
    Ben dodonna askajian teevan palpatine lobot beru.
  </p>
</div><!-- #acme-modal-dialog -->

Kun käyttäjä napsauttaa ankkuria edellisessä viestissä (se, jossa lukee Näytä valintaikkuna ), modaali näytetään yllä näkyvän sisällön kanssa.

Yleisesti ottaen sen pitäisi näyttää siltä, mitä näet yllä, perustuen ydinsisältöön hahmoteltuun koodiin.

2 Otsikon asettaminen

Huomaa seuraavaksi, että modaalinen valintaikkuna sisältää vaihtoehdon hylätä se aina, kun käyttäjä on lukenut sen. Tämän ominaisuuden tarjoamisen lisäksi huomaa, että valintaikkunan alueella on paljon tyhjää tilaa.

Tiedät mitä tarkoitan: se on alue, jota yleensä käytetään otsikkopalkkina. Thickbox API:n ja sen integroinnin WordPressiin ansiosta voimme helposti lisätä sen otsikoksemme. Se voi olla dynaaminen (ikään kuin tieto tulisi Ajaxin kautta) tai se voi olla staattista.

Ja koska työskentelemme tässä viestissä staattisen tiedon kanssa, määritetään se. Tätä varten meidän on lisättävä modaalin näyttämisestä vastaavaan ankkuriin title -attribuutti.

Kun olet löytänyt näytön käynnistämisestä vastaavan ankkurin (muista, että se sisältää tekstin Display The Dialog ), lisää siihen otsikko-attribuutti, jotta koodi näyttää tältä :

<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>

Nyt kun napsautat ankkuria käynnistääksesi näytön, se ei ainoastaan näytä valintaikkunaa, kuten yllä olevassa kuvassa, vaan se sisältää myös otsikon:

Hyödyllinen, eikö? Mutta entä jos se olisi dynaamisempi?

Nyt Ajaxiin

Ja dynaaminen luonto on se, mitä aion käsitellä seuraavaksi. Tarkemmin sanottuna haluan käydä läpi prosessin, jossa otetaan se, mitä meillä on täällä, eli staattista dataa, ja korvataan se asynkronisesti haetulla tiedolla.

Eli käyttäjä napsauttaa Display The Dialog -ankkuria ja sitten:

palvelimelle tehdään pyyntö,
tiedot haetaan,
ja sitten tiedot johdetaan valintaikkunan otsikkoon ja sisältöalueille.

Se on hieman parempi kuin staattisen tiedon käyttäminen ja tekee sovelluksesta dynaamisemman.

: tommcfarlin.com