{"id":229127,"date":"2022-11-13T10:10:00","date_gmt":"2022-11-13T07:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229127"},"modified":"2022-11-09T05:38:38","modified_gmt":"2022-11-09T02:38:38","slug":"laegga-till-wordpress-modal-dialoger-med-inbyggda-bibliotek","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegga-till-wordpress-modal-dialoger-med-inbyggda-bibliotek\/","title":{"rendered":"L\u00e4gga till WordPress Modal Dialoger (med inbyggda bibliotek)"},"content":{"rendered":"\n

N\u00e4r det g\u00e4ller att utveckla l\u00f6sningar f\u00f6r kunder kommer det att finnas tillf\u00e4llen d\u00e5 du sannolikt har till uppgift att visa information i WordPress modala dialogrutor.<\/p>\n

Det finns m\u00e5nga l\u00f6sningar tillg\u00e4ngliga f\u00f6r att g\u00f6ra detta och ju mer bekant du \u00e4r med JavaScript, olika bibliotek och de bibliotek som de har tillg\u00e4ngliga, desto sv\u00e5rare (eller kanske \u00e4r det \u00e4nnu enklare) \u00e4r det att v\u00e4lja vilket du ska anv\u00e4nda.<\/p>\n

Men WordPress har inbyggd infrastruktur som g\u00f6r det trivialt att integrera funktionalitet i WordPress. S\u00e5 i tre kommande inl\u00e4gg kommer jag att t\u00e4cka f\u00f6ljande:<\/p>\n

    \n
  1. Hur man integrerar WordPress modala dialoger med inbyggda bibliotek,<\/li>\n
  2. Fylla de modala dialogerna med data,<\/li>\n
  3. Fyller den modala dialogrutan med dynamisk data via Ajax.<\/li>\n<\/ol>\n

    P\u00e5 grund av seriens natur kommer inl\u00e4ggen inte att vara rygg mot rygg, men de kommer alla att anv\u00e4nda en unik tagg som du kan anv\u00e4nda f\u00f6r att bokm\u00e4rka och referera till som en serie n\u00e4r inl\u00e4ggen \u00e4r klara.<\/p>\n

    Med det sagt, l\u00e5t oss prata om att enkelt integrera WordPress modala dialoger med inbyggda bibliotek.<\/p>\n

    WordPress Modal Dialogs, del 1<\/h2>\n

    F\u00f6r att komma ig\u00e5ng antar jag att du har grunden f\u00f6r en administrationssida p\u00e5 plats.<\/p>\n

    P\u00e5 plugin-sidor<\/h3>\n

    Det vill s\u00e4ga, du har allt du beh\u00f6ver f\u00f6r att f\u00e5 en plugin-inst\u00e4llning aktiverad och sedan en sida som visas via en meny eller undermeny.<\/p>\n

    Om inte, kolla in det h\u00e4r inl\u00e4gget<\/a> f\u00f6r att se hur du kommer ig\u00e5ng.<\/p>\n

    N\u00e4r du har gjort det beh\u00f6ver du den grundl\u00e4ggande infrastrukturen f\u00f6r en plugin-sida. Den h\u00e4r sidan kan anv\u00e4ndas f\u00f6r att helt enkelt visa information eller s\u00e5 kan den anv\u00e4ndas b\u00e5de f\u00f6r att visa information och ge anv\u00e4ndaren m\u00f6jlighet att spara alternativ.<\/p>\n

    F\u00f6r den h\u00e4r handledningen \u00e4r jag inte s\u00e4rskilt intresserad av att ge anv\u00e4ndaren m\u00f6jligheten att spara alternativ. Ist\u00e4llet m\u00e5ste vi skapa ett ankare som visar en modal dialogruta n\u00e4r du klickar p\u00e5 den.<\/p>\n

    Och informationen som den kommer att inneh\u00e5lla kommer att behandlas i en senare handledning.<\/p>\n

    Ett exempel p\u00e5 plugin-sida<\/h3>\n

    Vid det h\u00e4r laget antar jag att du har en plugin-sida. En grundl\u00e4ggande struktur f\u00f6r det kan se ut s\u00e5 h\u00e4r<\/a> :<\/p>\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
    D\u00e4rifr\u00e5n \u00e4r det tv\u00e5 saker som \u00e4r n\u00f6dv\u00e4ndiga:<\/p>\n
      \n
    1. med Thickbox-biblioteket<\/li>\n
    2. l\u00e4gga till ett ankare och en beh\u00e5llare som visar en modal dialogruta<\/li>\n<\/ol>\n
      F\u00f6r att inf\u00f6rliva Thickbox-biblioteket i din plugin-sida, l\u00e4gg helt enkelt till den h\u00e4r taggen. Om du f\u00f6ljer n\u00e5gra kodningsstandarder har din sida sannolikt ett docblock h\u00f6gst upp p\u00e5 sidan. Det \u00e4r h\u00e4r jag normalt l\u00e4gger till koden.<\/p>\n
      Add_thickbox –<\/a> funktionen \u00e4r en som tillhandah\u00e5lls av WordPress som g\u00f6r f\u00f6ljande:<\/p>\n
      \n
      K\u00f6ar standard ThickBox js och css.<\/p>\n<\/blockquote>\n
      Lite vagt, eller hur? Tekniskt sett \u00e4r den l\u00e4ngre beskrivningen:<\/p>\n
      \n
      ThickBox \u00e4r en webbsidas UI-dialogwidget skriven i JavaScript ovanp\u00e5 jQuery-biblioteket. Dess funktion \u00e4r att visa en enda bild, flera bilder, inline-inneh\u00e5ll, iframed-inneh\u00e5ll eller inneh\u00e5ll som serveras genom AJAX i en hybridmodal.<\/p>\n<\/blockquote>\n
      Och om du \u00e4r intresserad av Thickbox-biblioteket p\u00e5 egen hand kan du se det p\u00e5 den h\u00e4r sidan<\/a>.<\/p>\n
      Hur som helst, tillbaka till sidan. Nu n\u00e4r jag l\u00e4gger till den p\u00e5 min pluginsida med WordPress API-funktionen ser min sida ut ungef\u00e4r s\u00e5 h\u00e4r<\/a> :<\/p>\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
      D\u00e4refter g\u00e5r att skapa ankaret och elementet f\u00f6r att visa data hand i hand med varandra, n\u00e4mligen eftersom ankaret beh\u00f6ver ID:t f\u00f6r elementet som kommer att fungera som den modala dialogrutan.<\/p>\n
      Ankaret beh\u00f6ver f\u00f6ljande information:<\/p>\n