WordPress Son Dakika Haber Slide

İlk olarak Haberci temasında kullandığım ve kodlarını DynamicDrive‘ın sayfasından aldığım ve üzerinde css ile güzel bir tasarım yaptığım uygulamayı tanıtacağım.

WordPress Son Dakika Haber Slider, blogunuzda yer alan makalelerin başlıklarını ve yazılma tarihlerini ajax sistemi ile rss’nizden çekerek son dakika şeklinde gösterilmesini sağlar. Haber sitelerinde genelde görmüşsünüzdür.

Bunun için öncelikle Google Api key sayfasından blogunuz için bir api key elde edin. Google size bir kod verevektir. Bu kodu şimdilik saklayın.

Daha sonra son-dakika.rar dosyasını indirin. İçinde;

• gajaxscroller.js,

• gfeedfetcher.js,

• images,

dosya ve klasörleri bulunmaktadır. Bunlardan, gajaxscroller.js ve gfeedfetcher.js dosyalarını kullandığınız tema klasörüne yükleyin. İmages klasörünün içinde bulunan resimleri ise yine kullandığınız temanın images klasörüne yükleyin. Unutmayın sadece içindeki resimleri klasörü değil.

Temanızın header.php dosyasını bir metin editörü yardımcısı ile açalım. (Notepad++ gibi). </head> tagını bulalım ve hemen üstüne aşağıdaki kodu yapıştıralım.

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=SENİN-APİ-KEY“></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/gfeedfetcher.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/gajaxscroller.js”>

Evet, Google’dan aldığımız ve size saklayın dediğim api keyimizi SENİN-APİ-KEY yazdığım bölüme ekleyin. Header.php dosyamızı kayıt edip kapatalım.

Şimdi geldi css dosyamızı oluşturmaya. Kullandığınız temanın style.css dosyasını açalım. Aşağıda vereceğim css kodlarını style.css dosyanızın en altına yapıştırın ve kayıt edip kapatalım.

.titlefield{
text-decoration: none;
}
.labelfield{
color:brown;
font-size: 90%;
}
.datefield{
color:gray;
font-size: 90%;
}
#example1{
width: 350px;
height: 16px;
padding: 6px;
}
.code{
color: red;
}
.son-dk {
width: 468px;
height: 30px;
background: url(images/son-dk.png) no-repeat;
}
.son-haber {
margin-left: 110px;
}
.son-haber a{
color: #000;
font-weight: bold;
}
.son-haber a:hover{
color: #c0c0c0;
}

Son olarak son dakika haberlerini göstermek istediğimiz dosyayı açalım. Ben css düzenlemesi olarak index.php üzerinde çalıştım. Sizde temanızın index.php dosyasını açın ve şu kodu bulun.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Hemen üstüne aşağıdaki kodları yapıştırın ve kayıt edip kapatın.

<div class=”son-dk”>
<div class=”son-haber”>
<script type=”text/javascript”>
var cssfeed=new gfeedpausescroller(“example1″, “example1class”, 2000, “_new”)
cssfeed.addFeed(“CSS Drive”, “http://www.emrahca.com/feed”) //Specify “label” plus URL to RSS feed
cssfeed.displayoptions(“date”) //show the specified additional fields
cssfeed.setentrycontainer(“div”) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, “date”) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div>

WordPress Son Dakika Haber Slide İndir

Tüm işlem yaptığınız dosyaları ftp ile sunucuya gönderin. Ve ana sayfaya gidin bakalım bu güzel uygulamayı görebilecek misiniz? İyi eğlenceler.