WordPressin modaalidialogien lisääminen (sisäänrakennetuilla kirjastoilla)

Viimeisin päivitys marras 9, 2022

Sisältö

Aina kun on kyse ratkaisujen kehittämisestä asiakkaille, tulee joskus aikoja, jolloin joudut todennäköisesti näyttämään tietoja WordPressin modaalisissa valintaikkunoissa.

Tähän on saatavilla monia ratkaisuja, ja mitä paremmin tunnet JavaScriptin, erilaiset kirjastot ja niillä olevat kirjastot, sitä vaikeampaa (tai ehkä jopa helpompaa) on valita käytettävä.

Mutta WordPressissä on sisäänrakennettu infrastruktuuri, joka tekee toiminnallisuuden sisällyttämisestä WordPressiin triviaalia. Joten kolmessa tulevassa postauksessa käsittelen seuraavaa:

Kuinka sisällyttää WordPressin modaalidialogeja sisäänrakennettujen kirjastojen avulla,
Modaalisten valintaikkunoiden täyttäminen tiedoilla,
Modaalivalintaikkunan täyttäminen dynaamisilla tiedoilla Ajaxin kautta.

Sarjan luonteen vuoksi viestit eivät ole peräkkäin, mutta niissä kaikissa käytetään ainutlaatuista tunnistetta, jonka avulla voit lisätä kirjanmerkkeihin ja viitata sarjana, kun viestit ovat valmiit.

Puhutaanpa WordPressin modaalidialogien helposta sisällyttämisestä sisäänrakennetuilla kirjastoilla.

WordPressin modaalidialogit, osa 1

Aluksi oletan, että sinulla on hallintasivun perusperusta.

Plugin-sivuilla

Eli sinulla on kaikki mitä tarvitset laajennuksen asennukseen, aktivoimiseen ja sitten valikon tai alivalikon kautta näkyvään sivuun.

Jos ei, katso tämä viesti nähdäksesi kuinka pääset alkuun.

Kun olet tehnyt sen, tarvitset laajennussivun perusinfrastruktuurin. Tätä sivua voidaan käyttää yksinkertaisesti tietojen näyttämiseen tai sitä voidaan käyttää sekä tietojen näyttämiseen että antamaan käyttäjälle mahdollisuus tallentaa vaihtoehtoja.

Tässä opetusohjelmassa en ole erityisen kiinnostunut antamasta käyttäjälle mahdollisuuden tallentaa vaihtoehtoja. Sen sijaan meidän on luotava ankkuri, joka näyttää modaalisen valintaikkunan aina, kun sitä napsautetaan.

Ja sen sisältämät tiedot käsitellään myöhemmässä opetusohjelmassa.

Esimerkkilaajennussivu

Tässä vaiheessa oletan, että sinulla on laajennussivu. Sen perusrakenne voi näyttää tältä :

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

<div id="acme-thickbox-demo" class="wrap">
  <!-- TODO -->
</div><!-- #acme-thickbox-demo -->

Sieltä tarvitaan kaksi asiaa:

joka sisältää Thickbox-kirjaston
ankkurin ja säiliön lisääminen, joka näyttää modaalisen valintaikkunan

Jos haluat sisällyttää Thickbox-kirjaston laajennussivullesi, lisää tämä tunniste. Jos noudatat koodausstandardeja, sivullasi on todennäköisesti docblock sivun yläosassa. Tähän lisään yleensä koodin.

Add_thickbox -toiminto on WordPressin tarjoama, joka tekee seuraavat:

Jonottaa oletusarvoiset ThickBox js- ja css-tiedostot.

Hieman epämääräinen, eikö? Teknisesti pidempi kuvaus on:

ThickBox on verkkosivun käyttöliittymän dialogiwidget, joka on kirjoitettu JavaScriptillä jQuery-kirjaston päälle. Sen tehtävänä on näyttää yksittäinen kuva, useita kuvia, upotettua sisältöä, iframed-sisältöä tai AJAXin kautta toimitettua sisältöä hybridimodaalissa.

Ja jos olet kiinnostunut Thickbox-kirjastosta sellaisenaan, voit nähdä sen tällä sivulla.

Joka tapauksessa takaisin sivulle. Nyt kun lisään sen laajennussivulleni WordPress API -toiminnolla, sivuni näyttää suunnilleen tältä :

<?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">
  <!-- TODO -->
</div><!-- #acme-thickbox-demo -->

Seuraavaksi ankkurin ja datan näyttöelementin luominen kulkevat käsi kädessä toistensa kanssa, nimittäin koska ankkuri tarvitsee modaalidialogina toimivan elementin tunnuksen.

Ankkuri tarvitsee seuraavat tiedot:

modaalin näyttävän elementin tunnus,
mainitun modaalidialogin mitat

Tätä esimerkkiä varten aion perustaa valintaikkunan, joka näyttää 800 × 600 pikseliä ja jonka tunnus on acme-modal-dialog.

Huomautus: Muista, että elementtien eteen kannattaa liittää jotain, joka liittyy laajennuksen nimeen, jotta ristiriitoja ei synny.

Joten luon ankkurin, joka näyttää tältä :

<?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="#">Display The Dialog</a>
  </div><!-- #acme-thickbox-content -->

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

Ja sitten luon tällaisen elementin :

<?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 -->

Ja yllä oleva koodi on myös se, miltä laajennussivun lopullinen versio näyttää tältä. Kun napsautat ankkuria, näkyviin tulee tyhjä valintaikkuna, jossa on määritetyt mitat (eli 800 × 600 pikseliä).

Tietenkin se on tyhjä, koska se ei näytä mitään tietoja.

Datan näyttäminen

Sarjan seuraavassa viestissä käyn läpi, kuinka tietoja näytetään valintaikkunan yhteydessä.

Se on helppoa, mutta se on hyvä lähtökohta, jos haluat aloittaa dynaamisen tiedon sisällyttämisen REST API:n tai Ajaxin kautta. Mutta käsittelen sen ennen tämän loppua.

: tommcfarlin.com