YARPP Custom Templates: 10 responsive Designs mit PHP und CSS

Mit einem YARPP Custom Template bestimmst Du selbst, wie verwandte Beiträge auf Deiner WordPress-Website aussehen. Die zehn Vorlagen in dieser Anleitung reichen von einer kompakten Liste über Kartenraster und Accordion bis zu einem horizontalen Slider. Jede Vorlage besteht aus einer einzelnen PHP-Datei mit eigenem, klar abgegrenztem CSS.

Die neue Fassung kommt ohne externe JavaScript-Bibliothek, zusätzlich eingebundenes jQuery und automatisch laufende Animationen aus. Du kannst ein Template in den YARPP-Einstellungen auswählen oder gezielt über den YARPP-Shortcode aufrufen.

Kurzantwort: So verwendest Du ein YARPP Custom Template

Speichere die gewünschte Datei unter einem Namen wie yarpp-template-dwf-card-grid.php direkt im Hauptverzeichnis Deines aktiven Themes. Nutzt Du ein Child-Theme, gehört die Datei in dessen Hauptverzeichnis. Anschließend wählst Du in den YARPP-Einstellungen die benutzerdefinierte Vorlage aus oder verwendest den Shortcode [yarpp template="yarpp-template-dwf-card-grid" limit=4].

1. YARPP installieren und konfigurieren.
2. Ein bestehendes Backup anlegen und Änderungen zuerst auf einer Testumgebung prüfen.
3. Template-Code als PHP-Datei mit dem Präfix yarpp-template- speichern.
4. Datei direkt in Dein aktives Theme kopieren.
5. Template in YARPP auswählen oder per Shortcode einfügen.
6. Darstellung mit und ohne Beitragsbilder auf Smartphone, Tablet und Desktop testen.

Wichtiger Kompatibilitätshinweis zu YARPP

Stand 30. Juli 2026 nennt die offizielle YARPP-Seite auf WordPress.org Version 5.30.11. Dort ist WordPress 6.7.5 als getestete Version angegeben. WordPress.org weist zugleich darauf hin, dass das Plugin nicht mit den jüngsten drei WordPress-Hauptversionen getestet wurde.

Wenn Dir der ausstehende Kompatibilitätsnachweis zu unsicher ist, kannst Du verwandte Inhalte auch selbst steuern. Meine Anleitung zu Related Posts per Shortcode zeigt dafür eine getrennte Lösung.

Was ist ein YARPP Custom Template?

YARPP steht für Yet Another Related Posts Plugin. Das Plugin berechnet passende Inhalte. Ein Custom Template verändert anschließend deren HTML-Ausgabe und Gestaltung. Die Berechnung der Ähnlichkeit bleibt Aufgabe von YARPP.

Das offizielle Pluginpaket enthält mehrere Beispieldateien im Ordner yarpp-templates. YARPP erkennt eigene Vorlagen, wenn der Dateiname mit yarpp-template- beginnt, die Datei auf .php endet und der Kommentar am Dateianfang eine Zeile mit YARPP Template: enthält.

Welches der zehn Templates passt zu Deiner Website?

Template	Geeignet für	Bilder	Interaktion
Kompakte Liste	textorientierte Blogs und Dokumentationen	nicht erforderlich	keine
Kartenraster	Blogs und Magazine	optional	Fokus und Hover
Accordion	lange Listen auf engem Raum	optional	natives Aufklappen
Flip Card	visuelle Blogs	empfohlen	Fokus und Hover mit Fallback
Grid Overlay	bildstarke Inhalte	empfohlen	Fokus und Hover mit Touch-Fallback
Magazinlayout	redaktionelle Websites	optional	keine
Masonry-Layout	unterschiedlich lange Textauszüge	optional	keine
Polaroid-Galerie	Foto-, Reise- und Kreativblogs	empfohlen	dezente Bewegung
Horizontaler Slider	schmale Inhaltsbereiche und Mobilgeräte	optional	manuelles Scrollen
Timeline	chronologisch geprägte Inhalte	nicht erforderlich	keine

Beginne mit der kompakten Liste oder dem Kartenraster, wenn Du eine robuste Standardlösung suchst. Flip-, Overlay- und Polaroid-Effekte solltest Du nur einsetzen, wenn sie zum bestehenden Design passen und die Lesbarkeit erhalten bleibt.

So bringst Du Deine YARPP-Custom-Templates zum Laufen

Schritt 1: YARPP installieren und Einstellungen prüfen

Installiere YARPP aus dem offiziellen WordPress-Verzeichnis und aktiviere das Plugin. Öffne danach die YARPP-Einstellungen. Lege fest, welche Inhaltstypen berücksichtigt werden und wie YARPP die Ähnlichkeit berechnet.

