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

> HTML-sablon készítése a PDF-generátorhoz: elrendezés, fejléc és lábléc, oldaltörés, betűtípusok, űrlapmezők, képek és aláírás a sablonban.

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](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/elementor-pro-form-pdf-generator/) 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.

![Az új HTML-sablon szerkesztője a Méretek, Betűtípusok és Előnézeti adatok dobozokkal](./kepek/elementor-pro-form-html-sablon.webp)

*Az új HTML-sablon szerkesztője a Méretek, Betűtípusok és Előnézeti adatok dobozokkal* (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:

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

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

```html
<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:

```css
@page {
  header: html_myHeader;
}
```

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

Lábléc:

```css
@page {
  footer: html_myFooter;
}
```

```html
<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:

```css
@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`:

```text
{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:

```text
<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:

```text
{acf:mezo}
```

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

```html
<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á:

```html
<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:

```text
{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):

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

**Kiemelt kép:**

```html
<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:

```html
<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:

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