PDF-generátor: HTML-sablon és konverter

A PDF-generátor HTML-konvertere HTML-sablonból készít PDF-et. A sablont egyszer megírod, a PDF-generátor művelet HTML-sablon mezőjében kiválasztod, és az űrlap minden beküldésénél a beküldött adatokkal kitöltött PDF készül. A művelet beállításait a PDF-generátor az űrlaphoz fejezet írja le.

Sablon létrehozása

A sablonokat a Dynamic.ooo → HTML-sablonok menüpontban kezeled. Új sablonnál a szerkesztő már tartalmaz mintakódot, amelyet átírhatsz.

https://minta-bolt.hu/wp-admin/post-new.php?post_type=dce_html_template

A képen a sablon szerkesztője látszik: fent a HTML doboz, alatta a Méretek (papírméret és tájolás), a Betűtípusok és az Előnézeti adatok. Jobb oldalon a PDF-előnézet gomb van.

Az előnézet működéséhez a Dynamic Shortcodes bővítménynek telepítve és aktívnak kell lennie. A Dynamic Content for Elementor licenccel a bővítmény egy különleges változata jár. Ha nincs telepítve, a HTML doboz piros sávban jelzi, és a telepítéshez linket ad.

Az előnézethez adj meg adatot az Előnézeti adatok dobozban:

• Egy bejegyzést választhatsz, így az előnézetben megjelenik a bejegyzés címe, az egyéni mezők és a többi adat.
• Az űrlapadatokat soronként mezőnév|érték formában írhatod (például name|Joe). A több értékű mezőknél, például jelölőnégyzetnél, az értékeket vesszővel válaszd el (animals|Dog,Llama).

Ha kész a sablon, add meg a PDF-generátor művelet HTML-sablon mezőjében.

Korábban a konverter a Timber bővítménnyel is működött. Ez a lehetőség elavult, de nincs eltávolítva. A Timber-szintaxisú sablonokat átírhatod Dynamic Shortcodes-szintaxisra, és a Timber elhagyható.

Elementor-sablon használata

A HTML-t Elementor-sablonból is veheted. Ez egyszerűbb, de több a korlátja. Készíts egy sablont, majd a sablon HTML dobozában kapcsold be az Elementor-sablon kapcsolóját, és rendeld hozzá a sablont.

Több oszlop

A PDF-motor CSS-támogatása nem követi szigorúan a webes szabványt, ezért az oszlopokhoz ez a szokatlan szabály kell:

.multi-column {
  display: float;
  float: left;
  width: 50%;
}

Két oszlop így készül:

<div class="multi-column">A bal oszlop elemei</div>
<div class="multi-column">A jobb oszlop elemei</div>

Három oszlophoz a szélesség 33%, négyhez 25%.

Fejléc és lábléc

A fejlécet és a láblécet két részből állítod össze: a <style> címkében a CSS-t, a HTML-ben a tartalmat adod meg.

Fejléc:

@page {
  header: html_myHeader;
}

<htmlpageheader name="myHeader">
  A fejléc tartalma, például: {data:page-number}. oldal / {data:number-of-pages}
</htmlpageheader>

Lábléc:

@page {
  footer: html_myFooter;
}

<htmlpagefooter name="myFooter">
  A lábléc tartalma, például: {data:page-number}. oldal / {data:number-of-pages}
</htmlpagefooter>

A {data:page-number} az aktuális oldalszámot, a {data:number-of-pages} az oldalak számát adja.

Oldaltörés és oldalméret

Oldaltöréshez használhatod a <pagebreak> címkét vagy a szabványos page-break-before és page-break-after CSS-tulajdonságot.

Egyedi oldalméret:

@page {
  sheet-size: 7in 9in;
}

Az in helyett cm és mm is használható, % és em nem. Elnevezett méretet is megadhatsz, például sheet-size: A4 landscape; (a tájolás portrait vagy landscape, de el is hagyható).

Támogatott CSS és betűtípusok

A sablon nem támogatja a webes CSS minden lehetőségét, a támogatott tulajdonságokat az mPDF motor határozza meg.