Schritt 2: Backup und Child-Theme vorbereiten

Ändere keine Dateien eines Parent-Themes. Ein Theme-Update könnte Deine Vorlage überschreiben. Die offizielle WordPress-Dokumentation zu Child-Themes erklärt den updatefesten Aufbau. Lege außerdem vorher ein aktuelles Backup an. Eine praktische Anleitung findest Du in meinem WordPress-Backup-Guide mit UpdraftPlus.

Schritt 3: PHP-Datei korrekt speichern

Kopiere den gewünschten Code in einen reinen Texteditor. Speichere die Datei als UTF-8 und verwende exakt den Dateinamen, der über dem Codeblock steht. Die Datei gehört direkt nach wp-content/themes/dein-child-theme/. Lege innerhalb des Themes keinen zusätzlichen Ordner für die YARPP-Datei an.

Schritt 4: Template auswählen oder Shortcode verwenden

Öffne die YARPP-Einstellungen und wähle im Anzeigeabschnitt die benutzerdefinierte Vorlage aus. Falls Du das Template nur an einer bestimmten Stelle ausgeben möchtest, deaktiviere dort zuerst die automatische Ausgabe und füge anschließend beispielsweise diesen Shortcode ein:

[yarpp template="yarpp-template-dwf-card-grid" limit=4]

Der Wert im Attribut template entspricht dem Dateinamen ohne die Endung .php. Lässt Du die automatische Ausgabe gleichzeitig aktiv, können verwandte Beiträge doppelt erscheinen.

Schritt 5: Ausgabe systematisch testen

• Öffne mehrere veröffentlichte Einzelbeiträge mit unterschiedlichen Kategorien und Schlagwörtern.
• Teste Beiträge mit Beitragsbild, ohne Beitragsbild, mit langem Titel und mit kurzem Titel.
• Bediene sämtliche Links und aufklappbaren Bereiche ausschließlich mit der Tastatur.
• Kontrolliere die Darstellung auf kleinen und großen Viewports.
• Aktiviere im Betriebssystem reduzierte Bewegung und vergleiche Flip- sowie Polaroid-Darstellung.
• Leere nach Änderungen den YARPP-Cache sowie vorhandene Seiten-, Server- und CDN-Caches.

Die zehn YARPP Custom Templates mit Code

Jede Vorlage ist vollständig in einer Datei enthalten. Dadurch kannst Du sie direkt testen. Auf größeren Projekten kannst Du die CSS-Regeln später in die Stylesheet-Datei Deines Child-Themes verschieben. Die Klassen beginnen bewusst mit dwf-yarpp-, damit sie möglichst selten mit Theme- oder Plugin-CSS kollidieren.

1. Kompakte Liste

Die kompakte Liste funktioniert ohne Beitragsbilder und eignet sich für technische Artikel, Dokumentationen und textorientierte Blogs. Auf schmalen Displays rutschen Datum und Inhalt untereinander.

Dateiname: yarpp-template-dwf-compact-list.php

<?php
/*
YARPP Template: DWF Compact List
Description: Kompakte Liste mit Datum und kurzem Textauszug.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-compact {
	margin-block: 2rem;
}

.dwf-yarpp-compact__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #dcdcde;
}

.dwf-yarpp-compact__item {
	border-bottom: 1px solid #dcdcde;
}

.dwf-yarpp-compact__link {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) 3fr;
	gap: 1rem;
	padding: 1rem 0;
	color: inherit;
	text-decoration: none;
}

.dwf-yarpp-compact__link:hover .dwf-yarpp-compact__title,
.dwf-yarpp-compact__link:focus-visible .dwf-yarpp-compact__title {
	text-decoration: underline;
}

.dwf-yarpp-compact__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-compact__date {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-compact__title {
	display: block;
	font-weight: 700;
}

.dwf-yarpp-compact__excerpt {
	display: block;
	margin-top: 0.35rem;
}

@media (max-width: 36rem) {
	.dwf-yarpp-compact__link {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-compact" aria-labelledby="dwf-yarpp-compact-title">
	<h2 id="dwf-yarpp-compact-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-compact__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-compact__item">
				<a class="dwf-yarpp-compact__link" href="<?php the_permalink(); ?>">
					<time class="dwf-yarpp-compact__date" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
						<?php echo esc_html( get_the_date() ); ?>
					</time>
					<span>
						<span class="dwf-yarpp-compact__title"><?php echo esc_html( get_the_title() ); ?></span>
						<span class="dwf-yarpp-compact__excerpt">
							<?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 18 ) ); ?>
						</span>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

2. Responsives Kartenraster

Das Kartenraster passt die Spaltenzahl automatisch an die verfügbare Breite an. Beitragsbilder sind optional. Ein klarer Fokusrahmen unterstützt die Bedienung mit der Tastatur.

Dateiname: yarpp-template-dwf-card-grid.php

<?php
/*
YARPP Template: DWF Card Grid
Description: Responsives Kartenraster mit Beitragsbild, Datum und Textauszug.
Author: Der Webfuchs
*/
?>

