WordPress altyapısına sahip olan web siteniz için farklı özellikler uygulayarak, ziyaretçilerinizin daha çok ilgisini çekebilmeniz mümkün. Örneğin bu yönde, web sitenize "kayan yazılar" alanı eklemeyi düşünebilirsiniz. WordPress için geliştirilmiş olan kayan yazılar ile ilgili olarak eklentiler mevcut. Ancak, bu işlemi eklentisiz (manuel) olarak da yapabilmek mümkün. Kaldı ki zaten, eklentiler daha çok CPU kullanımını beraberinde getirdiği için, bu tip işlemleri eklentisiz olarak yapmak daha sağlıklı bir tercih olacaktır. Sonuç olarak da, bu içeriğimiz sayesinde WordPress'te kullanabileceğimiz kayan yazılar özelliğini inceliyor olacağız. Hemen ilgili kodlara göz atalım.

AYRICA: WordPress’te Rastgele Sözler Gösterme Nasıl Yapılır?

WordPress için Kayan Yazı Kodu

Temanızın style.css dosyası içerisine aşağıdaki kodları ekleyin.

.kayanyazilar {
margin: 15px 0 5px 0px;
background: #fff;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
height: 30px;
padding-bottom: 5px;
font-size: 13px;
border:1px solid #ccc;
}
.kayanyazilar ul {
margin: 0;
list-style: none;
padding: 0 0px 0px 0;
}
.kayanyazilar li {
line-height: 18px;
display: inline;
margin: 0 0px 0 15px;
}
.kayanyazilar ul li:before {
content: url(kayanyazi-ikonu.png);
}
.kayanyazilar ul li a:hover{
color: #000;
}

Temanızın header.php veya dilediğiniz bir dosyası içerisine aşağıdaki kodları ekleyin.

<div class="kayanyazilar">
<ul>
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5">
<b>Bu yazılarımızı okudunuz mu?</b>
<li><a href="#">Örnek Kayan Yazı Başlığı 1</a></li>
<li><a href="#">Örnek Kayan Yazı Başlığı 2</a></li>
<li><a href="#">Örnek Kayan Yazı Başlığı 3</a></li>
<li><a href="#">Örnek Kayan Yazı Başlığı 4</a></li>
<li><a href="#">Örnek Kayan Yazı Başlığı 5</a></li>
</marquee>
</ul>
</div>

Bilgi: Yukarıda yer alan kırmızı alanları kendinize göre değiştirebilirsiniz.

Not: Kayan yazı ikonu olarak ise aşağıdaki görseli kullanabilirsiniz.

Sonuç: Yukarıda yer alan kodlar sayesinde, oldukça şık bir kayan yazılar bölümü elde edebilirsiniz. İlgili kodların otomatik olarak çalışmadığını lütfen unutmayın. Yani manuel düzenleme yapmalısınız.