Lägga till WordPress Modal Dialoger (med statisk data)

I det tidigare inlägget gick jag igenom processen som krävs för att få WordPress modala dialoger att visas inom ramen för administrationsområdet.

Detta använder:

• det inbyggda WordPress API,
• det medföljande Thickbox-biblioteket,
• och lite exempelkod för att få den att visas.

I den här handledningen kommer jag att gå igenom att fylla den modala dialogrutan med data. Efter det kommer jag att dela hur man fyller i data dynamiskt med Ajax.

WordPress Modal Dialogs: Statisk data

För det här inlägget antar jag att du har läst det första inlägget i serien, och att du har en förståelse för vad koden gör (även om det är ännu bättre om du har lite fungerande kod på din lokala utvecklingsmiljö).

Oavsett, låt oss prata om att fylla metaboxen med information. Det vill säga, vi ska titta på:

1. sätta information i kroppen av metaboxen,
2. fylla titeln med innehåll.

När vi har gjort det går vi vidare till att hämta information från servern i en asynkron natur och sedan fylla i koden vi har hittills.

1 Definiera data

Att lägga till innehåll i metaboxen är väldigt enkelt. Minns från förra inlägget; vi har ett HTML-element som har en display: ingen; värde för dess stilattribut.

Här är den ursprungliga kärnan :

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

Det är enkelt att lägga till innehåll i den modala dialogrutan. Leta bara upp elementet acme-modal-dialog och fyll sedan i det med vilken information du vill visa för användaren.

Se till exempel detta kodexempel :

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

När användaren klickar på ankaret i det föregående inlägget (det som läser Visa The Dialog ), så kommer modalen att visas med innehållet som du ser ovan.

Generellt sett bör det se ut som det du ser ovan baserat på koden som beskrivs i huvuddraget.

2 Ställa in en titel

Lägg sedan märke till att den modala dialogrutan innehåller ett alternativ att avvisa den när användaren är klar med att läsa den. Förutom att erbjuda den förmågan, lägg märke till att området i dialogrutan har mycket vitt utrymme.

Du vet vad jag menar: Det är ett område som vanligtvis förpassas till att användas som titelrad. Tack vare Thickbox API och dess integration med WordPress kan vi enkelt lägga till det i vår titel. Den kan vara dynamisk (som om informationen skulle komma via Ajax) eller så kan den vara statisk.

Och eftersom vi arbetar med statisk information i det här inlägget, låt oss ställa in det. För att göra detta måste vi lägga till ett titelattribut till ankaret som ansvarar för att visa modalen.

När du har hittat ankaret som är ansvarigt för att trigga displayen (kom ihåg att den innehåller texten Display The Dialog ), lägg till ett title-attribut till den så att koden ser ut så här :

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

När du nu klickar på ankaret för att utlösa displayen kommer den inte bara att visa dialogrutan som i bilden ovan, utan den kommer också att innehålla en titel:

Användbart, eller hur? Men tänk om det skulle vara mer dynamiskt?

Nu till Ajax

Och den dynamiska naturen är vad jag vill täcka härnäst. Specifikt funderar jag på att gå igenom processen att ta det vi har här, vilket är statisk data och ersätta den med information som hämtas asynkront.

Det vill säga att användaren klickar på Visa dialogrutan och sedan:

• en begäran görs till servern,
• data hämtas,
• och sedan överförs informationen till titeln och innehållsområdena i dialogrutan.

Det är lite bättre än att använda statisk information och ger en mer dynamisk applikation.