10 YARPP Custom Templates

Vielleicht nutzt Du schon das Plugin YARPP (Yet Another Related Posts Plugin) für Deine WordPress-Seite, um Deinen Lesern verwandte Beiträge zu zeigen. Das Plugin ist wirklich praktisch, um Besucher länger auf Deiner Seite zu halten. Aber mal ehrlich, die mitgelieferten Vorlagen von YARPP sind ziemlich basic, oder? Sie machen ihren Job, aber wenn Du Deinen Blog oder Deine Website wirklich individuell und ansprechend gestalten möchtest, brauchst Du einfach etwas mehr. 

Deshalb habe ich 10 Custom-Templates für YARPP erstellt, die Deine verwandten Beiträge nicht nur besser aussehen lassen, sondern auch perfekt zu Deinem eigenen Design passen. Egal, ob Du es minimalistisch, farbenfroh oder mit vielen Infos magst – hier ist für jeden was dabei. 

10 YARPP Custum Templates

Lass uns gleich loslegen und die Templates durchgehen, die Deiner Seite den nächsten Kick geben! 

Accordion Layout Template

Das “Accordion Layout Template” ist eine richtig schicke Möglichkeit, Deine verwandten Beiträge auf Deiner Website zu präsentieren. Stell Dir vor, Deine Besucher sehen nur die Titel der Beiträge und können durch einen Klick auf den Titel eine Vorschau mit einem Miniaturbild und dem Veröffentlichungsdatum öffnen. Das ist besonders praktisch, wenn Du viele verwandte Beiträge hast und sie trotzdem übersichtlich und platzsparend darstellen möchtest.

Der Code:

<?php
/*
YARPP Template: Accordion Layout Template
Description: Ein benutzerdefiniertes YARPP-Template mit einem Akkordeon-Design.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000; /* Titel-Farbe */
    background-color: #ffffff; /* Hintergrundfarbe */
    font-family: Arial, sans-serif; /* Beispiel-Schriftfamilie */
    font-size: 24px; /* Schriftgröße */
    text-align: center;
    margin-bottom: 20px;
}

.related-posts-accordion {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-header {
    background: #f7f7f7;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

.accordion-content {
    display: none;
    padding: 10px;
}

.accordion-header:hover {
    background: #e2e2e2;
}

.related-post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.related-post-title {
    font-size: 16px;
    font-weight: bold;
}

.related-post-date {
    font-size: 12px;
    color: #666;
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="related-posts-accordion">
    <?php if (have_posts()): ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="accordion-item">
                <div class="accordion-header"><?php the_title(); ?></div>
                <div class="accordion-content">
                    <div class="related-post-thumbnail">
                        <?php if (has_post_thumbnail()): ?>
                            <?php the_post_thumbnail('medium'); ?>
                        <?php endif; ?>
                    </div>
                    <div class="related-post-date">
                        <?php the_time('F j, Y'); ?>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const headers = document.querySelectorAll('.accordion-header');
    headers.forEach(header => {
        header.addEventListener('click', function() {
            const content = this.nextElementSibling;
            if (content.style.display === 'block') {
                content.style.display = 'none';
            } else {
                content.style.display = 'block';
            }
        });
    });
});
</script>

Und so sieht es dann aus:

Flip Card Template

Das “Flip Card Template” ist eine coole Möglichkeit, Deine verwandten Beiträge auf eine interaktive und visuell ansprechende Weise zu präsentieren. Bei diesem Design können Deine Besucher die Beiträge auf einer Karte sehen, die sich bei einem Mouseover umdreht, um zusätzliche Informationen wie das Veröffentlichungsdatum und einen “Read More”-Link anzuzeigen. Perfekt, wenn Du Deine Website dynamisch und modern gestalten möchtest.

Der Code:

<?php
/*
Yrelated-posts Template: Flip Card Template
Description: Ein benutzerdefiniertes Yrelated-posts-Template mit einem Flip-Card-Design.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 24px;
}

.related-posts-flip-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.related-posts-flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.related-posts-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.related-posts-flip-card:hover .related-posts-flip-card-inner {
    transform: rotateY(180deg);
}

.related-posts-flip-card-front, .related-posts-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.related-posts-flip-card-front {
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Verhindert das Überragen des Bildes */
}

