WordPressi modaalsete dialoogide lisamine (sisseehitatud raamatukogudega)

Viimati uuendatud nov. 9, 2022

Sisu

Kui rääkida klientidele lahenduste väljatöötamisest, siis on aegu, mil teie ülesandeks on tõenäoliselt kuvada teavet WordPressi modaaldialoogides.

Selle jaoks on saadaval palju lahendusi ja mida paremini olete JavaScripti, erinevate teekide ja nende saadaolevate teekide kasutamisega kursis, seda raskem (või võib-olla isegi lihtsam) on valida, millist neist kasutada.

Kuid WordPressil on sisseehitatud infrastruktuur, mis muudab funktsioonide lisamise WordPressi triviaalseks. Nii et kolmes eelseisvas postituses käsitlen järgmist:

Kuidas lisada WordPressi modaaldialooge sisseehitatud teekide abil,
Modaalsete dialoogide täitmine andmetega,
Modaalse dialoogi täitmine dünaamiliste andmetega Ajaxi kaudu.

Sarja olemuse tõttu ei ole postitused üksteise järel, vaid need kõik kasutavad ainulaadset silti, mida saate pärast postituste valmimist kasutada järjehoidjate lisamiseks ja sarjana viitamiseks.

Seda arvestades räägime WordPressi modaalsete dialoogide hõlpsast kaasamisest sisseehitatud teekidesse.

WordPressi modaaldialoogid, 1. osa

Alustuseks eeldan, et teil on halduslehe põhialused paigas.

Pistikprogrammide lehtedel

See tähendab, et teil on kõik, mida vajate pistikprogrammi seadistamiseks, aktiveerimiseks ja seejärel menüü või alammenüü kaudu kuvatava lehe kuvamiseks.

Kui ei, siis vaadake seda postitust, et näha, kuidas alustada.

Kui olete selle teinud, vajate pistikprogrammi lehe jaoks põhilist infrastruktuuri. Seda lehekülge võib kasutada lihtsalt teabe kuvamiseks või nii teabe kuvamiseks kui ka kasutajale võimaluste salvestamise võimaluse andmiseks.

Selle õpetuse puhul ei ole ma eriti huvitatud kasutajale võimaluste salvestamise võimalusest. Selle asemel peame looma ankru, mis kuvab iga kord, kui sellel klõpsate, modaalset dialoogi.

Ja andmeid, mida see sisaldab, käsitletakse hilisemas õpetuses.

Plugina näidisleht

Siinkohal eeldan, et teil on pistikprogrammi leht. Selle põhistruktuur võib välja näha selline :

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

Sealt edasi on vaja kahte asja:

sisaldab Thickbox raamatukogu
ankru ja konteineri lisamine, mis kuvab modaalse dialoogi

Thickbox teegi lisamiseks oma pistikprogrammide lehele lisage lihtsalt see silt. Kui järgite mis tahes kodeerimisstandardeid, on teie lehel tõenäoliselt lehe ülaosas dokumendiplokk. See on koht, kus ma tavaliselt koodi lisan.

Funktsiooni add_thickbox pakub WordPress, mis teeb järgmist:

Loob vaikimisi ThickBox js ja css.

Natuke ebamäärane, eks? Tehniliselt on pikem kirjeldus:

ThickBox on veebilehe kasutajaliidese dialoogi vidin, mis on kirjutatud JavaScriptis jQuery teegi peale. Selle funktsioon on näidata üht pilti, mitut pilti, tekstisisest sisu, iframed-sisu või AJAX-i kaudu edastatavat sisu hübriidmodaalis.

Ja kui olete huvitatud Thickboxi teegist, näete seda sellel lehel.

Igatahes, tagasi lehele. Nüüd, kui lisan selle WordPressi API funktsiooni abil oma pistikprogrammi lehele, näeb minu leht välja umbes selline :

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

Järgmisena käivad ankru ja andmete kuvamise elemendi loomine käsikäes, nimelt seetõttu, et ankur vajab modaalse dialoogina toimiva elemendi ID-d.

Ankur vajab järgmist teavet:

modaali kuvava elemendi ID,
nimetatud modaalse dialoogi mõõtmed

Selle näite jaoks seadistan dialoogi, mis kuvatakse eraldusvõimega 800 × 600 pikslit ja mille ID on acme-modal-dialog.

Märkus. Pidage meeles, et konfliktide vältimiseks on hea mõte lisada elementide ette midagi, mis on seotud teie pistikprogrammi nimega.

Nii et ma loon ankru, mis näeb välja selline :

<?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 siis loon sellise elemendi :

<?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 ülaltoodud kood näeb välja ka pistikprogrammi lehe lõplik versioon. Kui klõpsate ankrul, peaks ilmuma tühi dialoog määratud mõõtmetega (st 800 × 600 pikslit).

Loomulikult on see tühi, kuna see ei kuva andmeid.

Andmete kuvamine

Sarja järgmises postituses kirjeldan, kuidas andmeid dialoogi kontekstis kuvada.

See on lihtne, kuid see on hea lähtepunkt, kui soovite alustada dünaamiliste andmete lisamist REST API või Ajaxi kaudu. Aga ma käsitlen seda enne selle lõppu.

: tommcfarlin.com