Geçtiğimiz içeriklerimizde Teknobeyin'de yer alan "Önerilen Bağlantılar" ve "Yazar Köşesi" adlı eklentilerin nasıl yapıldığını, tüm kodları ile birlikte sizlerle paylaşmıştık. Şimdi ise tamamen otomatik çalışan, numaralı olarak son yazıları listeleyen ve renk geçişleri ile oldukça profesyonel bir görünüm sunan "Son Yazılar" eklentisini sizlerle paylaşmak istiyoruz sevgili arkadaşlar.

İlgili eklenti WordPress için geliştirilmiş olup, aşağıdaki adımları uygulayarak, siz de sitenizde tamamen Teknobeyin'deki gibi Responsive olan son yazılar eklentisini sorunsuz olarak kullanmaya başlayabilirsiniz.

Teknobeyin'deki "Son Yazılar" Nasıl Yapılır?

1) Temanızın sidebar.php dosyasına aşağıdaki kodları ekleyiniz.

<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts">
<?php
$args = array( 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a> </li> ';
}
wp_reset_query();
?>
</ul>
</div>

2) Temanızın style.css dosyasına ise aşağıdaki kodları ekleyiniz.

#recent-wrapper{margin-bottom:40px;display:block;position:relative;font-size:18px}#recent-wrapper ul{margin:0;padding:0;list-style-type:none}#recent-wrapper ul li{margin:0;position:relative;padding:20px 20px 20px 20px!important}#recent-wrapper ul li:first-child{background:#b42924;margin-bottom:2px}#recent-wrapper ul li:first-child+li{background:#bb3e39;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li{background:#c3534f;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li{background:#ca6965;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li+li{background:#d27e7b;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li+li+li{background:#848484;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li+li+li+li{background:#707070;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li{background:#5b5b5b;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li+li{background:#474747;margin-bottom:2px}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li+li+li{background:#333}#recent-wrapper ul li a{color:#fff;line-height:1.8em;text-decoration:none}@media screen and (max-width:300px){ul#recent-posts li a{word-break:break-all!important}}@media screen and (max-width:200px){#recent-wrapper ul li{display:block!important}ul#recent-posts li a{display:block!important;word-break:normal!important}#recent-wrapper ul li:before{border-right:0!important;border-bottom:2px solid #fff!important;text-align:center!important;display:block!important;width:100%!important;box-sizing:border-box!important}}ul#recent-posts li{width:100%!important}#recent-wrapper{box-sizing:border-box!important;display:block!important}ul#recent-posts li a{padding:20px!important;vertical-align:middle;display:table-cell}#recent-wrapper ul li{padding:0!important;display:block!important;width:100%!important;counter-increment:my-awesome-counter}#recent-posts ul{list-style:none;counter-reset:my-awesome-counter;margin:0;padding:0}#recent-wrapper ul li:first-child+li+li+li+li+li{background-color:#333333!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li{background-color:#474747!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li{background-color:#5B5B5B!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li+li{background-color:#707070!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li+li+li{background-color:#848484!important}#recent-wrapper ul li:first-child:before{background-color:#333}#recent-wrapper ul li:first-child+li:before{background-color:#474747!important}#recent-wrapper ul li:first-child+li+li:before{background-color:#5B5B5B!important}#recent-wrapper ul li:first-child+li+li+li:before{background-color:#707070!important}#recent-wrapper ul li:first-child+li+li+li+li:before{background-color:#848484!important}#recent-wrapper ul li:first-child+li+li+li+li+li:before{background-color:#B42924!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li:before{background-color:#BB3E39!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li:before{background-color:#C3534F!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li+li:before{background-color:#CA6965!important}#recent-wrapper ul li:first-child+li+li+li+li+li+li+li+li+li:before{content:"" counter(my-awesome-counter)""!important;background-color:#D27E7B!important}#recent-wrapper ul li:before{content:"0" counter(my-awesome-counter);font-weight:400;padding:20px;line-height:1.8em;font-size:25px;border-right:2px solid #fff;width:1%;margin-right:0;color:#fff;vertical-align:middle;display:table-cell}ul#recent-posts:before{content:'Son Yazılar';display:block;padding-left:20px;padding-right:20px;padding-top:15px;padding-bottom:15px;width:100%;line-height:1.8em;text-align:center;font-weight:700;font-size:25px;box-sizing:border-box;border-bottom:2px solid #fff;background-color:#b75c60;color:#fff;border-top:2px solid #8a4155}

Örnek Görünüm