.related-posts-flip-card-back {
    background-color: #f8f8f8;
    color: black;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.related-posts-flip-card-thumbnail {
    width: 100%;
    height: 120px; /* Feste Höhe, um das Bild innerhalb der Karte zu begrenzen */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.related-posts-flip-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Stellt sicher, dass das gesamte Bild angezeigt wird */
}

.related-posts-flip-card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.related-posts-flip-card-title a {
    text-decoration: none;
    color: inherit;
}

.related-posts-flip-card-title a:hover {
    text-decoration: underline;
}

.related-posts-flip-card-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.related-posts-flip-card-link a {
    text-decoration: none;
    color: #0073aa;
    font-size: 14px;
}

.related-posts-flip-card-link a:hover {
    text-decoration: underline;
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="related-posts-flip-cards">
    <?php if (have_posts()): ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="related-posts-flip-card">
                <div class="related-posts-flip-card-inner">
                    <div class="related-posts-flip-card-front">
                        <div class="related-posts-flip-card-thumbnail">
                            <?php if (has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('full'); ?>
                            <?php endif; ?>
                        </div>
                        <div class="related-posts-flip-card-title">
                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        </div>
                    </div>
                    <div class="related-posts-flip-card-back">
                        <div class="related-posts-flip-card-date">
                            <?php the_time('F j, Y'); ?>
                        </div>
                        <div class="related-posts-flip-card-link">
                            <a href="<?php the_permalink(); ?>">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yrelated-posts'); ?></p>
    <?php endif; ?>
</div>

Und so sieht es dann aus:

Grid Hover Template

Das “Grid Hover Template” ist eine moderne und stilvolle Möglichkeit, Deine verwandten Beiträge in einem Rasterlayout anzuzeigen. Mit diesem Template erscheinen Deine Beiträge in einem sauberen Grid, und sobald ein Besucher mit der Maus über einen Beitrag fährt, wird dieser durch einen eleganten Zoom-Effekt hervorgehoben. Zudem erscheint eine halbtransparente Overlay-Box, die den Titel und das Veröffentlichungsdatum des Beitrags anzeigt.

Der Code:

<?php
/*
YARPP Template: Grid Hoover Template
Description: Ein benutzerdefiniertes YARPP-Template im Grid-Format mit Hoover-Effekt.
Author: Dein Name
*/
?>
<style>
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.grid-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.1);
}

.grid-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-item:hover .overlay {
    opacity: 1;
}

.related-post-title {
    font-size: 16px;
    font-weight: bold;
}

.related-post-date {
    font-size: 12px;
    color: #ccc;
}
</style>

<div class="related-posts-grid">
    <?php if (have_posts()): ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="grid-item">
                <a href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail()): ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php endif; ?>
                </a>
                <div class="overlay">
                    <div class="related-post-title"><?php the_title(); ?></div>
                    <div class="related-post-date"><?php the_time('F j, Y'); ?></div>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

Und so sieht’s aus:

Magazine Layout Template

Das “Magazine Layout Template” bringt den Look und das Feeling eines Magazins auf Deine Website. Mit diesem Template werden Deine verwandten Beiträge in einem eleganten, mehrspaltigen Layout angezeigt, das an die klassische Magazinoptik erinnert. Jeder Beitrag wird in einer eigenen Box präsentiert, mit einem großen Thumbnail-Bild, einem prägnanten Titel und dem Veröffentlichungsdatum. Dieses Layout eignet sich besonders gut, wenn Du Deine Beiträge in einem strukturierten, professionellen Design präsentieren möchtest.

Der Code

