≡ Menu

WordPress Eklentisiz Sabit Sidebar Yapımı (Fixed Widget)

Eklenti kullanmayı sevemediğim için bloğuma uygulamak istediğim özellikleri kendim kodlayarak yapmaya çalışıyorum ve bunları sizlerle paylaşıyorum. Yakın zamanda sidebar’da sabit bir reklam kullanmak isteyince araştırmaya başladım. Bırakın yerli kaynağı, yabancı kaynak bile bulamıyordum neredeyse. Sanırım benden başka kimse sabit bir reklamlar için eklenti yüklemekten çekinmemiş.

Sabit Sidebar Yapımı

İki satır CSS’den oluşan her şekilde tarayıcının en üstünde kalan dandik bir sabit div olmayacak.

Sidebar div içerisinde sabit kalan widget yapımına başlayalım.

Sitenizin <head> etiketinin hemen altına ekleyin.

<script>$(document).ready(function () {  
var top = $('.krm-sabit').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) { $('.krm-sabit').addClass('sabit');} 
else { $('.krm-sabit').removeClass('sabit');}
$('.krm-sabit').width($('.krm-sabit').parent().width());});});
</script>

Burayı en sona bırakın. <head> etiketinin hemen altına eğer çalışmazsa ekleyin.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Hangi kütüphaneyi kullandığınızı bilmiyorum, belki gerek yoktur diye çalışmazsa ekleyin dedim. Gereksiz yük yaratmayalım.

CSS dosyanıza ekleyin.

.sabit {
position:fixed;
top:0;
z-index:99999;}

Sabit kalmasını istediğiniz widget veya sidebarın tamamına uygulayabilirsiniz. Yapmanız gereken tek şey sabit kalmasını istediğiniz div’e krm-sabit class tanımı yapmaktır.

Uygulamakta sorun yaşarsanız bana ulaşın, sizi yönlendiririm.

Yazar Hakkında: Çalışıyor, geziyor, okuyor, öğreniyor ama en çok; içerik odaklı SEO çalışmalarıyla ilgileniyor! Bu yüzdendir ki; bu blogda bu konuların ne işi var demeyin! O konular bir fikre hayat veriyor.


{ 6 comments… add one }
  • İdo 25 Ağustos 2018, 21:34

    Hocam öncelikle eklenti kullanmadan yapabiliyor olmak hoşuma gitti. Yaptığı tek işlem reklamı sabit tutmak sonuçta. Bu yüzden eklenti kullanmak gerçekten gereksizdi. Adım adım uyguladım işe yaradı.

    • Kerem SARI 25 Ağustos 2018, 21:34

      İşinize yaradığına sevindim.

  • Anonim 10 Ekim 2018, 16:50

    Bu olay yüzünden başım zamanında çok ağrımıştı ancak çok basit ve js’ye ihtiyaç duymadan bir çözüm yolu üretildiğini fark ettim.

    Kaydırdığımızda sabit kalmasını istediğimiz kapsayıcı dive position:sticky; eklememiz yeterlidir. Kaydırdıktan sonra üstünde boşluk kalsın derseniz top:30px; kodunu da ekleyebilirsiniz. Değeri kendinize göre ayarlayın.

    Position:Sitcky;

    • Kerem SARI 25 Aralık 2018, 18:20

      Bilgi için çok teşekkürler. Bahsettiğiniz yöntemle sabitleme işlemi yapılabilir fakat temaya uygun hale getirmek isterseniz daha fazlasına ihtiyacınız olacak.

  • Delines 4 Haziran 2019, 03:50

    Bende böyle bir şey arıyordum. Her ihtiyaca bir eklenti fazla oluyor. Çok teşekkür ederim.

    • Kerem SARI 4 Haziran 2019, 04:28

      Rica ederim, işinize yaradığına sevindim.

Leave a Comment