WordPress için geliştirilen birçok slider (manşet) eklentisi mevcut. Ancak ben uzun senelerdir hiç eklenti kullanmamaya alıştım ve manuel çözüm üretmek konusunda daha da bilgi sahibi oldum. Sizlere de tavsiye ederim. Gelelim, konumuza... Siteniz için slider eklentisi arıyorsanız, buna gerek yok.

Sadece JavaScript & HTML & CSS kullanarak sağlıklı ve Responsive çalışan bir slider yapabilmek mümkündür. Aşağıdaki kodları, temanızdaki örneğin index.php dosyası içerisine eklemeniz yeterli olacaktır. Ancak kırmızı alanları kendinize göre güncellemeyi unutmayınız.

AYRICA: WordPress’te İlk Görsele Yazı Bağlantısı Verelim

WordPress'te Eklentisiz JavaScript ile Slider Yapalım

<style>
.w3-display-container{margin-bottom:30px!important;}
.mySlides {display:none;}
.w3-button2{color:#fff!important;box-sizing:border-box;background: #333 url(https://www.teknobeyin.com/wp-content/themes/astra/manset/slider-ileri.png) center center no-repeat!important;font-size:25px;font-weight:normal;line-height:1.8em;padding:10px;height:48px;margin-top:2px;text-decoration:none;text-align:center;cursor:pointer;}
</style>
<div class="w3-content w3-display-container">
<a href="baglanti"><img class="mySlides" src="gorsel"></a>
<a href="baglanti"><img class="mySlides" src="gorsel"></a>
<a href="baglanti"><img class="mySlides" src="gorsel"></a>
<a href="baglanti"><img class="mySlides" src="gorsel"></a>
<a href="baglanti"><img class="mySlides" src="gorsel"></a>
<div class="w3-button2" onclick="plusDivs(1)"></div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>


Örnek Görünüm

Not: Temanız Responsive uyumlu ise, slider da Responsive çalışacaktır.