<?php
/*
Yrelated-posts Template: Magazine Layout Template
Description: Ein benutzerdefiniertes Yrelated-posts-Template im Magazin-Stil.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000; /* Titel-Farbe */
    background-color: #ffffff; /* Hintergrundfarbe */
    font-family: Arial, sans-serif; /* Beispiel-Schriftfamilie */
    font-size: 24px; /* Schriftgröße */
    text-align: center;
    margin-bottom: 20px;
}

.related-posts-magazine-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 -8px;
}

.related-posts-magazine-post {
    flex: 1 1 calc(33.333% - 16px);
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 8px;
    display: flex;
    flex-direction: column;
}

.related-posts-magazine-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.related-posts-magazine-content {
    padding: 16px;
}

.related-posts-magazine-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
}

.related-posts-magazine-title a {
    text-decoration: none;
    color: inherit;
}

.related-posts-magazine-title a:hover {
    text-decoration: underline;
}

.related-posts-magazine-date {
    font-size: 14px;
    color: #666;
    text-align: left;
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="related-posts-magazine-layout">
    <?php if (have_posts()): ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="related-posts-magazine-post">
                <div class="related-posts-magazine-thumbnail">
                    <?php if (has_post_thumbnail()): ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php endif; ?>
                </div>
                <div class="related-posts-magazine-content">
                    <div class="related-posts-magazine-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </div>
                    <div class="related-posts-magazine-date">
                        <?php the_time('F j, Y'); ?>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yrelated-posts'); ?></p>
    <?php endif; ?>
</div>

Und so sieht’s aus:

Masonry Layout Template

Das “Masonry Layout Template” bringt einen dynamischen und kreativen Stil auf Deine Website, indem es Deine verwandten Beiträge in einem Masonry-Layout präsentiert. Dieser Stil, der oft auf Pinterest zu sehen ist, ordnet die Beiträge in einem ansprechenden, kachelartigen Layout an, das den verfügbaren Platz optimal ausnutzt. Jeder Beitrag wird in einer eigenen Box dargestellt, mit einem Thumbnail-Bild, einem Titel und dem Veröffentlichungsdatum.

Der Code:

<?php
/*
YARPP Template: Masonry Layout Template
Description: Ein benutzerdefiniertes YARPP-Template im Masonry-Stil.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000; /* Titel-Farbe */
    background-color: #ffffff; /* Hintergrundfarbe */
    font-family: Arial, sans-serif; /* Beispiel-Schriftfamilie */
    font-size: 24px; /* Schriftgröße */
    text-align: center;
    margin-bottom: 20px;
}

.related-posts-masonry {
    column-count: 3;
    column-gap: 16px;
}

