• Birinci navigasyona geç
  • Skip to main content
  • Birinci sidebar'a geç

Kerem SARI

Kişisel Blog - Webmaster

  • Webmaster
    • Genel
    • WordPress
    • Digitalocean
    • Genesis
  • Diğer
    • Farklı Konular
    • Kişisel
  • Araçlar
    • Abonelik
    • Arşiv
    • Son Yorumlar
  • İletişim

Bir bloğun olsun ister misin? İletişim

Ana Sayfa / Wordpress / WordPress Eklentisiz Sabit Sidebar Yapımı (Fixed Widget) AMP Sayfalar!

WordPress Eklentisiz Sabit Sidebar Yapımı (Fixed Widget) AMP Sayfalar!

21 Ağustos 2018 - Kerem SARI - 6 Yorum

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.

Güncelleme: 11.15.2020

Ufak bir css tanımıyla çok basit bir şekilde sabit alanlar oluşturabiliriz. AMP sayfalar için de geçerlidir. Sidebar da bulunan sabit widget inizin hangi genişliğe kadar aktif kalmasını min-width değeriyle tanımlayabilirsiniz.

@media only screen and (min-width: 960px) { 

	.content-sidebar-wrap { 
		display: -webkit-box; display: -ms-flexbox; 
		display: flex; 
		-webkit-box-pack: justify; 
		-ms-flex-pack: justify; 
		justify-content: space-between; 
	} 

	.sidebar-primary, .sidebar-secondary { 
		position: -webkit-sticky; position: sticky; 
		height: 100%; top: 106px; 
		margin-bottom: 0px; 
	} 

	.admin-bar .sidebar-primary, .admin-bar .sidebar-secondary { 
		top: 118px; 
	} 
}

AMP sayfalar kullanıyorsanız hiçbir eklenti sabit sidebar alanı oluşturmanızı sağlamayacak. Henüz AMP sayfalar için sabit widget alanı imkanı sunan bir eklenti geliştirilmedi.

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.

Kategori: Wordpress

Hakkımda Kerem SARI

İyi bir blog sahibi olmak ister misiniz?
Tel / Whatsapp: 0532 744 20 58 - İletişim

Okuyucu Etkileşimi

Yorumlar

  1. İdo

    25 Ağustos 2018

    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ı.

    Cevapla
    • Kerem SARI

      25 Ağustos 2018

      İşinize yaradığına sevindim.

      Cevapla
  2. Anonim

    10 Ekim 2018

    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;

    Cevapla
    • Kerem SARI

      25 Aralık 2018

      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.

      Cevapla
  3. Delines

    4 Haziran 2019

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

    Cevapla
    • Kerem SARI

      4 Haziran 2019

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

      Cevapla

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak.

Birincil kenar çubuğu

İnsan ancak anladığı şeyleri duyar.
Johann Wolfgang von Goethe

Psikolojik Danışman

© 2014–2021 keremsari.com
İçerikler keremsari.com'a aittir. İzinsiz kullanılması yasaktır.

  • Gizlilik Politikası
  • Kullanım Koşulları
  • İletişim