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

Húzd az oldalra a Blog/bejegyzések listája widgetet.
Az Elrendezés szakaszban a hatodik stílust válaszd, az intelligens ciklusszerkesztőt, majd az elrendezést.
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

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

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

<article class="my-card">
  <a href="{{tpae_permalink}}">{{tpae_image}}</a>
  <h3><a href="{{tpae_permalink}}">{{tpae_title_30}}</a></h3>
  <p class="meta">{{tpae_author_meta}} &middot; {{tpae_date_created}}</p>
  <a class="more" href="{{tpae_permalink}}">Tovább</a>
</article>

A .my-card, .meta és .more osztályt a CSS mezőben formázd:

.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

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 <img> 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.

Készült: 2026. november 2.