.masonry-item {
    break-inside: avoid;
    border: 1px solid #ddd;
    padding: 16px;
    margin-bottom: 16px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.related-post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.related-post-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.related-post-title a {
    text-decoration: none;
    color: inherit;
}

.related-post-title a:hover {
    text-decoration: underline;
}

.related-post-date {
    font-size: 12px;
    color: #666;
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="related-posts-masonry">
    <?php if (have_posts()): ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="masonry-item">
                <div class="related-post-thumbnail">
                    <?php if (has_post_thumbnail()): ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php endif; ?>
                </div>
                <div class="related-post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
                <div class="related-post-date">
                    <?php the_time('F j, Y'); ?>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

Und so sieht´s aus:

Polaroid Gallery Template

Das “Polaroid Gallery Template” bringt den nostalgischen Charme von Polaroid-Fotos auf Deine Website. Dieses Template präsentiert Deine verwandten Beiträge in einem einzigartigen Polaroid-Stil, bei dem jeder Beitrag wie ein klassisches Polaroid-Foto aussieht. Die Beiträge werden in einer Galerie angezeigt, die leicht versetzt ist, um den Look einer echten Polaroid-Sammlung zu imitieren. Wenn ein Besucher mit der Maus über ein Foto fährt, richtet sich das Bild gerade aus und hebt sich leicht hervor, was für einen interaktiven und ansprechenden Effekt sorgt.

Der Code:

<?php
/*
YARPP Template: Polaroid Gallery Template
Description: Ein benutzerdefiniertes YARPP-Template mit einem Polaroid-Galerie-Design.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.polaroid-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 20px auto;
    width: 90%;
    position: relative;
}

.polaroid-item {
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    cursor: pointer;
    width: 200px;
    height: 250px;
    overflow: hidden;
    transform: rotate(calc(-5deg + (10 * var(--i))));
}

.polaroid-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    width: 100%;
}

.polaroid-item:hover {
    transform: rotate(0deg) scale(1.05);
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.polaroid-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.polaroid-caption {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.polaroid-date {
    text-align: center;
    font-size: 12px;
    color: #666;
}

@media screen and (max-width: 600px) {
    .polaroid-item {
        width: 150px;
        height: 200px;
    }
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="polaroid-gallery">
    <?php if (have_posts()): ?>
        <?php $count = 0; ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="polaroid-item" style="--i:<?php echo rand(1, 5); ?>;">
                <a href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail()): ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php endif; ?>
                    <div class="polaroid-caption"><?php the_title(); ?></div>
                    <div class="polaroid-date"><?php the_time('F j, Y'); ?></div>
                </a>
            </div>
            <?php $count++; ?>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

Und so sieht’s aus:

Rotating Cube Template

Das “Rotating Cube Template” bringt Deine verwandten Beiträge in Bewegung! Dieses Template zeigt bis zu vier Beiträge auf den Flächen eines sich drehenden Würfels an. Jeder Beitrag wird auf einer Seite des Würfels dargestellt, und der Würfel dreht sich kontinuierlich, sodass Deine Besucher alle Inhalte auf kreative und dynamische Weise entdecken können. Diese auffällige Präsentation eignet sich besonders gut, wenn Du Deinen Lesern ein einzigartiges und interaktives Erlebnis bieten möchtest.

Der Code:

<?php
/*
Yrelated-posts Template: Rotating Cube Template
Description: Ein benutzerdefiniertes Yrelated-posts-Template mit einem Rotating Cube Design.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.related-posts-rotating-cube-carousel-wrapper {
    perspective: 1000px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}

.related-posts-rotating-cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: related-posts-rotate-cube 20s infinite linear;
}

.related-posts-cube-face {
    position: absolute;
    width: 300px;
    height: 300px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert das Überragen des Bildes */
}

.related-posts-cube-face:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.related-posts-cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(150px); }
.related-posts-cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(150px); }
.related-posts-cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(150px); }

.related-posts-thumbnail img {
    max-width: 100%;
    height: 100%;
    object-fit: contain; /* Stellt sicher, dass das Bild innerhalb der Box passt */
}

.related-posts-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}

.related-posts-date {
    font-size: 14px;
    color: #666;
    text-align: center;
}

