Lägga till WordPress Modal Dialoger (med inbyggda bibliotek)
När det gäller att utveckla lösningar för kunder kommer det att finnas tillfällen då du sannolikt har till uppgift att visa information i WordPress modala dialogrutor.
Det finns många lösningar tillgängliga för att göra detta och ju mer bekant du är med JavaScript, olika bibliotek och de bibliotek som de har tillgängliga, desto svårare (eller kanske är det ännu enklare) är det att välja vilket du ska använda.
Men WordPress har inbyggd infrastruktur som gör det trivialt att integrera funktionalitet i WordPress. Så i tre kommande inlägg kommer jag att täcka följande:
- Hur man integrerar WordPress modala dialoger med inbyggda bibliotek,
- Fylla de modala dialogerna med data,
- Fyller den modala dialogrutan med dynamisk data via Ajax.
På grund av seriens natur kommer inläggen inte att vara rygg mot rygg, men de kommer alla att använda en unik tagg som du kan använda för att bokmärka och referera till som en serie när inläggen är klara.
Med det sagt, låt oss prata om att enkelt integrera WordPress modala dialoger med inbyggda bibliotek.
WordPress Modal Dialogs, del 1
För att komma igång antar jag att du har grunden för en administrationssida på plats.
På plugin-sidor
Det vill säga, du har allt du behöver för att få en plugin-inställning aktiverad och sedan en sida som visas via en meny eller undermeny.
Om inte, kolla in det här inlägget för att se hur du kommer igång.
När du har gjort det behöver du den grundläggande infrastrukturen för en plugin-sida. Den här sidan kan användas för att helt enkelt visa information eller så kan den användas både för att visa information och ge användaren möjlighet att spara alternativ.
För den här handledningen är jag inte särskilt intresserad av att ge användaren möjligheten att spara alternativ. Istället måste vi skapa ett ankare som visar en modal dialogruta när du klickar på den.
Och informationen som den kommer att innehålla kommer att behandlas i en senare handledning.
Ett exempel på plugin-sida
Vid det här laget antar jag att du har en plugin-sida. En grundläggande struktur för det kan se ut så här :
<?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 -->Därifrån är det två saker som är nödvändiga:
- med Thickbox-biblioteket
- lägga till ett ankare och en behållare som visar en modal dialogruta
För att införliva Thickbox-biblioteket i din plugin-sida, lägg helt enkelt till den här taggen. Om du följer några kodningsstandarder har din sida sannolikt ett docblock högst upp på sidan. Det är här jag normalt lägger till koden.
Add_thickbox – funktionen är en som tillhandahålls av WordPress som gör följande:
Köar standard ThickBox js och css.
Lite vagt, eller hur? Tekniskt sett är den längre beskrivningen:
ThickBox är en webbsidas UI-dialogwidget skriven i JavaScript ovanpå jQuery-biblioteket. Dess funktion är att visa en enda bild, flera bilder, inline-innehåll, iframed-innehåll eller innehåll som serveras genom AJAX i en hybridmodal.
Och om du är intresserad av Thickbox-biblioteket på egen hand kan du se det på den här sidan.
Hur som helst, tillbaka till sidan. Nu när jag lägger till den på min pluginsida med WordPress API-funktionen ser min sida ut ungefär så här :
<?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 -->Därefter går att skapa ankaret och elementet för att visa data hand i hand med varandra, nämligen eftersom ankaret behöver ID:t för elementet som kommer att fungera som den modala dialogrutan.
Ankaret behöver följande information:
- ID för elementet som ska visa modalen,
- dimensionerna för nämnda modala dialog
För det här exemplet kommer jag att ställa in en dialogruta som visas i 800×600 pixlar och den kommer att ha ID:t för acme-modal-dialog.
Obs: Kom ihåg att det är en bra idé att prefixa dina element med något som är relaterat till namnet på ditt plugin, så att inga konflikter uppstår.
Så jag skapar ett ankare som ser ut så här :
<?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 -->Och sedan ska jag skapa ett element så här :
<?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 -->Och ovanstående kod är hur den slutliga versionen av pluginsidan kommer att se ut så här också. När du klickar på ankaret ska en tom dialogruta visas med de angivna måtten (det vill säga 800×600 pixlar).
Naturligtvis kommer det att vara tomt eftersom det inte kommer att visa några data.
Visar data
I nästa inlägg i serien kommer jag att gå igenom hur man visar data inom ramen för dialogrutan.
Det är enkelt, men det är en bra utgångspunkt om du vill börja införliva dynamisk data via REST API eller Ajax. Men jag ska täcka det innan slutet av detta.