WordPress Resimli Benzer Yazılar

 Merhaba arkadaşlar bugün sizlere yine başka hiç bir yerde olmayan mükemmel bir paylaşım sunacağım. Bunun için bir çok kişi eklenti kullanıyor ancak eklentiler wordpress sistemimizi aşırı şekilde yoruyor ve size istediğini tasarımı yapma izni vermiyor. Böylece eklenti ne şekilde uygun gördüyse o şekilde kullanmaya mahkum kalıyor. Bu bir çok kişi için sorun olabiliyor çünkü daha önemlisi bazı kişilerin temasına uyumluluk bile göstermiyor. Bende bu nedenle size yardımcı olmak amacıyla WordPress Resimli Benzer Yazılar ( Eklentisiz ) konusunu açtım.  

WordPress Resimli Benzer Yazılar – 1 ( Standart )

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

?

1	<?php the_content(); ?>

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<!-- MerakliYazar Benzer Yazılar --> <div id="MerakliYazilar"> <h2 id="MerakliBaslik">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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* 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.

WordPress Resimli Benzer Yazılar – 1 ( Tasarımlı )

Yukarıda yaptığınız benzer yazılarda klasik bir görüntü ortaya çıkmış olabilir. Ancak bunu daha güzel bir hale getirmek mümkündür. Yani istediğiniz resim dosyaları ile görsel yönden çok daha zengin bir yapı sağlamak sitemiz açısından daha iyi olacaktır.

Bunun için single.php dosyamıza dokunmuyoruz. Sadece style.css içinde düzenleme yapacağız.

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 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: white url(Başlık kutusu linki) no-repeat 50% 0%;} 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: 3px 15px; overflow: auto; } #MerakliYazilar ul li {border: 2px solid white;height: 205px;display: block; padding: 3px 5px; width: 150px; float: left; border-radius: 5px; margin-right: 5px; border: 10px; background: url(kutu linki) } #MerakliYazilar ul li a{width: 150px;font-size: 10px;color: #000; display: block;text-align:center;} #MerakliYazilar ul li a img{width: 140px; height: 120px;}

Verdiğim bölgelerdeki Başlık kutusu linkine 540×35 boyutunda bir başlık kutusu resmi ayarlıyoruz ve ftp’imze atıp başlık kutusu linki yazan yere yapıştırıyoruz.

Daha sonra kutu linki diye yazdığımı yere ise 161×212 boyutunda şeffaf bir kutu yapıyoruz ve aynı şekilde kutu linki yerine yapıştırıyoruz.

Bu şekilde yaptığımızda karşımıza bu tarz bir görüntü çıkacaktır. Ben böyle tasarladım.