@keyframes related-posts-rotate-cube {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="related-posts-rotating-cube-carousel-wrapper">
    <div class="related-posts-rotating-cube">
        <?php if (have_posts()): ?>
            <?php $count = 0; ?>
            <?php while (have_posts() && $count < 4) : the_post(); ?>
                <div class="related-posts-cube-face">
                    <div class="related-posts-thumbnail">
                        <?php if (has_post_thumbnail()): ?>
                            <?php the_post_thumbnail('full'); ?>
                        <?php endif; ?>
                    </div>
                    <div class="related-posts-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </div>
                    <div class="related-posts-date">
                        <?php the_time('F j, Y'); ?>
                    </div>
                </div>
                <?php $count++; ?>
            <?php endwhile; ?>
        <?php else: ?>
            <p><?php _e('No related posts found.', 'yrelated-posts'); ?></p>
        <?php endif; ?>
    </div>
</div>

Und so sieht’s aus:

Slider Layout Template

Das “Slider Layout Template” bringt Bewegung in Deine verwandten Beiträge! Dieses Template zeigt Deine Beiträge in einem eleganten Slider, der automatisch durch die Inhalte blättert. Der Slider eignet sich besonders gut, um eine größere Anzahl verwandter Beiträge platzsparend und stilvoll zu präsentieren, ohne dass Deine Seite überladen wirkt. Dank des modernen Designs und der nahtlosen Integration kannst Du Deinen Lesern ein dynamisches Nutzererlebnis bieten.

Der Code:

<?php
/*
YARPP Template: Slider Layout Template
Description: Ein benutzerdefiniertes YARPP-Template mit einem Slider-Design.
Author: Dein Name
*/
?>

<!-- Slick Slider CSS und JS Einbinden -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<style>
.related-posts-slider {
    width: 100%;
}

.slick-slide {
    padding: 10px;
}

.related-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.related-post-title {
    font-size: 16px;
    font-weight: bold;
}

.related-post-date {
    font-size: 12px;
    color: #666;
}
</style>

<div class="related-posts-slider">
    <?php if (have_posts()): ?>
        <?php while (have_posts()) : the_post(); ?>
            <div>
                <div class="related-post-thumbnail">
                    <a href="<?php the_permalink(); ?>">
                        <?php if (has_post_thumbnail()): ?>
                            <?php the_post_thumbnail('medium'); ?>
                        <?php endif; ?>
                    </a>
                </div>
                <div class="related-post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
                <div class="related-post-date">
                    <?php the_time('F j, Y'); ?>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.related-posts-slider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
    });
});
</script>

Und so sieht’s aus:

Tabbed Layout Template

Das “Tabbed Layout Template” bietet eine clevere Möglichkeit, Deine verwandten Beiträge in einem kompakten und gut organisierten Layout anzuzeigen. Mit diesem Template werden die Beiträge in Tabs sortiert, sodass Deine Besucher durch die verschiedenen Inhalte blättern können, ohne dass die Seite überladen wirkt. Dies ist ideal, wenn Du eine große Anzahl von verwandten Beiträgen hast und diese übersichtlich und benutzerfreundlich präsentieren möchtest.

Der Code:

<?php
/*
YARPP Template: Tabbed Layout Template
Description: Ein benutzerdefiniertes YARPP-Template mit einem Tabbed-Design.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000; /* Titel-Farbe */
    background-color: #ffffff; /* Hintergrundfarbe */
    font-family: Arial, sans-serif; /* Beispiel-Schriftfamilie */
    font-size: 24px; /* Schriftgröße */
    text-align: center;
    margin-bottom: 20px;
}

.related-posts-tabbed {
    width: 100%;
}

.tabs {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

.tab-link {
    flex: 1; /* Flex-Grow auf 1 setzen, um sicherzustellen, dass die Tabs gleichmäßig verteilt sind */
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    border-right: 1px solid #ddd;
}

.tab-link:last-child {
    border-right: none;
}

.tab-link:hover {
    background: #e2e2e2;
}

.tab-content {
    display: none;
    padding: 20px;
    background: white;
}

.tab-content.active {
    display: block;
}

.related-post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.related-post-title {
    font-size: 16px;
    font-weight: bold;
}

.related-post-title a {
    text-decoration: none;
    color: inherit;
}

.related-post-title a:hover {
    text-decoration: underline;
}

.related-post-date {
    font-size: 12px;
    color: #666;
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="related-posts-tabbed">
    <ul class="tabs">
        <?php if (have_posts()): ?>
            <?php $count = 0; ?>
            <?php while (have_posts()) : the_post(); ?>
                <li class="tab-link <?php echo $count === 0 ? 'active' : ''; ?>" data-tab="tab-<?php echo $count; ?>">
                    <a href="javascript:void(0);"><?php the_title(); ?></a>
                </li>
                <?php $count++; ?>
            <?php endwhile; ?>
        <?php endif; ?>
    </ul>
    <?php if (have_posts()): ?>
        <?php $count = 0; ?>
        <?php while (have_posts()) : the_post(); ?>
            <div id="tab-<?php echo $count; ?>" class="tab-content <?php echo $count === 0 ? 'active' : ''; ?>">
                <div class="related-post-thumbnail">
                    <a href="<?php the_permalink(); ?>">
                        <?php if (has_post_thumbnail()): ?>
                            <?php the_post_thumbnail('medium'); ?>
                        <?php endif; ?>
                    </a>
                </div>
                <div class="related-post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
                <div class="related-post-date">
                    <?php the_time('F j, Y'); ?>
                </div>
            </div>
            <?php $count++; ?>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-link');
    const contents = document.querySelectorAll('.tab-content');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const target = document.querySelector('#' + this.getAttribute('data-tab'));
            
            tabs.forEach(t => t.classList.remove('active'));
            contents.forEach(c => c.classList.remove('active'));
            
            this.classList.add('active');
            target.classList.add('active');
        });
    });
});
</script>

