# Blog/bejegyzések listája: egyéni kártya az intelligens ciklusszerkesztővel
> Egyéni bejegyzéskártya HTML-ből és CSS-ből: az intelligens ciklusszerkesztő beállítása, az elérhető dinamikus címkék, a rövidített változatok és egy példa.
Ha a blogkártyáknak pontosan a saját tervedet kell követniük, nem egy előre elkészített stílust, az **intelligens ciklusszerkesztő** (a felületen **Intelligens ciklusszerkesztő (béta)**) segít. A kártyát te írod meg HTML-ben és CSS-ben, a widget pedig minden bejegyzés adataival kitölti. A **Blog/bejegyzések listája** widget egyik stílusa. Az ingyenes és a Pro bővítményben is megvan, a Pro változatban béta jelzéssel, és néhány kész minta csak Pro. Alapszintű HTML- és CSS-ismeret kell hozzá.
## A szerkesztő bekapcsolása
1. Húzd az oldalra a **Blog/bejegyzések listája** widgetet.
2. Az **Elrendezés** szakaszban a hatodik stílust válaszd, az **intelligens ciklusszerkesztőt**, majd az elrendezést.
3. A **Tartalom** fülön megjelenik az **Intelligens ciklusszerkesztő (béta)** szakasz egy HTML és egy CSS mezővel.
*Az Elrendezés szakasz, kijelölt intelligens ciklusszerkesztő stílussal* (https://minta-bolt.hu/wp-admin/post.php?post=176&action=elementor)
A képen az utolsó stílus van kijelölve, és a szakaszlistában megjelent az **Intelligens ciklusszerkesztő (béta)** szakasz.
## Kezdés mintából vagy üres lapról
- **Mintából:** kattints a **Ready Presets** gombra, válassz sablont, és töltsd le. A HTML és a CSS mező kitöltődik, és szerkesztheted. Néhány minta Pro.
- **Üres lapról:** írd a saját HTML-ed a HTML mezőbe, a stílusokat a CSS mezőbe. Más helyről, például a CodePenről átvett kódot is átdolgozhatod: a statikus szöveget cseréld dinamikus címkékre.
*Az Intelligens ciklusszerkesztő szakasz a HTML és CSS mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=176&action=elementor)
A képen a HTML mezőben egy `article` kártya látszik dinamikus címkékkel, alatta a hozzá tartozó CSS.
## Dinamikus címkék
Amit beírsz, az statikus. Hogy minden kártya a saját bejegyzésének adatát mutassa, tedd a HTML-be az alábbi címkéket (dupla kapcsos zárójellel).
| Címke | Mit ír ki |
|---|---|
| `{{tpae_title}}` | a bejegyzés címe |
| `{{tpae_permalink}}` | a bejegyzés webcíme |
| `{{tpae_excerpt}}` | a kivonat |
| `{{tpae_description}}` | a bejegyzés tartalma |
| `{{tpae_image}}` | a kiemelt kép, teljes képcímkeként |
| `{{tpae_image_url}}` | csak a kiemelt kép webcíme |
| `{{tpae_author_meta}}` | a szerző neve |
| `{{tpae_author_url}}` | a szerző archívumának webcíme |
| `{{tpae_author_logo}}` | a szerző avatarja |
| `{{tpae_category}}` | a bejegyzés kategóriái |
| `{{tpae_tag}}` | a bejegyzés címkéi |
| `{{tpae_date_created}}` | a közzététel dátuma a WordPress dátumformátumával |
| `{{tpae_time_created}}` | a közzététel ideje |
| `{{tpae_date_created_time_ago}}` | relatív dátum, például „3 napja” |
| `{{tpae_date_created_day}}` | csak a hónap napja |
| `{{tpae_date_created_day_month}}` | nap és hónap |
| `{{tpae_date_created_month_year}}` | hónap és év |
| `{{tpae_date_created_m_y_d}}` | hónap / év / nap |
| `{{tpae_date_created_f_d_y}}` | a hónap teljes neve, nap, év |
| `{{tpae_date_created_M_D_Y}}` | a hónap rövid neve, nap, év |
| `{{tpae_date_created_d_m_y}}` | nap / hónap / év |
| `{{tpae_date_created_m_d_y}}` | hónap / nap / év |
| `{{tpae_date_created_d_m_y_h}}` | nap / hónap / év és óra |
| `{{tpae_date_created_h_m_a}}` | óra:perc, de./du. |
| `{{tpae_date_created_d_m_y_g}}` | dátum GMT-eltolással |
| `{{tpae_date_created_iso}}` | ISO 8601 dátum |
| `{{tpae_date_created_rfc}}` | RFC 2822 dátum |
### Rövidített változatok
Három címke számot is elfogad, közvetlenül az aláhúzás után:
| Címke | Mit ír ki |
|---|---|
| `{{tpae_title_50}}` | a cím első 50 karaktere |
| `{{tpae_category_1}}` | csak az első kategória, hivatkozásként |
| `{{tpae_description_120}}` | a tartalom első 120 karaktere |
A szám tetszőleges. A `{{tpae_description_N}}` a nyers tartalmat számolja a benne lévő HTML-lel együtt, ezért a vágás egy címke közepére eshet. Tiszta, rövid összefoglalóhoz a `{{tpae_excerpt}}` jobb.
A `{{tpae_image}}` teljes képcímkét ír ki, ezért ne tedd saját `![]()
` elembe. Ha csak a webcím kell, például háttérképhez, használd a `{{tpae_image_url}}` címkét.
## Példa
Egyszerű kártya képpel, címmel, szerzővel, dátummal és tovább-hivatkozással:
```html
{{tpae_image}}
{{tpae_author_meta}} · {{tpae_date_created}}
Tovább
```
A `.my-card`, `.meta` és `.more` osztályt a CSS mezőben formázd:
```css
.my-card { border: 1px solid #d0d7e2; padding: 16px; border-radius: 8px; background: #f4f6fa; }
.my-card .meta { color: #667; font-size: 13px; }
.my-card .more { font-weight: 700; }
```
*Nyolc egyéni kártya rácsban: cím, dátum és Tovább hivatkozás* (https://minta-bolt.hu/bt2-smart/)
A képen a kártyák a CSS mezőben megadott keretet és háttérszínt kapják, a cím harminc karakter után le van vágva.
## Korlátozások
- A kódért te felelsz. A HTML mezőben egy le nem zárt címke az oldal többi részének elrendezését is elronthatja.
- A beépített stílusok beállításai itt nem érvényesek: a címhossz-korlát, a kivonat hossza, a **Gomb** kapcsoló és a **Stílus** fül tipográfiája nem hat. Rövidíteni a számozott címkékkel, formázni a saját CSS-sel tudsz. A tovább-hivatkozást magad írod meg a `{{tpae_permalink}}` címkével.
- Csak bejegyzésekhez való: a címkék a szokásos bejegyzésmezőket fedik le, egyéni mezőkhöz nincs címke.
## Hibaelhárítás
- **A címke sima szövegként jelenik meg.** Ellenőrizd a pontos írásmódot a dupla kapcsos zárójellel együtt: a rosszul írt címkét a widget úgy írja ki, ahogy beírtad (például a helyes `{{tpae_author_meta}}`).
- **A kép hibás.** A `{{tpae_image}}` címkét `![]()
` elembe tetted. Használd önmagában, vagy a `{{tpae_image_url}}` címkét a saját elemedben.
- **A CSS nem érvényesül.** Írj az osztályneveidre szűkített választókat, hogy a sablon stílusai ne nyerjenek.