<style>
.dwf-yarpp-cards {
	margin-block: 2rem;
}

.dwf-yarpp-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwf-yarpp-cards__item {
	min-width: 0;
}

.dwf-yarpp-cards__link {
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 0.75rem;
	background: #fff;
	color: #1d2327;
	text-decoration: none;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

.dwf-yarpp-cards__link:hover,
.dwf-yarpp-cards__link:focus-visible {
	border-color: currentColor;
	transform: translateY(-0.2rem);
}

.dwf-yarpp-cards__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.dwf-yarpp-cards__image {
	aspect-ratio: 16 / 9;
	background: #f0f0f1;
}

.dwf-yarpp-cards__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dwf-yarpp-cards__content {
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
}

.dwf-yarpp-cards__date {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-cards__title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

@media (prefers-reduced-motion: no-preference) {
	.dwf-yarpp-cards__link {
		transition: transform 180ms ease, border-color 180ms ease;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-cards" aria-labelledby="dwf-yarpp-cards-title">
	<h2 id="dwf-yarpp-cards-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-cards__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-cards__item">
				<a class="dwf-yarpp-cards__link" href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<span class="dwf-yarpp-cards__image">
							<?php
							the_post_thumbnail(
								'medium_large',
								array(
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
							?>
						</span>
					<?php endif; ?>
					<span class="dwf-yarpp-cards__content">
						<time class="dwf-yarpp-cards__date" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
							<?php echo esc_html( get_the_date() ); ?>
						</time>
						<span class="dwf-yarpp-cards__title"><?php echo esc_html( get_the_title() ); ?></span>
						<span><?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 20 ) ); ?></span>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

3. Accordion Layout Template

Das Accordion verwendet die nativen HTML-Elemente details und summary. Dadurch funktionieren Aufklappen und Tastaturbedienung ohne zusätzliches JavaScript.

Dateiname: yarpp-template-dwf-accordion.php

<?php
/*
YARPP Template: DWF Accordion
Description: Barrierearmes Accordion mit nativen Details-Elementen.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-accordion {
	margin-block: 2rem;
}

.dwf-yarpp-accordion__item {
	border: 1px solid #dcdcde;
	border-radius: 0.5rem;
	background: #fff;
}

.dwf-yarpp-accordion__item + .dwf-yarpp-accordion__item {
	margin-top: 0.75rem;
}

.dwf-yarpp-accordion__summary {
	padding: 1rem;
	cursor: pointer;
	font-weight: 700;
}

.dwf-yarpp-accordion__summary:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.dwf-yarpp-accordion__content {
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	gap: 1rem;
	padding: 0 1rem 1rem;
}

.dwf-yarpp-accordion__content--no-image {
	grid-template-columns: 1fr;
}

.dwf-yarpp-accordion__image img {
	width: 100%;
	height: auto;
	border-radius: 0.35rem;
}

.dwf-yarpp-accordion__meta {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-accordion__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 700;
}

.dwf-yarpp-accordion__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 32rem) {
	.dwf-yarpp-accordion__content {
		grid-template-columns: 1fr;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-accordion" aria-labelledby="dwf-yarpp-accordion-title">
	<h2 id="dwf-yarpp-accordion-title">Ähnliche Beiträge</h2>
	<?php while ( have_posts() ) : the_post(); ?>
		<details class="dwf-yarpp-accordion__item">
			<summary class="dwf-yarpp-accordion__summary"><?php echo esc_html( get_the_title() ); ?></summary>
			<div class="dwf-yarpp-accordion__content<?php echo has_post_thumbnail() ? '' : ' dwf-yarpp-accordion__content--no-image'; ?>">
				<?php if ( has_post_thumbnail() ) : ?>
					<div class="dwf-yarpp-accordion__image">
						<?php
						the_post_thumbnail(
							'medium',
							array(
								'alt'      => '',
								'loading'  => 'lazy',
								'decoding' => 'async',
							)
						);
						?>
					</div>
				<?php endif; ?>
				<div>
					<p class="dwf-yarpp-accordion__meta">
						<time datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
							<?php echo esc_html( get_the_date() ); ?>
						</time>
					</p>
					<p><?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 24 ) ); ?></p>
					<a class="dwf-yarpp-accordion__link" href="<?php the_permalink(); ?>">
						Beitrag lesen
					</a>
				</div>
			</div>
		</details>
	<?php endwhile; ?>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

4. Flip Card Template

Die Flip Card reagiert auf Mauszeiger und Tastaturfokus. Auf Touch-Geräten oder bei aktivierter Einstellung für reduzierte Bewegung bleibt die Vorderseite sichtbar und der Link direkt bedienbar.

Dateiname: yarpp-template-dwf-flip-card.php

<?php
/*
YARPP Template: DWF Flip Card
Description: Flip-Karten mit Fokuszustand und Reduced-Motion-Fallback.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-flip {
	margin-block: 2rem;
}

.dwf-yarpp-flip__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwf-yarpp-flip__card {
	min-height: 16rem;
	perspective: 70rem;
}

.dwf-yarpp-flip__link {
	display: block;
	position: relative;
	height: 100%;
	min-height: 16rem;
	color: #1d2327;
	text-decoration: none;
	transform-style: preserve-3d;
}

.dwf-yarpp-flip__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-flip__face {
	display: flex;
	position: absolute;
	inset: 0;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 0.75rem;
	background: #1d2327;
	backface-visibility: hidden;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

.dwf-yarpp-flip__image {
	position: absolute;
	inset: 0;
	background: #f0f0f1;
}

.dwf-yarpp-flip__image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 25%, rgba(0, 0, 0, 0.82));
	content: "";
}

.dwf-yarpp-flip__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dwf-yarpp-flip__title {
	position: relative;
	z-index: 1;
	padding: 1rem;
	color: #fff;
	font-weight: 700;
}

.dwf-yarpp-flip__back {
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: #1d2327;
	color: #fff;
	text-align: center;
	transform: rotateY(180deg);
}

.dwf-yarpp-flip__back strong {
	display: block;
	margin-top: 0.75rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.dwf-yarpp-flip__link {
		transition: transform 450ms ease;
	}

	.dwf-yarpp-flip__link:hover,
	.dwf-yarpp-flip__link:focus-visible {
		transform: rotateY(180deg);
	}
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.dwf-yarpp-flip__back {
		display: none;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-flip" aria-labelledby="dwf-yarpp-flip-title">
	<h2 id="dwf-yarpp-flip-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-flip__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-flip__card">
				<a class="dwf-yarpp-flip__link" href="<?php the_permalink(); ?>">
					<span class="dwf-yarpp-flip__face">
						<?php if ( has_post_thumbnail() ) : ?>
							<span class="dwf-yarpp-flip__image" aria-hidden="true">
								<?php
								the_post_thumbnail(
									'medium_large',
									array(
										'alt'      => '',
										'loading'  => 'lazy',
										'decoding' => 'async',
									)
								);
								?>
							</span>
						<?php endif; ?>
						<span class="dwf-yarpp-flip__title"><?php echo esc_html( get_the_title() ); ?></span>
					</span>
					<span class="dwf-yarpp-flip__face dwf-yarpp-flip__back" aria-hidden="true">
						<time datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
							<?php echo esc_html( get_the_date() ); ?>
						</time>
						<strong>Beitrag lesen</strong>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

5. Grid Hover Template mit sichtbarem Titel

Das Bildraster blendet den Textauszug bei Hover oder Tastaturfokus ein. Der Beitragstitel bleibt dauerhaft sichtbar. Auf Geräten ohne Hover sowie bei reduzierter Bewegung wird auch der Textauszug sofort angezeigt.

Dateiname: yarpp-template-dwf-grid-overlay.php

<?php
/*
YARPP Template: DWF Grid Overlay
Description: Bildraster mit dauerhaft lesbarem Titel und Overlay bei Fokus oder Hover.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-overlay {
	margin-block: 2rem;
}

.dwf-yarpp-overlay__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwf-yarpp-overlay__link {
	display: grid;
	position: relative;
	min-height: 15rem;
	overflow: hidden;
	border-radius: 0.75rem;
	background: #1d2327;
	color: #fff;
	text-decoration: none;
}

.dwf-yarpp-overlay__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-overlay__image,
.dwf-yarpp-overlay__image::after {
	position: absolute;
	inset: 0;
}

.dwf-yarpp-overlay__image {
	background: #2c3338;
}

.dwf-yarpp-overlay__image::after {
	background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.88));
	content: "";
}

.dwf-yarpp-overlay__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dwf-yarpp-overlay__content {
	display: flex;
	position: relative;
	z-index: 1;
	align-self: end;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
}

.dwf-yarpp-overlay__title {
	font-weight: 700;
	line-height: 1.35;
}

.dwf-yarpp-overlay__excerpt {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
}

.dwf-yarpp-overlay__link:hover .dwf-yarpp-overlay__excerpt,
.dwf-yarpp-overlay__link:focus-visible .dwf-yarpp-overlay__excerpt {
	max-height: 8rem;
	opacity: 1;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.dwf-yarpp-overlay__image img,
	.dwf-yarpp-overlay__excerpt {
		transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
	}

	.dwf-yarpp-overlay__link:hover .dwf-yarpp-overlay__image img,
	.dwf-yarpp-overlay__link:focus-visible .dwf-yarpp-overlay__image img {
		transform: scale(1.04);
	}
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.dwf-yarpp-overlay__excerpt {
		max-height: none;
		opacity: 1;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-overlay" aria-labelledby="dwf-yarpp-overlay-title">
	<h2 id="dwf-yarpp-overlay-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-overlay__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li>
				<a class="dwf-yarpp-overlay__link" href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<span class="dwf-yarpp-overlay__image" aria-hidden="true">
							<?php
							the_post_thumbnail(
								'medium_large',
								array(
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
							?>
						</span>
					<?php endif; ?>
					<span class="dwf-yarpp-overlay__content">
						<span class="dwf-yarpp-overlay__title"><?php echo esc_html( get_the_title() ); ?></span>
						<span class="dwf-yarpp-overlay__excerpt">
							<?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 18 ) ); ?>
						</span>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

6. Magazine Layout Template

Das Magazinlayout hebt den ersten YARPP-Treffer über die gesamte Breite hervor. Weitere Treffer erscheinen in einem zweispaltigen Raster. Auf kleineren Displays wird daraus eine einspaltige Liste.

Dateiname: yarpp-template-dwf-magazine.php

<?php
/*
YARPP Template: DWF Magazine
Description: Magazinlayout mit hervorgehobenem ersten Treffer.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-magazine {
	margin-block: 2rem;
}

.dwf-yarpp-magazine__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwf-yarpp-magazine__item:first-child {
	grid-column: 1 / -1;
}

.dwf-yarpp-magazine__link {
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	height: 100%;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 0.6rem;
	color: #1d2327;
	text-decoration: none;
}

.dwf-yarpp-magazine__item:first-child .dwf-yarpp-magazine__link {
	grid-template-columns: minmax(14rem, 1.4fr) 2fr;
}

.dwf-yarpp-magazine__link--no-image,
.dwf-yarpp-magazine__item:first-child .dwf-yarpp-magazine__link--no-image {
	grid-template-columns: 1fr;
}

.dwf-yarpp-magazine__link:hover .dwf-yarpp-magazine__title,
.dwf-yarpp-magazine__link:focus-visible .dwf-yarpp-magazine__title {
	text-decoration: underline;
}

.dwf-yarpp-magazine__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-magazine__image {
	min-height: 100%;
	background: #f0f0f1;
}

.dwf-yarpp-magazine__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dwf-yarpp-magazine__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem;
}

.dwf-yarpp-magazine__date {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-magazine__title {
	font-weight: 700;
	line-height: 1.35;
}

@media (max-width: 48rem) {
	.dwf-yarpp-magazine__list {
		grid-template-columns: 1fr;
	}

	.dwf-yarpp-magazine__item:first-child {
		grid-column: auto;
	}

	.dwf-yarpp-magazine__item:first-child .dwf-yarpp-magazine__link,
	.dwf-yarpp-magazine__link {
		grid-template-columns: minmax(7rem, 10rem) 1fr;
	}
}

@media (max-width: 32rem) {
	.dwf-yarpp-magazine__item:first-child .dwf-yarpp-magazine__link,
	.dwf-yarpp-magazine__link {
		grid-template-columns: 1fr;
	}

	.dwf-yarpp-magazine__image {
		aspect-ratio: 16 / 9;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-magazine" aria-labelledby="dwf-yarpp-magazine-title">
	<h2 id="dwf-yarpp-magazine-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-magazine__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-magazine__item">
				<a class="dwf-yarpp-magazine__link<?php echo has_post_thumbnail() ? '' : ' dwf-yarpp-magazine__link--no-image'; ?>" href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<span class="dwf-yarpp-magazine__image">
							<?php
							the_post_thumbnail(
								'medium_large',
								array(
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
							?>
						</span>
					<?php endif; ?>
					<span class="dwf-yarpp-magazine__content">
						<time class="dwf-yarpp-magazine__date" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
							<?php echo esc_html( get_the_date() ); ?>
						</time>
						<span class="dwf-yarpp-magazine__title"><?php echo esc_html( get_the_title() ); ?></span>
						<span><?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 20 ) ); ?></span>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

7. Masonry Layout Template ohne JavaScript

Diese Variante nutzt CSS-Spalten für eine masonryähnliche Darstellung. Die Dokumentreihenfolge bleibt erhalten. Abhängig von der verfügbaren Breite entstehen automatisch mehr oder weniger Spalten.

Dateiname: yarpp-template-dwf-masonry.php

<?php
/*
YARPP Template: DWF Masonry
Description: CSS-Masonry-ähnliche Karten ohne JavaScript.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-masonry {
	margin-block: 2rem;
}

.dwf-yarpp-masonry__list {
	columns: 3 15rem;
	column-gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwf-yarpp-masonry__item {
	break-inside: avoid;
	margin: 0 0 1rem;
}

.dwf-yarpp-masonry__link {
	display: block;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 0.6rem;
	background: #fff;
	color: #1d2327;
	text-decoration: none;
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.07);
}

.dwf-yarpp-masonry__link:hover .dwf-yarpp-masonry__title,
.dwf-yarpp-masonry__link:focus-visible .dwf-yarpp-masonry__title {
	text-decoration: underline;
}

.dwf-yarpp-masonry__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-masonry__image img {
	display: block;
	width: 100%;
	height: auto;
}

.dwf-yarpp-masonry__content {
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
}

.dwf-yarpp-masonry__date {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-masonry__title {
	font-weight: 700;
	line-height: 1.35;
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-masonry" aria-labelledby="dwf-yarpp-masonry-title">
	<h2 id="dwf-yarpp-masonry-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-masonry__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-masonry__item">
				<a class="dwf-yarpp-masonry__link" href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<span class="dwf-yarpp-masonry__image">
							<?php
							the_post_thumbnail(
								'medium_large',
								array(
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
							?>
						</span>
					<?php endif; ?>
					<span class="dwf-yarpp-masonry__content">
						<time class="dwf-yarpp-masonry__date" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
							<?php echo esc_html( get_the_date() ); ?>
						</time>
						<span class="dwf-yarpp-masonry__title"><?php echo esc_html( get_the_title() ); ?></span>
						<span><?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 26 ) ); ?></span>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

8. Polaroid Gallery Template

Die Polaroid-Galerie eignet sich vor allem für Inhalte mit gepflegten Beitragsbildern. Bei reduzierter Bewegung entfernt das CSS die leichten Drehungen vollständig.

Dateiname: yarpp-template-dwf-polaroid.php

<?php
/*
YARPP Template: DWF Polaroid
Description: Polaroid-Galerie mit ruhigem Reduced-Motion-Fallback.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-polaroid {
	margin-block: 2rem;
}

.dwf-yarpp-polaroid__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwf-yarpp-polaroid__item:nth-child(3n + 1) {
	transform: rotate(-1.25deg);
}

.dwf-yarpp-polaroid__item:nth-child(3n + 2) {
	transform: rotate(1deg);
}

.dwf-yarpp-polaroid__link {
	display: block;
	height: 100%;
	padding: 0.75rem 0.75rem 1.25rem;
	border: 1px solid #dcdcde;
	background: #fff;
	color: #1d2327;
	text-decoration: none;
	box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
}

.dwf-yarpp-polaroid__link:hover,
.dwf-yarpp-polaroid__link:focus-visible {
	transform: translateY(-0.2rem);
}

.dwf-yarpp-polaroid__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-polaroid__image {
	display: block;
	aspect-ratio: 1 / 1;
	background: #f0f0f1;
}

.dwf-yarpp-polaroid__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dwf-yarpp-polaroid__title {
	display: block;
	margin-top: 1rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	.dwf-yarpp-polaroid__link {
		transition: transform 180ms ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dwf-yarpp-polaroid__item {
		transform: none !important;
	}
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-polaroid" aria-labelledby="dwf-yarpp-polaroid-title">
	<h2 id="dwf-yarpp-polaroid-title">Ähnliche Beiträge</h2>
	<ul class="dwf-yarpp-polaroid__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-polaroid__item">
				<a class="dwf-yarpp-polaroid__link" href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<span class="dwf-yarpp-polaroid__image">
							<?php
							the_post_thumbnail(
								'medium_large',
								array(
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
							?>
						</span>
					<?php endif; ?>
					<span class="dwf-yarpp-polaroid__title"><?php echo esc_html( get_the_title() ); ?></span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

[yarpp template="ya

9. Slider Layout Template ohne Slick und jQuery

Der horizontale Slider verwendet natives CSS-Scrolling. Besucher bewegen die Liste selbst per Touch, Trackpad, Mausrad mit horizontaler Funktion oder Tastatur. Es gibt keine automatische Bewegung und keine Dateien von externen CDNs.

Dateiname: yarpp-template-dwf-slider.php

<?php
/*
YARPP Template: DWF Horizontal Slider
Description: Horizontal scrollbar und touchfreundliche Karten ohne externe Bibliothek.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-slider {
	margin-block: 2rem;
}

.dwf-yarpp-slider__hint {
	margin-top: -0.5rem;
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-slider__list {
	display: grid;
	grid-auto-columns: minmax(min(82vw, 16rem), 32%);
	grid-auto-flow: column;
	gap: 1rem;
	overflow-x: auto;
	margin: 0;
	padding: 0.25rem 0.25rem 1rem;
	list-style: none;
	scroll-padding-inline: 0.25rem;
	scroll-snap-type: x proximity;
	scrollbar-width: auto;
}

.dwf-yarpp-slider__item {
	min-width: 0;
	scroll-snap-align: start;
}

.dwf-yarpp-slider__link {
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 0.6rem;
	background: #fff;
	color: #1d2327;
	text-decoration: none;
}

.dwf-yarpp-slider__link:hover .dwf-yarpp-slider__title,
.dwf-yarpp-slider__link:focus-visible .dwf-yarpp-slider__title {
	text-decoration: underline;
}

.dwf-yarpp-slider__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.dwf-yarpp-slider__image {
	aspect-ratio: 16 / 9;
	background: #f0f0f1;
}

.dwf-yarpp-slider__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dwf-yarpp-slider__content {
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
}

.dwf-yarpp-slider__date {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-slider__title {
	font-weight: 700;
	line-height: 1.35;
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-slider" aria-labelledby="dwf-yarpp-slider-title">
	<h2 id="dwf-yarpp-slider-title">Ähnliche Beiträge</h2>
	<p class="dwf-yarpp-slider__hint">Horizontal scrollen, um weitere Beiträge zu sehen.</p>
	<ul class="dwf-yarpp-slider__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-slider__item">
				<a class="dwf-yarpp-slider__link" href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<span class="dwf-yarpp-slider__image">
							<?php
							the_post_thumbnail(
								'medium_large',
								array(
									'alt'      => '',
									'loading'  => 'lazy',
									'decoding' => 'async',
								)
							);
							?>
						</span>
					<?php endif; ?>
					<span class="dwf-yarpp-slider__content">
						<time class="dwf-yarpp-slider__date" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
							<?php echo esc_html( get_the_date() ); ?>
						</time>
						<span class="dwf-yarpp-slider__title"><?php echo esc_html( get_the_title() ); ?></span>
					</span>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

10. Timeline Layout Template

Die Timeline ordnet verwandte Beiträge als semantische Liste mit Veröffentlichungsdatum, Titel und kurzem Textauszug. Sie benötigt keine Bilder und bleibt auch bei längeren Titeln übersichtlich.

Dateiname: yarpp-template-dwf-timeline.php

<?php
/*
YARPP Template: DWF Timeline
Description: Vertikale Timeline mit Datum, Titel und Textauszug.
Author: Der Webfuchs
*/
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.dwf-yarpp-timeline {
	margin-block: 2rem;
}

.dwf-yarpp-timeline__list {
	position: relative;
	margin: 0;
	padding: 0 0 0 2rem;
	list-style: none;
}

.dwf-yarpp-timeline__list::before {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.45rem;
	width: 0.2rem;
	border-radius: 999px;
	background: #2271b1;
	content: "";
}

.dwf-yarpp-timeline__item {
	position: relative;
	padding-bottom: 1.25rem;
}

.dwf-yarpp-timeline__item::before {
	position: absolute;
	top: 0.45rem;
	left: -1.95rem;
	width: 0.8rem;
	height: 0.8rem;
	border: 0.2rem solid #fff;
	border-radius: 50%;
	background: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	content: "";
}

.dwf-yarpp-timeline__link {
	display: grid;
	gap: 0.4rem;
	padding: 1rem;
	border: 1px solid #dcdcde;
	border-radius: 0.6rem;
	background: #fff;
	color: #1d2327;
	text-decoration: none;
}

.dwf-yarpp-timeline__link:hover .dwf-yarpp-timeline__title,
.dwf-yarpp-timeline__link:focus-visible .dwf-yarpp-timeline__title {
	text-decoration: underline;
}

.dwf-yarpp-timeline__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.dwf-yarpp-timeline__date {
	color: #50575e;
	font-size: 0.875rem;
}

.dwf-yarpp-timeline__title {
	font-weight: 700;
	line-height: 1.35;
}
</style>

<?php if ( have_posts() ) : ?>
<section class="dwf-yarpp-timeline" aria-labelledby="dwf-yarpp-timeline-title">
	<h2 id="dwf-yarpp-timeline-title">Ähnliche Beiträge</h2>
	<ol class="dwf-yarpp-timeline__list">
		<?php while ( have_posts() ) : the_post(); ?>
			<li class="dwf-yarpp-timeline__item">
				<a class="dwf-yarpp-timeline__link" href="<?php the_permalink(); ?>">
					<time class="dwf-yarpp-timeline__date" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
						<?php echo esc_html( get_the_date() ); ?>
					</time>
					<span class="dwf-yarpp-timeline__title"><?php echo esc_html( get_the_title() ); ?></span>
					<span><?php echo esc_html( wp_trim_words( wp_strip_all_tags( get_the_excerpt() ), 24 ) ); ?></span>
				</a>
			</li>
		<?php endwhile; ?>
	</ol>
</section>
<?php else : ?>
	<p>Keine ähnlichen Beiträge gefunden.</p>
<?php endif; ?>

Warum Rotating Cube und Tabbed Layout entfallen

Die frühere Fassung enthielt einen rotierenden Würfel und eine Tab-Navigation. Beide Varianten benötigen zusätzliche Zustandslogik, damit Tastaturfokus, ARIA-Zustände, Touch-Bedienung und reduzierte Bewegung zuverlässig zusammenspielen. Eine kurze JavaScript-Lösung innerhalb einer kopierten Template-Datei wäre dafür unnötig fehleranfällig.

Das responsive Kartenraster ersetzt den Würfel. Accordion und kompakte Liste übernehmen die Aufgabe der Tabs. Die Inhalte bleiben damit direkt erreichbar und funktionieren ohne externe Bibliotheken.

So passt Du Farben, Abstände und Bildgrößen an

Alle CSS-Regeln stehen am Anfang der jeweiligen PHP-Datei. Suche innerhalb Deines ausgewählten Templates nach der passenden Klasse und ändere nur kleine Bereiche. Lege vorher eine Kopie der funktionierenden Datei an.

Anpassung	Typische CSS-Eigenschaft	Beispiel
Abstand zwischen Karten	gap	gap: 1.5rem;
Rahmenfarbe	border-color	border-color: #c3c4c7;
Abrundung	border-radius	border-radius: 0.75rem;
Akzentfarbe der Timeline	background	background: #2271b1;
Mindestbreite einer Karte	minmax()	minmax(16rem, 1fr)
Bildformat	aspect-ratio	aspect-ratio: 4 / 3;

Verwende keine sehr niedrigen Kontraste für Text und Fokusrahmen. Teste nach jeder Änderung lange Titel, fehlende Beitragsbilder und die mobile Darstellung.

Fehler beheben: Wenn das YARPP Template nicht erscheint

Das Template wird in den Einstellungen nicht angeboten

• Der Dateiname muss mit yarpp-template- beginnen und auf .php enden.
• Die Datei muss direkt im Hauptverzeichnis des aktiven Themes liegen.
• Bei aktivem Child-Theme gehört sie in das Child-Theme und nicht in das Parent-Theme.
• Der Dateikopf muss die Zeile YARPP Template: enthalten.
• Prüfe, ob die Datei versehentlich als .php.txt gespeichert wurde.

Es werden keine verwandten Beiträge gefunden

Das Layout kann nur Treffer anzeigen, die YARPP liefert. Die offizielle YARPP-FAQ empfiehlt für die Fehlersuche, den Schwellenwert vorübergehend niedrig anzusetzen und danach so weit anzuheben, dass unpassende Treffer verschwinden. Prüfe außerdem Pool, Inhaltstypen, Kategorien und Schlagwörter in den YARPP-Einstellungen.

Die Ausgabe erscheint doppelt

Meist sind automatische Ausgabe und Shortcode gleichzeitig aktiv. Entscheide Dich für eine Platzierungsmethode. Deaktiviere die automatische Anzeige, wenn Du YARPP gezielt mit Block oder Shortcode platzierst.

Bilder fehlen oder wirken verzerrt

YARPP und die Vorlagen verwenden WordPress-Beitragsbilder. Weise den betroffenen Beiträgen ein Beitragsbild zu. Kontrolliere außerdem, ob Dein Theme eigene globale Bildregeln erzwingt. Die Templates verwenden object-fit: cover nur in Layouts mit festem Bildformat.

Nach einer Änderung bleibt das alte Design sichtbar

Leere zuerst den YARPP-Cache. Leere danach vorhandene WordPress-, Server-, CDN- und Browser-Caches. Wenn WordPress nach einer PHP-Änderung einen Fehler zeigt, hilft Dir meine Anleitung zum WordPress Debugging beim Eingrenzen.

Häufige Fragen zu YARPP Custom Templates

Fazit: Erst robust starten, dann gestalten

Für den Einstieg sind kompakte Liste und Kartenraster die robustesten Varianten. Accordion, Flip Card und Grid Overlay eignen sich für speziellere Darstellungen, benötigen aber einen sorgfältigen Test mit Tastatur, Touch und reduzierter Bewegung.

Behalte außerdem den Wartungsstand von YARPP im Blick. Solange WordPress.org für YARPP 5.30.11 nur WordPress 6.7.5 als getestet ausweist, sollte jede Verwendung mit WordPress 7.0.2 zuerst in einer Testumgebung geprüft werden.