Und so sieht’s aus:

Timeline Layout Template

Das “Timeline Layout Template” ist eine einzigartige Möglichkeit, Deine verwandten Beiträge in einer chronologischen Abfolge darzustellen. Dieses Template ordnet die Beiträge entlang einer Zeitachse an, wobei jeder Beitrag entweder auf der linken oder rechten Seite der Timeline erscheint. Es eignet sich besonders gut, wenn Du Deine Inhalte in einer historischen Reihenfolge präsentieren möchtest oder wenn Du einen narrativen Fluss in der Darstellung Deiner Beiträge erzeugen willst.

Der Code:

<?php
/*
YARPP Template: Timeline Layout Template
Description: Ein benutzerdefiniertes YARPP-Template mit einem Timeline-Design.
Author: Dein Name
*/
?>

<style>
.related-posts-title {
    color: #000000;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #ddd;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #ff9f55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

.left {
    left: 0;
}

.right {
    left: 50%;
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

.timeline-item:hover .content {
    background-color: #f1f1f1;
}

.related-post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.related-post-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.related-post-title a {
    text-decoration: none;
    color: inherit;
}

.related-post-title a:hover {
    text-decoration: underline;
}

.related-post-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item::before {
        left: 60px;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .right::before {
        right: 60px;
        left: auto;
    }

    .left, .right {
        left: 0;
    }
}
</style>

<div class="related-posts-title">Related Posts</div>
<div class="timeline">
    <?php if (have_posts()): ?>
        <?php $count = 0; ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="timeline-item <?php echo $count % 2 == 0 ? 'left' : 'right'; ?>">
                <div class="content">
                    <div class="related-post-thumbnail">
                        <a href="<?php the_permalink(); ?>">
                            <?php if (has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('medium'); ?>
                            <?php endif; ?>
                        </a>
                    </div>
                    <div class="related-post-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </div>
                    <div class="related-post-date">
                        <?php the_time('F j, Y'); ?>
                    </div>
                </div>
            </div>
            <?php $count++; ?>
        <?php endwhile; ?>
    <?php else: ?>
        <p><?php _e('No related posts found.', 'yarpp'); ?></p>
    <?php endif; ?>
</div>

Und so sieht’s aus:

Kurze Zusammenfassung der YARPP Custom Templates

Hier ist ein Überblick über die 10 YARPP-Custom-Templates, die Du nutzen kannst, um Deine verwandten Beiträge auf eine einzigartige und ansprechende Weise zu präsentieren:

1. Accordion Layout Template:
   • Vorteil: Platzsparend und übersichtlich. Ideal für Seiten mit vielen verwandten Beiträgen.
2. Flip Card Template:
   • Vorteil: Interaktives und visuell ansprechendes Design, das Deine Beiträge auf spielerische Weise darstellt.
3. Grid Hover Template:
   • Vorteil: Modernes und stilvolles Rasterlayout mit einem Hover-Effekt, das Deine Inhalte dynamisch hervorhebt.
4. Magazine Layout Template:
   • Vorteil: Klassisches und professionelles Design, das sich perfekt für Blogs und Magazin-Seiten eignet.
5. Masonry Layout Template:
   • Vorteil: Kreative und dynamische Darstellung, die den verfügbaren Platz optimal nutzt.
6. Polaroid Gallery Template:
   • Vorteil: Nostalgischer und persönlicher Stil, der Deine Beiträge wie Polaroid-Fotos aussehen lässt.
7. Rotating Cube Template:
   • Vorteil: Einzigartiges, sich drehendes Würfel-Design, das die Aufmerksamkeit Deiner Besucher auf sich zieht.
8. Slider Layout Template:
   • Vorteil: Dynamischer Slider, der Deine Beiträge elegant und platzsparend präsentiert.
9. Tabbed Layout Template:
   • Vorteil: Kompakte und organisierte Darstellung, bei der Besucher bequem durch verschiedene Inhalte klicken können.
10. Timeline Layout Template:
    • Vorteil: Attraktive und chronologische Darstellung Deiner Inhalte, ideal für Storytelling.

So passt Du die Designs an

Nachdem Du eines der Templates ausgewählt hast, kannst Du es ganz einfach an Dein individuelles Design anpassen. Hier sind einige Tipps, wie Du die Anpassungen vornehmen kannst:

1. Farben ändern:
   • Du kannst die Farben im CSS-Code anpassen, um sicherzustellen, dass das Template zu Deinem Marken- oder Website-Design passt. Suche nach CSS-Eigenschaften wie color, background-color und border-color und ändere die Hex-Codes in Deine Wunschfarben.
2. Schriftarten ändern:
   • Wenn Du eine andere Schriftart verwenden möchtest, kannst Du dies im CSS-Code anpassen, indem Du die font-family-Eigenschaften änderst. Du kannst auch Google Fonts oder andere Web-Schriftarten integrieren.
3. Größen und Abstände anpassen:
   • Möchtest Du die Größe von Bildern, Texten oder Abständen ändern? Passe die width, height, padding, margin und font-size Werte im CSS-Code an, um die perfekte Balance für Dein Layout zu finden.
4. JavaScript-Funktionalitäten erweitern:
   • Falls Du die interaktiven Elemente eines Templates wie Slider, Accordion oder Tabs weiter anpassen möchtest, kannst Du den JavaScript-Code modifizieren. Du kannst beispielsweise die Animationsgeschwindigkeit ändern oder neue Animationseffekte hinzufügen.
5. Elemente hinzufügen oder entfernen:
   • Fühle Dich frei, Elemente wie Thumbnails, Titel oder Datum hinzuzufügen oder zu entfernen, je nachdem, welche Informationen für Deine Besucher am wichtigsten sind. Dies kannst Du durch Anpassungen im HTML- und PHP-Code des Templates erreichen.
6. Layout-Struktur ändern:
   • Möchtest Du die Anordnung der Elemente ändern? Du kannst dies tun, indem Du die HTML-Struktur anpasst und CSS-Eigenschaften wie flexbox oder grid verwendest, um ein völlig individuelles Layout zu erstellen.

Mit diesen Anpassungen kannst Du sicherstellen, dass das gewählte Template perfekt zu Deiner Website passt und Deinen Besuchern ein einzigartiges Erlebnis bietet.

So bringst Du Deine YARPP-Custom-Templates zum Laufen

Damit Deine YARPP-Custom-Templates auf Deiner WordPress-Website funktionieren, musst Du einige einfache Schritte befolgen. Hier ist eine detaillierte Anleitung, wie Du die Templates integrieren und aktivieren kannst:

Schritt 1: YARPP installieren und aktivieren

Falls Du das Plugin „Yet Another Related Posts Plugin“ (YARPP) noch nicht installiert hast, musst Du dies zuerst tun:

1. Installiere YARPP:
   • Gehe in Deinem WordPress-Dashboard zu „Plugins“ > „Installieren“.
   • Suche nach „Yet Another Related Posts Plugin“.
   • Klicke auf „Jetzt installieren“ und anschließend auf „Aktivieren“.

Schritt 2: Template-Dateien im Theme-Verzeichnis speichern

Deine Custom-Templates müssen im Verzeichnis des aktiven Themes gespeichert werden:

1. Speichere das Template:
   • Öffne einen Texteditor (wie Notepad++ oder Visual Studio Code).
   • Kopiere den Code des gewünschten Templates und füge ihn in den Texteditor ein.
   • Speichere die Datei mit einem eindeutigen Namen ab (z. B. yarpp-template-accordion.php).
2. Lade das Template hoch:
   • Verbinde Dich mit Deinem Webserver über FTP ( z.B. Filezilla) oder verwende den Datei-Manager Deines Hosting-Providers.
   • Navigiere zu dem Verzeichnis /wp-content/themes/dein-aktuelles-theme/.
   • Lade die gespeicherte PHP-Datei direkt in dieses Verzeichnis hoch.

Schritt 3: Template in YARPP aktivieren

Nachdem das Template hochgeladen wurde, musst Du es im YARPP-Plugin aktivieren:

1. Gehe zu den YARPP-Einstellungen:
   • Im WordPress-Dashboard navigiere zu „Einstellungen“ > „YARPP“.
2. Wähle Dein Template aus:
   • Scrolle nach unten zu „Template File“.
   • Wähle in der Dropdown-Liste Dein hochgeladenes Template (z. B. „yarpp-template-accordion.php“) aus.
3. Speichere die Änderungen:
   • Klicke auf „Änderungen speichern“, um das Template zu aktivieren.

Schritt 4: Teste das Template

Jetzt solltest Du überprüfen, ob das Template wie gewünscht funktioniert:

1. Überprüfe Deine Beiträge:
   • Besuche eine Seite oder einen Beitrag auf Deiner Website, wo verwandte Beiträge angezeigt werden.
   • Prüfe, ob die verwandten Beiträge im neuen Layout dargestellt werden.
2. Fehlerbehebung:
   • Falls das Template nicht korrekt angezeigt wird, überprüfe den hochgeladenen Code auf Fehler oder Inkompatibilitäten.
   • Achte darauf, dass alle Pfade zu Dateien (wie CSS- oder JS-Dateien) korrekt sind.

Schritt 5: Anpassungen vornehmen

Falls Du das Layout weiter anpassen möchtest:

1. Passe den Code an:
   • Gehe zurück in Deinen Texteditor, um den PHP-, HTML-, CSS- oder JavaScript-Code des Templates nach Bedarf zu modifizieren.
2. Lade die geänderte Datei erneut hoch:
   • Lade die Datei nach den Anpassungen wieder in das Verzeichnis Deines aktiven Themes hoch, um die Änderungen zu übernehmen.
3. Überprüfe erneut:
   • Besuche Deine Website und stelle sicher, dass die Anpassungen wie gewünscht umgesetzt wurden.

Schritt 6: Erweitere die Funktionalität (optional)

Wenn Du die Funktionalität der Templates erweitern möchtest:

1. Weitere CSS- und JS-Dateien einbinden:
   • Falls Dein Template zusätzliche Styles oder Skripte benötigt, kannst Du diese im Header oder Footer Deines Templates einbinden.
2. Neue Features integrieren:
   • Du kannst zusätzliche Features wie Lazy Loading, Filter-Optionen oder Animationen hinzufügen, indem Du entsprechenden JavaScript- oder CSS-Code in das Template integrierst.

Fazit

Mit diesen Schritten hast Du Deine YARPP-Custom-Templates erfolgreich integriert und aktiviert. Du kannst Deine Website jetzt mit individuellen Layouts für verwandte Beiträge aufwerten, die perfekt zu Deinem Design passen und Deinen Besuchern ein optimales Nutzererlebnis bieten. Passe die Templates nach Bedarf weiter an, um Deine Website noch einzigartiger zu machen!