Sarjan luonteen vuoksi viestit eiv\u00e4t ole per\u00e4kk\u00e4in, mutta niiss\u00e4 kaikissa k\u00e4ytet\u00e4\u00e4n ainutlaatuista tunnistetta, jonka avulla voit lis\u00e4t\u00e4 kirjanmerkkeihin ja viitata sarjana, kun viestit ovat valmiit.<\/p>\n
Puhutaanpa WordPressin modaalidialogien helposta sis\u00e4llytt\u00e4misest\u00e4 sis\u00e4\u00e4nrakennetuilla kirjastoilla.<\/p>\n
WordPressin modaalidialogit, osa 1<\/h2>\n
Aluksi oletan, ett\u00e4 sinulla on hallintasivun perusperusta.<\/p>\n
Plugin-sivuilla<\/h3>\n
Eli sinulla on kaikki mit\u00e4 tarvitset laajennuksen asennukseen, aktivoimiseen ja sitten valikon tai alivalikon kautta n\u00e4kyv\u00e4\u00e4n sivuun.<\/p>\n
Jos ei, katso t\u00e4m\u00e4 viesti<\/a> n\u00e4hd\u00e4ksesi kuinka p\u00e4\u00e4set alkuun.<\/p>\n Kun olet tehnyt sen, tarvitset laajennussivun perusinfrastruktuurin. T\u00e4t\u00e4 sivua voidaan k\u00e4ytt\u00e4\u00e4 yksinkertaisesti tietojen n\u00e4ytt\u00e4miseen tai sit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 sek\u00e4 tietojen n\u00e4ytt\u00e4miseen ett\u00e4 antamaan k\u00e4ytt\u00e4j\u00e4lle mahdollisuus tallentaa vaihtoehtoja.<\/p>\n T\u00e4ss\u00e4 opetusohjelmassa en ole erityisen kiinnostunut antamasta k\u00e4ytt\u00e4j\u00e4lle mahdollisuuden tallentaa vaihtoehtoja. Sen sijaan meid\u00e4n on luotava ankkuri, joka n\u00e4ytt\u00e4\u00e4 modaalisen valintaikkunan aina, kun sit\u00e4 napsautetaan.<\/p>\n Ja sen sis\u00e4lt\u00e4m\u00e4t tiedot k\u00e4sitell\u00e4\u00e4n my\u00f6hemm\u00e4ss\u00e4 opetusohjelmassa.<\/p>\n T\u00e4ss\u00e4 vaiheessa oletan, ett\u00e4 sinulla on laajennussivu. Sen perusrakenne voi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a> :<\/p>\n Sielt\u00e4 tarvitaan kaksi asiaa:<\/p>\n Jos haluat sis\u00e4llytt\u00e4\u00e4 Thickbox-kirjaston laajennussivullesi, lis\u00e4\u00e4 t\u00e4m\u00e4 tunniste. Jos noudatat koodausstandardeja, sivullasi on todenn\u00e4k\u00f6isesti docblock sivun yl\u00e4osassa. T\u00e4h\u00e4n lis\u00e4\u00e4n yleens\u00e4 koodin.<\/p>\n Add_thickbox\u00a0 -toiminto on WordPressin tarjoama<\/a>, joka tekee seuraavat:<\/p>\n Jonottaa oletusarvoiset ThickBox js- ja css-tiedostot.<\/p>\n<\/blockquote>\n Hieman ep\u00e4m\u00e4\u00e4r\u00e4inen, eik\u00f6? Teknisesti pidempi kuvaus on:<\/p>\n ThickBox on verkkosivun k\u00e4ytt\u00f6liittym\u00e4n dialogiwidget, joka on kirjoitettu JavaScriptill\u00e4 jQuery-kirjaston p\u00e4\u00e4lle. Sen teht\u00e4v\u00e4n\u00e4 on n\u00e4ytt\u00e4\u00e4 yksitt\u00e4inen kuva, useita kuvia, upotettua sis\u00e4lt\u00f6\u00e4, iframed-sis\u00e4lt\u00f6\u00e4 tai AJAXin kautta toimitettua sis\u00e4lt\u00f6\u00e4 hybridimodaalissa.<\/p>\n<\/blockquote>\n Ja jos olet kiinnostunut Thickbox-kirjastosta sellaisenaan, voit n\u00e4hd\u00e4 sen t\u00e4ll\u00e4 sivulla<\/a>.<\/p>\n Joka tapauksessa takaisin sivulle. Nyt kun lis\u00e4\u00e4n sen laajennussivulleni WordPress API -toiminnolla, sivuni n\u00e4ytt\u00e4\u00e4 suunnilleen t\u00e4lt\u00e4<\/a> :<\/p>\n Seuraavaksi ankkurin ja datan n\u00e4ytt\u00f6elementin luominen kulkevat k\u00e4si k\u00e4dess\u00e4 toistensa kanssa, nimitt\u00e4in koska ankkuri tarvitsee modaalidialogina toimivan elementin tunnuksen.<\/p>\n Ankkuri tarvitsee seuraavat tiedot:<\/p>\n T\u00e4t\u00e4 esimerkki\u00e4 varten aion perustaa valintaikkunan, joka n\u00e4ytt\u00e4\u00e4 800 \u00d7 600 pikseli\u00e4 ja jonka tunnus on acme-modal-dialog<\/strong>.<\/p>\n Huomautus<\/strong>: Muista, ett\u00e4 elementtien eteen kannattaa liitt\u00e4\u00e4 jotain, joka liittyy laajennuksen nimeen, jotta ristiriitoja ei synny.<\/p>\n Joten luon ankkurin, joka n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a> :<\/p>\nEsimerkkilaajennussivu<\/h3>\n
<?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n\n
\n
\n
<?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n\n
<?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n\n <h1>Acme Thickbox Demo<\/h1>\n <p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.<\/p>\n\n <div id=\"acme-thickbox-content\">\n <a href=\"#\">Display The Dialog<\/a>\n <\/div><!-- #acme-thickbox-content -->\n\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165812-61e789a51e4aa.png\")
<\/a><\/p>\n