# Beágyazott iframe megjelenítése dinamikus widgetekkel

> Mit tegyél, ha a metamezőbe írt beágyazott videó vagy hang nem látszik a frontenden: a megengedett HTML-címkék bővítése, Dynamic Field és Dynamic Repeater.

Ha egy metamezőbe írt beágyazott hang vagy videó (iframe) nem jelenik meg a frontenden, biztonsági ok áll mögötte: a metamező tartalmában csak az engedélyezett HTML-címkék jelenhetnek meg. A megoldás az, hogy a szükséges további címkéket és attribútumokat is engedélyezed.

Először vegyél fel metamezőt az egyedi bejegyzéstípus szerkesztőjében vagy egy JetEngine [metaboxban](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-metaboxok/), ha még nincs. Az alábbi példák az egyedi bejegyzéstípus szerkesztőjében készülnek.

## Szövegmező (Textarea)

1. Töltsd ki a mezők adatait, a **Mező típusa** legyen **Szövegmező** (Textarea).
2. Kattints a **Bejegyzéstípus frissítése** gombra.
3. Nyisd meg az egyedi bejegyzéstípus kívánt bejegyzését, és írd a beágyazási kódot az új metamezőbe.
4. Frissítsd a bejegyzést a szerkesztő jobb felső sarkában lévő gombbal.

A megjelenítéshez az attribútumokat kétféleképpen engedélyezheted.

### 1. A sablonszerkesztőben

Nyisd meg az **Megjelenés → Sablonszerkesztő** (Theme Editor) oldalt, válaszd ki az éppen használt sablont (témát), és nyisd meg a `functions.php` fájlt. Illeszd be a következő kódot:

```php
add_filter( 'wp_kses_allowed_html', function ( $tags, $context ) {
	if ( 'post' === $context ) {
		$tags['input'] = array(
			'type' => true,
			'id'   => true,
		);
	}
	return $tags;
}, 10, 2 );
```

Írd át a kódot azokra az attribútumokra, amelyeket a beágyazás használ. Az `iframe` esetén például:

```php
add_filter( 'wp_kses_allowed_html', function ( $tags, $context ) {
	if ( 'post' === $context ) {
		$tags['iframe'] = array(
			'src'               => true,
			'width'             => true,
			'height'            => true,
			'frameborder'       => true,
			'allowtransparency' => true,
			'allow'             => true,
		);
	}
	return $tags;
}, 10, 2 );
```

A `type` és az `id` attribútumot töröltük, és azokat vettük fel, amelyek a beágyazásban szerepelnek.

**Fontos:** ha az iframe-en kívül más elemet akarsz beágyazni, az `iframe` értéket cseréld erre az elemre.

Kattints a **Fájl frissítése** gombra.

### 2. Kódrészlet-bővítménnyel

A második lehetőség egy kódrészlet-bővítmény, például a Code Snippets (bármelyik hasonló megfelel).

1. Telepítsd és aktiváld a bővítményt, majd nyisd meg a **Snippets** menüt.
2. Kattints az **Add New** gombra a kódszerkesztő megnyitásához.
3. Illeszd be ugyanezt a kódot, és módosítsd az értékeket arra, amire szükséged van.
4. Kattints a **Save Changes**, majd az **Activate** gombra.

### Eredmény a Dynamic Fielddel

1. Nyisd meg azt az oldalt, ahová a beágyazást teszed. Ennek az oldalnak olyannak kell lennie, amelyhez az iframe-kódot hozzáadtad, például az egyedi bejegyzéstípus egyedi oldala.
2. Add hozzá a **Dynamic Field** widgetet. A **Source** legyen **Meta Data**, és a megfelelő listában válaszd ki a kitöltött metamezőt. Megadhatsz egyedi metamező-/ismétlőkulcsot is (**Custom meta field/repeater key**): ez felülírja a lista választását.
3. Stílusozd, ha akarod, és kattints az **Update** gombra.

A frontenden a szövegmező beágyazása megjelenik.

## Ismétlő mező (Repeater)

Ha a metamező **Ismétlő** típusú, a beállítások a következők:

1. Menj az egyedi bejegyzéstípushoz vagy a metaboxhoz, és vegyél fel **Ismétlő** típusú mezőt. Az alapadatok megadása után kattints az **Új ismétlő mező** gombra.
2. Adj hozzá annyi **Szövegmező** (Textarea) típusú mezőt, amennyi kell, és töltsd ki a **Címke**, **Név** és **Típus** mezőket.
3. Mentsd a változásokat (**Bejegyzéstípus frissítése**).
4. Nyisd meg az egyedi bejegyzéstípus kívánt bejegyzését, keresd meg az ismétlő metamezőt, és töltsd ki a szükséges számú beágyazást. Frissítsd a bejegyzést.
5. A fenti kódot illeszd be a sablonszerkesztővel vagy a kódrészlet-bővítménnyel, ahogy a szövegmezőnél leírtuk.

### Eredmény a Dynamic Repeaterrel

1. A szerkesztőben tedd az oldalra a **Dynamic Repeater** widgetet.
2. A **Source** legyen az ismétlő mező, az **Item format** mezőben pedig a `%name%` helyett használd az ismétlő almezőjének kulcsát. A példában a `%song%` makró kell, amely az ismétlő szerkesztésekor felvett almező értékét jeleníti meg.
3. Állítsd be a stílust, és kattints az **Update** gombra.

A frontenden a beágyazások megjelennek. A makrókról a [Makrók útmutatója](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-makrok/) fejezetben olvashatsz, az ismétlő widgetről pedig a [Dynamic Repeater](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-ismetlo-widget/) fejezetben.