A font-family tulajdonságban három alapbetűtípust használhatsz: ctimes, chelvetica, ccourier. Egyéni betűtípust az Elementor Egyéni betűtípusok oldalán tölthetsz fel, de csak a TTF típus támogatott. Jobbról balra író nyelvekhez (például arab, héber) az alapbetűtípusok nem jók, ott töltsd fel a saját betűtípusodat.

Egyéni betűtípus használata

1. Szerezz be egy .ttf formátumú betűtípust, és töltsd fel az Elementor egyéni betűtípusai közé.
2. Az HTML-sablon Betűtípusok listájában megjelennek a feltöltött egyéni betűtípusok.
3. A sablonban a CSS font-family tulajdonsággal hivatkozz a betűtípus nevére.
4. Ha Elementor-sablont használsz, az egyéni betűtípust magában a sablonban állítsd be.

Az HTML-sablonoknál csak a TTF típus támogatott, a vastagság csak normál vagy félkövér, a stílus pedig csak normál vagy dőlt lehet.

Más nyelvek és jobbról balra író írásrendszerek

Az angoltól eltérő nyelvekhez és az arab, héber írásrendszerhez olyan betűtípust tölts fel, amely tartalmazza a karaktereket. A görög, cirill, örmény, grúz, héber, magyar, arab, n’ko és lao szövegekhez a DejaVu Sans betűtípus használható. A japán, kínai (egyszerűsített és hagyományos) és koreai szövegekhez Noto Sans típusú TTF betűtípus kell, de a Google már nem ad ki hozzájuk TTF fájlt, ezért máshonnan kell beszerezned.

Űrlapmezők a sablonban

Egy mező értékét a mező azonosítójával írod be. Ha az azonosító name:

{form:name}

Több értéket adó mezőnél (például jelölőnégyzet, amelynek azonosítója animals) ciklussal listázhatod az értékeket:

<ul>
  {for:animal {form:animals @raw}
    [<li>{get:animal}</li>]
  }
</ul>

Egy mezőt feltételhez is köthetsz, így csak akkor jelenik meg a PDF-ben, ha a feltétel teljesül. A feltételek kifejezései a Dynamic Shortcodes szintaxisát követik.

ACF-mezők a sablonban

ACF-mező értéke:

{acf:mezo}

ACF-mezőben tárolt kép megjelenítése:

<img src="{media:file-path @ID={acf:mezo}}">

Képek a sablonban

Feltöltött kép az űrlapból. Az űrlapban használj Fájl feltöltés típusú mezőt, jegyezd meg az azonosítóját, és a sablonban így hivatkozz rá:

<img src="{form:mezo-azonosito @raw}">

A kód módosításával a kép szélességét, magasságát és más tulajdonságait is megadhatod.

Több feltöltött fájl. Ha a mező több fájlt is fogad, a fájlok elérési útjai vesszővel elválasztott szövegben jönnek. A ciklus a vesszők mentén szétbontja, a trim pedig levágja a felesleges szóközöket:

{for:image {form:feltoltes-mezo@raw|-explode(',')}
  [<img src="{get:image|trim}">]
}

Kép a Médiatárból. A Médiatárban válaszd ki a képet, és olvasd le az azonosítóját (például 5296):

<img src="{media:file-path @ID=5296}">

Kiemelt kép:

<img src="{media:file-path @ID={post:featured-image-id}}">

Aláírás. Az űrlap aláírásmezőjének értéke képként kerül a sablonba:

<img src="{form:alairas-mezo-azonosito @raw}">

Az alairas-mezo-azonosito helyére az aláírásmező saját azonosítóját írd.

Hibaelhárítás

Ha a „Temporary files directory is not writable” (az ideiglenes fájlok könyvtára nem írható) hibát látod, a kiszolgáló korlátozza az alapértelmezett ideiglenes könyvtár írását. Add meg a saját, írható könyvtárat a wp-config.php fájlban:

define('WP_TEMP_DIR', '/eleresi/ut/az/irhato/konyvtarhoz');