Bir önceki yazımı paylaşmış olduğum WmAraci.com’da bir “mobdizayn” isimli arkadaşımızın isteği doğrultusunda bu konuyu yazıyorum. Öne çıkan yazı demekteki amacım en çok okunduğu için falan değil. Kendi seçimimiz ile olacak olan bir alan yapımıdır. Benim sitemde menü’nün alt tarafında 3 tane yazı var, işte bahsedeceğim olayı yaparak bu şekilde bir yer üreteceğiz.
Önceki yazımızda olduğu gibi bu yazımızda da özel alan mantığını kullanarak yazılarımızı listeleteceğiz ve belirlediğimiz özel alanı eklediğimiz takdirde yazının “Thumbnail”i yani “Öne çıkan görsel”i alanımızda yer alacak. Hiç vakit kaybetmeden kodlarımızı yazalım ve alanımızı oluşturalım.
HTML / CSS yapımızı oluşturalım
İlk olarak şeklinin nasıl olabileceğine karar veriyoruz ve ona uygun kodlama yapıyoruz. Ben kendi sitemde kullandığım kod yapısına uygun şekilde burada yer vereceğim.
Bu arada bundan sonra Syntax kullanmak yerine JSFiddle kullanma kararı aldım. Hem daha estetik hemde kullanımı kolay :)
/* Öne Çıkan */
#onecikan {margin-left: -15px; overflow: auto; margin-top: 10px;}
#onecikan li{cursor: pointer; float: left; padding: 5px; overflow: auto; border: 1px solid #fff; width: 270px; margin-left: 30px;}
#onecikan li a img{float: left; border: 2px solid #ddd; padding: 5px; width: 90px; height: 90px; margin-right: 10px;}
#onecikan li a hgroup h2{width: 150px; font-size: 17px; float: right; color: #003A63; font-family: Tahoma; font-weight: bold;}
#onecikan li:hover {background-color: #FEFFF2; border: 1px solid #ddd;}
#onecikan li:hover a hgroup h2{color: #000;}Evet HTML kodlarımızı ve görünümüz bu kadar, siz bunu istediğiniz şekilde düzenleyebilirsiniz. Şimdi gelelim bunun wordpress entegresine.
WordPress Entegresi
Dünkü “Slider Yapımı” konumda bahsettiğim özel alan mantığını aynı şekilde burada da kullanıyoruz. Yani kısacası
have_posts()) : $erenkeskin -> the_post(); ?>
/img/ONE-CIKARILAN-GORSEL-YOKSA.png" alt="" title="" width="146px" height="146px" />
WordPress’e entegreside bu şekilde. Kodlarımızın açıklamaları:
Eğer yazı var ise
ve Bu yazıda seçili OZELALANADI var ise o özel alana sahip 3 yazıyı bir döngü içerisinde göster.
have_posts()) : $erenkeskin -> the_post(); ?>Yazının URL’si
Yazının Thumbnail’ini göstermek için
/img/ONE-CIKARILAN-GORSEL-YOKSA.png" alt="" title="" width="146px" height="146px" />
Yazı Başlığımız
WordPress Eklentisiz Öne Çıkan Yazılar Yapımı bu kadar arkadaşlar. Artık sizde başka bloglarda gördüğünüz bu olayı gerçekleştirebilirisiniz. İyi bloglamalar.
Kaynak: http://erenkeskin.com/wordpress-eklentisiz-one-cikan-yazilar-yapimi/
