Related Posts eklentisi resimli ve benzer yazılar eklentisidir.

indirmek için, buraya tıklayarak indirebilirsiniz.

Kod ile yapmak isterseniz eğer ki;

WordPress Resimli Benzer Yazılar – 1 ( Standart )

Görünümüz > Editor > Tekil Yazı ( Single.php) bölümüne giriyoruz.



kodunu buluyoruz ve altına aşağıdaki kodları hemen altına yapıştırıyoruz.


WordPress Resimli Benzer Yazılar – 1 ( Standart )

Görünümüz > Editor > Tekil Yazı ( Single.php) bölümüne giriyoruz.

<?php the_content(); ?>

kodunu buluyoruz ve altına aşağıdaki kodları hemen altına yapıştırıyoruz.

<!-- Benzer Yazılar -->
<div id="Yazılar">
<h2 id="Yazılar">Resimli Benzer Yazılar</h2>
<ul>
<?php
$args = array( 'numberposts' => 3, 'order'=> 'desc', 'orderby' => 'rand' );
$merakliyazar = get_posts( $args );
foreach ($merakliyazar as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>" />
<p>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(135,120), array('class' => 'b_resim')); } else { ?>
<img src="<?php echo bloginfo("template_url"); ?>/img/merakliyazar.png" alt="<?php the_title(); ?>" title="<?php the_title('10'); ?>" width="140px" height="140px" />
<?php } ?>
</p>
<span>
<?php the_title(); ?>
</span>
</a>
</li>
<?php endforeach; wp_reset_query(); ?>
</ul>
</div>
</div>

Daha sonra aşağıdaki kodları Görünüm > Editor > Style.css dosyamızın içine atıyoruz.

/* MeraklıYazar Benzer Yazılar */
#MerakliYazilar {padding: 5px; margin-bottom: 5px;}
#MerakliBaslik {background: orange; color: #000; text-shadow: 1px 1px #ccc; padding: 5px 10px; font-weight: normal;
background: orange(206,220,231); /* Old browsers */
background: orangetop, rgba(206,220,231,1) 0%, rgba(133,162,173,1) 100%); /* FF3.6+ */
background: orange(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(133,162,173,1))); /* Chrome,Safari4+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#85a2ad',GradientType=0 ); /* IE6-9 */
overflow: auto; margin-bottom: 5px; border: 1px solid #000; font-size: 17px;text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;}
#MerakliYazilar ul {margin-left: -14px;overflow: auto;}
#MerakliYazilar ul li {border: 2px solid orange;height: 200px;display: block; padding: 3px 5px; width: 145px; float: left; margin-right: 4px;border-radius: 5px;}
#MerakliYazilar ul li a{width: 140px;font-size: 10px;color: #000; display: block;text-align:center;}
#MerakliYazilar ul li a img{width: 140px; height: 120px;}

Yukardaki merakliyazar.png şeklide gösterilen yeri kendi resim dosyası linkinizle değiştirebilirsiniz böylece resmi olmayan yazılarda o resim çıkacaktır.

Evet bu sona erdi bu şekilde yaptığımızda karşımıza aşağıdaki gibi bir görüntü çıkıyor.



Takıldıgınız konular olursa konu altından yardımcı olmaya çalışacağım size.