# Dinamikus API és Webes adatkinyerő (távoli tartalom)
> Külső oldal beágyazása, tartalom kinyerése másik weboldalból és REST API JSON-adatainak megjelenítése, gyorsítótárral.
A távoli tartalmat kezelő widgetekkel az internetről származó bármilyen tartalmat dinamikusan beolvashatsz: szövegblokkot, képet és egyebet külső forrásból. Együttműködnek a REST API-kkal (a WordPress beépítettjeivel is), és JSON formátumban is képesek feldolgozni az eredményt.
A szerkesztőben két widget áll rendelkezésre:
- **Dinamikus API**: REST API-végpontot kérdez le, és a JSON-választ formázva írja ki.
- **Webes adatkinyerő**: egy másik weboldal tartalmát nyeri ki és illeszti az oldaladba.
Mindkettőben ugyanaz az első szakasz (a kapcsolat beállításai, a szakasz a widget nevét viseli), mellette **Adatok** és **HTML-manipuláció** szakasz van.
*A Dinamikus API widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=74&action=elementor)
## Kapcsolati beállítások
| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **URL** | A lekérdezendő oldal vagy végpont címe. | |
| **Módszer** | **GET** vagy **POST**. | GET |
| **Fejlécek** | Egyéni HTTP-fejlécek „kulcs: érték” formában, soronként egy. | |
| **Paraméterek** | A kéréshez fűzött paraméterek (**Elem hozzáadása** gombbal). | |
| **Hitelesítés szükséges** | Hitelesített kérés küldése. | Nem |
| **Kapcsolódási időkorlát (s)** | Ennyi másodpercen belül kell a szerver és a végpont között a kapcsolatnak létrejönnie. | 5 |
| **Gyorsítótár** | A válasz tárolása a megadott lejáratig. | Nem |
### Gyorsítótár
A gyorsabb oldalbetöltéshez érdemes bekapcsolni a gyorsítótárat. Ilyenkor a szervered nem tölti le minden oldalbetöltéskor a távoli tartalmat (ami a távoli és a helyi oldal betöltési idejét összeadná), hanem a tárolt eredménnyel gyorsan válaszol. A tartalom a beállított lejárati idő után frissül.
## Dinamikus API
A widget REST API-ból vagy más JSON-szolgáltatásból kér le adatot, és formázva megjeleníti.
1. Add meg a lekérdezni kívánt végpont **URL**-jét.
2. Az **Adatok** szakaszban kapcsold be a **Dinamikus HTML** lehetőséget.
3. Add meg az adatok HTML-megjelenítését. Az adatokat egyetlen szerkezetként vagy egy archívumhoz hasonló, ismétlődő blokkként is kezelheted, kezdeti szerkezettel.
A HTML-megjelenítés nagyon rugalmas, a fő blokkot dinamikus tartalommal építheted fel `[DATA:…]` tokenekkel. Példa egy WordPress-bejegyzés végpontjának adataival:
```html
[DATA:title:rendered]
[DATA:excerpt:rendered]
```
*A Dinamikus API Adatok szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=74&action=elementor)
A képen az **Adatok** szakasz látszik a **Dinamikus HTML** kapcsolóval és a **Biztonságos mód** beállítással.
## Webes adatkinyerő
A widget másik weboldal tartalmát nyeri ki, hogy beépítsd az oldaladba.
*A Webes adatkinyerő widget kapcsolati beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=74&action=elementor)
A képen az első szakasz az URL, a módszer, a fejlécek, a paraméterek, az időkorlát és a gyorsítótár mezőivel látszik.
1. Add meg a kinyerendő oldal **URL**-jét.
2. A szervered automatikusan lekéri a külső oldal teljes törzsét (body), és a widget tartalmába helyezi.
3. Ha csak egy elemre van szükséged, az **Adatok** szakasz **Címke, ID vagy osztály** mezőjében jQuery-szelektorral szűrheted. Alapértéke `body`.
4. Az **Elemek korlátozása** mezővel megadhatod, hány találatot mutasson (például csak az elsőt, vagy az első tízet). A `-1` korlátlan mennyiséget jelent.
Szelektorpéldák:
- Címke: `quote`, `header`
- Azonosító: `#my-content`, `#footer`
- Osztály: `.block`, `.site-body > .title`
*A Webes adatkinyerő Adatok szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=74&action=elementor)
Fontos tudnivalók:
- Egyes oldalak nem engedik ezt a technikát.
- Figyelj a forrásoldal adatainak szerzői jogára.
A **Biztonságos mód** megjelenítés előtt eltávolítja a szkripteket és az egyéb aktív tartalmakat a távoli HTML-kódból. Csak akkor kapcsold ki, ha megbízol a távoli forrásban, és szükséged van az aktív tartalomra.
### HTML-manipuláció
A **HTML-manipuláció** szakasz kapcsolói a kinyert HTML-kódot módosítják:
- **Relatív hivatkozások javítása**: ha a kinyert kód relatív hivatkozást tartalmaz, abszolút hivatkozássá alakítja.
- **Új lapon megnyíló linkek**: a külső hivatkozásokhoz automatikusan `target="_blank"` attribútumot ad.
- **Késleltetve betöltött képek src-jének javítása**: ha a távoli oldal a `data-src` módszerrel tölti be késleltetve a képeket, normál `src` attribútummá alakítja.
## Beágyazott iFrame
A külső oldalt (teljes tartalommal, stílussal és JavaScripttel) keretben is beágyazhatod az oldaladba iFrame-mel. Ha eltávolítod a szegélyt, a beágyazott oldal az eredeti tartalomhoz hasonlóan jelenik meg.