Jak vypisovat podobné články už jsem jednou psal zde, ale nyní ukážeme efektnější verzi, která bude využívat javascript, respektive jeho framework jQuery. Pod článkem se zobrazí pouze jeden obrázek s odkazem a ten bude přecházet do dalších. Kolik už záleží na vás.

Výsledek pak vypadá nějak takto:

A teď, co je k tomu třeba udělat. Předně do souboru šablony functions.php vložit následující kód. Ten obsahuje jak php funkci pro vypisování, tak css styl i javascript kód vykonávající animaci.

<?php

function relatedSlide($ID, $pocet) {
    $posttags = get_the_tags($ID);
    if ($posttags) {
        foreach ($posttags as $posttag) {
            $tags[] = $posttag->term_id;
        }
    }
    $not = array($ID);
    $loop = 0;
    $my_query3 = new WP_Query(array('tag__in' => $tags, 'posts_per_page' => $pocet, 'orderby' => 'rand', 'post__not_in' => $not));
    if ($my_query3->have_posts()) {
        echo "<div id='relat'>";
        while ($my_query3->have_posts()) {
            $my_query3->the_post();
            echo "<div class='podobny podobny" . $loop . "'>";
            echo "<h4><a href='" . get_permalink() . "'>" . get_the_title() . "</a></h4>";
            ?>
            <a href='<?php the_permalink(); ?>'>
            <?php if (has_post_thumbnail()) the_post_thumbnail(array(250, 300), array('class' => 'alignleft')); ?>
            </a>
            <p><?php the_excerpt() ?></p>
            <?php
            echo "</div>";
            $loop++;
        }
        echo "<div style='clear: both'></div>";
        echo "</div>";
        ?>
        <style>
            #relat {padding: 20px 0; margin: 0 auto; position: relative; min-height: 240px}
            .podobny {display: none}
            .podobny0 {display: block}
            .podobny h4 {position: absolute; background: white; padding: 5px; opacity: 0.9; width: 240px}
            #relat p {padding: 0; margin: 0; position: relative;z-index: 2; width: 270px; float: right}
            #relat a {position: relative; z-index: 10}
        </style>
        <script>

            function flash(){
                jQuery('#relat .podobny:visible').fadeOut(1000, function(){
                    jQuery('#relat .podobny'+i).fadeIn(1000);
                });
                i++;
                if(i==slidu) i = 0;
            }

            jQuery(document).ready(function($){
                slidu = jQuery('#relat .podobny').size();
                i = 1;
                slide = setInterval("flash()", 4000);
            })
        </script>
        <?php
    }
    wp_reset_postdata();
}

wp_enqueue_script('jquery');
?>

Nyní si nalezněte vhodné místo v šabloně (obvykle se nalézá někde v souboru single.php)  a vložte toto:

relatedSlide($post->ID, 10);

Druhý parametr (10) znamená, kolik článků se vypíše.