Beágyazott iframe megjelenítése dinamikus widgetekkel

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, 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:

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:

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 fejezetben olvashatsz, az ismétlő widgetről pedig a Dynamic Repeater fejezetben.