One of the most common layout issues we see is when the sidebar drops below the content instead of appearing next to it. It instantly makes a site look broken and can confuse visitors.
Bu genellikle bir tema düzenlemesi, eklenti yüklemesi veya küçük bir kod değişikliğinden sonra olur - hatta kapanış etiketi eksikliği bile düzeni bozabilir. Temaları sorun gidermede kullanıcılara yardımcı olurken bunu birçok kez gördük.
İyi haber şu ki, nereye bakacağınızı bildiğinizde düzeltmesi kolaydır. Sorunu bulmak için geliştirici olmanıza gerek yok.
Bu kılavuzda, en olası nedenleri göstereceğiz ve kenar çubuğunuzu tekrar yerine oturtmak için basit adımları size anlatacağız.
WordPress Kenar Çubuğu İçeriğin Altında Hatasına Ne Neden Olur?
Kenar çubuğunun içerikten aşağıda görünmesinin en yaygın nedeni, düzeni bozan bir HTML veya CSS hatasıdır.
HTML'deki her <div> düzgün bir şekilde kapatılmalıdır. Sayfayı görüntülemekten sorumlu şablonun kapatılmamış bir <div> etiketi varsa, bu sayfa düzenini bozar.
Benzer şekilde, istenmeyen veya fazladan bir kapanış </div> etiketi de düzeni etkileyebilir ve kenar çubuğunun aşağı kaymasına neden olabilir.
HTML'nin yanı sıra, CSS de WordPress web sitenizin her öğesinin genel tasarımını etkiler. Düzeninizdeki öğelerin genişliğini, hizalamasını ve kaydırmasını tanımlamak için kullanılır.
To put it simply, if the width of your content area is more than the available space, then it will force the sidebar to move down.
İlk olarak, bu WordPress kenar çubuğu hatasına neden olan belirli kodu bulmanız gerekecektir.
Bununla birlikte, WordPress'te kenar çubuğunun içerik altında görünmesi hatasını nasıl kolayca giderebileceğinize ve düzeltebileceğinize bir göz atalım. Belirli bir sorun giderme çözümüne atlamak için bu hızlı bağlantıları kullanabilirsiniz:
- WordPress Temanızın Son Değişikliklerini Geri Alın
- WordPress Önbelleğini Temizle
- WordPress Eklentilerini Devre Dışı Bırakın
- Düzeni Bozan Kırık Etiketleri Düzelt
- CSS'yi Bul Kenar Çubuğunu İçeriğin Altına Taşıma
- Kenar Çubuğunun İçeriğin Altında Görünmesi Durumunda Ne Yapmalı
- Yaygın WordPress Hatalarını Çözmenin Daha Fazla Yolunu Öğrenin
1. WordPress Temanızın Son Değişikliklerini Geri Alın
Usually, the sidebar issue is caused by changes in your WordPress theme files.
Yakın zamanda WordPress temanızda veya alt temanızda herhangi bir değişiklik yaptıysanız, bu değişiklikleri incelemek bu hatayı düzeltmenin hızlı bir yolu olacaktır.
Ayrıca destek almak için doğrudan tema geliştiricinizle iletişime geçebilirsiniz. Daha fazla bilgi için, WordPress desteğinin nasıl doğru sorulacağına ve alınacağına ilişkin eğitimimize göz atın.
Hangi değişiklikleri geri almanız gerekeceğini bulamazsanız, okumaya devam edin, size sorun gidermenin başka yollarını göstereceğiz.
2. WordPress Önbelleğini Temizleyin
hemen görünmeyen değişiklikler yaptığınızda, bu genellikle önbelleğe alma sorunlarından kaynaklanır.
Önbellekleme eklentilerinin size aynı sayfanın eski bir sürümünü göstermesi yaygındır. WordPress önbelleğini temizlemek ve tarayıcı önbelleğini temizlemek, web sitenize uygulanan değişiklikleri görmenize yardımcı olacaktır.
3. WordPress Eklentilerini Devre Dışı Bırakma
WordPress sitenizin görünümü ve stili, kullandığınız tema tarafından kontrol edilir. Ancak bazen WordPress eklentileri de kendi HTML ve CSS'lerini web sitenize ekleyebilir.
Örneğin, bir sayfaya iletişim formu veya bir lightbox açılır penceresi eklemek ek CSS ve HTML yükleyecektir.
Sorunun bir WordPress eklentisinden kaynaklanmadığından emin olmak için web sitenizdeki tüm WordPress eklentilerini geçici olarak devre dışı bırakabilirsiniz.
Bunu yapmak için WordPress yönetici panelinizde Eklentiler » Yüklü Eklentiler bölümüne gidin ve listedeki 'Eklenti'nin yanındaki kutuyu işaretleyin. Ardından açılır menüyü açın, 'Devre Dışı Bırak'ı seçin ve 'Uygula'ya tıklayın.
If the issue disappears, then this means that a plugin was causing the issue. Simply activate all your WordPress plugins one by one, checking your website after each plugin to find out which one is causing the problem.
Bundan sonra, bir çözüm bulmak ve sorunu bildirmek için eklentinin desteğiyle iletişime geçebilirsiniz.
Ayrıntılı rehberlik için, WordPress eklentilerini kolayca nasıl devre dışı bırakacağınıza ve WordPress yönetici alanına erişemediğinizde eklentileri nasıl devre dışı bırakacağınıza ilişkin eğitimlerimize göz atabilirsiniz.
4. Fix Broken <div> Tags Breaking the Layout
Daha önce de belirttiğimiz gibi, bozuk <div> etiketleri, kenar çubuğunun içeriğin altına kaymasının yaygın nedenlerinden biridir.
Sorun web sitenizin belirli bir alanında oluşuyorsa, o kodu görüntülemekten sorumlu şablonu kontrol edebilirsiniz.
For instance, if this issue only occurs on single posts, then you may want to check the single.php template. To find out which template to look at, see our complete WordPress template hierarchy cheat sheet.
Kapatılmamış bir div öğesini hızlı bir şekilde bulmanın ve düzeltmenin en kolay yolu, W3C Doğrulayıcı aracını kullanmaktır.
You can also use the Inspect tool or code editor apps that help you debug code by highlighting the start and end tags of elements.
Bir öğenin başlangıç ve bitiş etiketlerini vurgulama örneği:
Koda bakarken, açılan her <div> etiketinin kapanış </div> etiketine de sahip olduğundan emin olmanız gerekir.
Benzer şekilde, karşılık gelen açık bir <div> etiketi olmayan, yetim kalmış bir kapatma </div> etiketi de aramak isteyeceksiniz.
Bozuk HTML etiketlerini bulduysanız, bunları düzeltmek kenar çubuğunun içerik sorununun altında görünmesi sorununu çözecektir.
5. Kenar Çubuğunu İçeriğin Altına Taşıyan CSS'yi Bulma
CSS, web sitenizin tasarımının en önemli yönlerini kontrol eder. WordPress temanız, bir ızgara düzeni içindeki içerik ve kenar çubuğu alanlarının genişliğini tanımlamak için CSS'yi kullanır.
Bu değer, kullanılabilir görüntüleme alanının yüzdesidir. mobil cihazlarda, temanız kenar çubuğunu otomatik olarak içeriğin altına itecektir.
Soruna neden olan CSS'yi bulmak için İncele aracını kullanabilirsiniz. İçeriğinizi yalnızca kapsayıcı alanı, içerik bölümü ve kenar çubuğu alanlarına taşıyarak genişliklerini ve yüksekliklerini görebilirsiniz.
Örneğin, içerik alanınız %70 genişliğinde ve kenar çubuğu alanınız %33 genişliğindeyse, otomatik olarak aşağı inecektir. Bu değerleri hesaplarken, her bölümdeki dolgu ve kenar boşluğu değerlerinin kullandığı alanı da dikkate almak isteyebilirsiniz.
Kenar Çubuğunun İçeriğin Altında Görünmesi Durumunda Ne Yapmalı
If none of the steps above worked, don’t worry — there are still a few more things you can try.
Öncelikle, tam WordPress sorun giderme kılavuzumuza göz atmanızı öneririz. Bu, düzeninizi etkileyebilecek diğer gizli sorunları elemek için harika bir yoldur.
Ayrıca WordPress'te hata ayıklama modunu etkinleştirebilirsiniz. Bu, hatayı doğrudan düzeltmez, ancak düzeninizi bozan bir PHP veya eklenti hatası gösterebilir.
Hata ayıklama modu belirli bir eklentiyi işaret ediyorsa, onu geçici olarak devre dışı bırakmayı veya temanızın düzenini etkilemeyen alternatif bir eklentiyle değiştirmeyi deneyin.
Yaygın WordPress Hatalarını Çözmenin Daha Fazla Yolunu Öğrenin
WordPress sitenizde başka sorunlar mı yaşıyorsunuz? Aşağıdaki eğitimlere göz atın:
- WordPress'te Geçersiz JSON Hatası Nasıl Düzeltilir (Yeni Başlayanlar İçin Kılavuz)
- Yaygın WordPress Blok Düzenleyici Sorunları ve Bunları Düzeltme Yolları
- WordPress'te Görüntü HTTP Hatası Nasıl Düzeltilir
- Medya Ekle Düğmesi WordPress'te Neden Çalışmıyor?
- WordPress'te 'Başka Bir Güncelleme Şu Anda Devam Ediyor' Hatası Nasıl Düzeltilir
- WordPress Gönderilerinde Öne Çıkan Görsellerin İki Kez Görünmesi Nasıl Düzeltilir
- WordPress'te Boş Site Düzenleyici Sorununu Düzeltme (Adım Adım)
Bu makalenin, içeriğin altındaki WordPress kenar çubuğu sorununu nasıl düzelteceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, en yaygın WordPress hataları hakkındaki nihai kılavuzumuzu ve her WordPress gönderisi ve sayfası için farklı kenar çubukları görüntüleme hakkındaki makalemizi de okumak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Alessio
Bunu paylaştığınız için teşekkürler, sorunumu çözdü. Yaşadığım sorunu yaşayan tek kişinin ben olmadığıma sevindim.
WPBeginner Desteği
You’re welcome, glad our guide was helpful
Yönetici
Gina Detwiler
O div öğesini nasıl bulacağımdan emin değilim. Biraz daha detaylandırabilir misiniz? Bu sorunla sitemde en başından beri karşılaşıyorum ve nasıl düzelteceğimi bilmiyorum.
WPBeginner Desteği
Özel temanızın kodunu bir kod düzenleyicide incelemek isteyebilirsiniz, bu da yanlış olan div'i bulmanıza yardımcı olacaktır, ayrıca sitenizi inceleme öğesini kullanarak da inceleyebilirsiniz: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Yönetici
Shai
Çok teşekkür ederim!
Bunu çözmeye çalışırken bana çok zaman kazandırdınız.
Söylediğiniz gibi fazladan bir div öğesi kapatmıştım.
Dale Jennings
Mevcut gönderilerimi sola, son gönderileri ise sağ kenar çubuğuna yerleştirmeye çalışıyorum ve kenar çubuğu sayfanın en altında kalıyor, ayrıca çok geniş ve yeni olduğum için ne dediğinizi anlamıyorum. Kolay bir çözümü var mı? Ya da var mı?
Ayla
Kenar çubuğumun her sayfanın altında görünmesiyle ilgili bir sorun yaşıyorum. Bu konuda çok bilgili değilim, bu yüzden alan adımı yakın zamanda Google'dan aktarmak dışında süslü bir şey yapmadım. Siteyi wordpress'te oluşturuyordum ve temayı değiştirene kadar herhangi bir sorun yaşamadım. Yukarıdaki talimatları denedim ama bu şeylerden hiçbirini bulamadım.
WPBeginner Desteği
Merhaba Ayla,
Geçici olarak önceki temanıza veya varsayılan bir temaya geçmeyi deneyin. Bu sorunu çözerse, sorun temanızdadır. Bunu düzeltmelerine yardımcı olup olamayacaklarını görmek için tema geliştiricisiyle iletişime geçmeyi deneyin.
Yönetici
Jared H
Sorunumu çözdü, paylaştığınız için teşekkürler!
Dene
thanks guys – this post just solved my problem. Much appreciated
Donald Efiom
Şu anda aynı sorunu yaşıyorum ve ürünleri wcommerce eklentisini kullanarak görüntüleyen mağaza sayfasının HTML'sini nereden düzenleyeceğimi bulamıyorum. Tarayıcımdaki öğeyi incelediğimde, hatayı ayıklayabilir ve düzeltebilirim ancak gerçek kök dizinimde, düzenleyebileceğim woocommerce'in mağaza sayfasının HTML'sini tutan sayfayı bulamıyorum. Lütfen yardım edin!
Maria Appleby
Bütün çabalarıma rağmen kenar çubuğu sorunumu çözemedim. Açık blokları aradım. HTML nedeniyle bozuk olan bir blog gönderisini kopyaladığım içerik yüzünden kaldırdım. Farklı bir tema denedim. Widget'larımı kaldırdım (ve sonra ne olacağını görmek için bir tane eklemeye çalıştım – "blogu takip et" düğmesi” – hala en altta). Doğrulayıcıyı denedim ama bana ne söylediğini pek anlamıyorum. Farklı blog gönderisi URL'leri girdiğimde aynı hata mesajlarını aldım. Aptal gibi göründüğüm için üzgünüm... Blogum uzun zamandır var ama yakın zamanda çok fazla içerik eklemeye başladım ve henüz ne yaptığımı gerçekten bilmiyorum. Kenar çubuğu sağ taraftan, blogun en altına, çok yakın zamanda (son birkaç gün içinde) indi. Yardımcı olabilir misiniz?
WPBeginner Desteği
Merhaba Maria,
Bir WordPress.com blogu kullanıyor gibi görünüyorsunuz. Lütfen kendi kendine barındırılan WordPress.org ile ücretsiz WordPress.com blogu arasındaki fark hakkındaki kılavuzumuza bakın.
Yönetici
Sparsh Goyal
Aynı sorun bende de var ama çözemedim. Sadece ana sayfamda bu sorun var. Yazı tipi sayfası ve Sayfa tipi sayfası iyi çalışıyor. Ana sayfamın kenar çubuğu içeriğimin hemen yanında değil, üstte gidiyor. Web sitemde neyin yanlış gittiğini kontrol edebilir misiniz? Sitem coasilat.com
Mustafa
Teşekkür ederim. Sorun çözüldü. fazladan bir div öğesiydi. Onu ortadan kaldırdığımda sorun çözüldü.
Jan Reilink
Hayat kurtarıcı, teşekkürler!
Asha Shendre
Bunun için bütün günüm sıkıntılı geçti.
Sorun çözümü sadece burada buldum.
Teşekkürler..
Çok teşekkür ederim efendim…
Harish
Yardım ettiğiniz için teşekkürler
Sly
Merhaba, ben acemiyim. CSS veya HTML kodu hakkında HİÇBİR ŞEY bilmiyorum, temamı düzenlemiyorum, alt temam yok. Ne yapmam gerekiyorsa sadece eklentiler ekliyorum. TÜM BLOG YAZISI SAYFALARIMDA sorun yaşıyor gibiyim. Kenar çubuğu blog yazılarının altında. Div'in ne olduğunu ve nasıl düzeltileceğini bilmiyorum. Değerli profesyoneller, bu kenar çubuğu sorununu çözmenin en iyi yolu ne olur?
Tamara
Ben yeni başlayanım ve kodlama da bilmiyorum, ancak bu sayfadaki W3 Validator bağlantısını kullanarak bu sorunu çözebildim. Doğrulayıcının en üstünde, Seçenekler altında, mevcut olan her şeyi işaretledim, ardından blogumun web adresini girdim ve doğrulayıcıyı çalıştırdım. Hataların numaralandırılmış bir listesinin altında, hataların blogumun metni içinde bulunduğu çok ayrıntılı (ve göz korkutucu, ama pes etmeyin) bir görüntüleme vardı. Bu makalede bahsedilenleri odakladım. Ayrıntılı raporu kaydırırken, kırmızıyla vurgulanmış bir hata buldum. Metnim görüntülendiği için, bir internet bağlantısı ekledikten hemen sonra blog gönderilerimden birinde olduğunu görebiliyordum. WordPress kontrol panelinden o blog gönderisine gittim, “düzenle”ye tıkladım ve bağlantıyı sildim. (Görünmez herhangi bir şeyin orada olabileceğinden emin olmak için “sil” tuşunu basılı tutarak ve aynı nedenle birkaç harfi geri alarak. Ardından blog gönderisini kaydettim. Web sayfam düzeltildi! Ardından bağlantıyı geri eklemek için blog gönderisini yeniden düzenledim ve her şey yolunda kaldı. Sorun çözüldü.
Lisa W Boyle
Teşekkürler, talimatlarınıza göre sorunu hemen bulup düzeltebildim. Tek bir fazladan eklediğimi fark ettim. tekil.php dosyamda. Hayat kurtarıcısın, çok teşekkürler!
Roney Oenophile
Ne yanlış yaptığımı bilmiyorum, lütfen yardım edin. Metni düzenliyordum ve yanlışlıkla tuş kombinasyonuna bastım, bu da görünümünü değiştirdi. Tam ekran gibi birkaç düğme artık eksik. Ve yayınlama düğmesi sol tarafa taşındı. Ve gönderiyle birlikte yüklediğim resim içeriğimin üzerine taşındı ve şimdi çok büyük. Nasıl olduğunu bilmiyorum, sorunun ne olduğunu bilmiyorum. Bilgisayar konusunda bilgili değilim. Genellikle gönderi yazarım. Lütfen yardım edin. Sayfamın adresi wordpress.com
WPBeginner Desteği
Lütfen kendi barındırılan WordPress.org ile ücretsiz WordPress.com blogu arasındaki fark hakkındaki rehberimize bakın. WordPress.com desteğiyle iletişime geçmeniz gerekiyor.
Yönetici
Danielle
Sitemizin güncellemelerini ilk kez devralıyorum… statik ana sayfayı güncellemeyi denedim ve bir şekilde kenar çubuğum alta kaydı. Hiçbir veya etiketi göremiyorum….yardım! Devraldığım kişiye ne kadar beceriksiz olduğumu söylemek istemiyorum, eğer ne yaptığımı anlayabilirsem!
giovanni
Birisi bana yardım edebilir mi, aynı sorun bende de var…
bu benim header.php dosyam
Susan
Mükemmel! Teşekkürler! div dediğiniz anda, topluluk blogumda hangi gönderinin düzenlenmesi gerektiğini biliyordum!
Leah
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
Sam
Ah! Bana tonlarca zaman ve hayal kırıklığı kazandırdınız! Teşekkür ederim
srik
Bunun için çok teşekkürler! Gerçekten yardımcı oldu
Amy
Bu gönderi için teşekkürler. Şu anda web sitemdeki bu sorunu düzeltmeye çalışıyorum. Bu gönderide bahsedilen her şeyi denedim ama hala sorun yaşıyorum. Web siteleri hakkında biraz bilgim var ama üst navigasyon çubuğumun neden 2 satıra indiğini ve kenar çubuğumun neden alta itildiğini hiç anlamıyorum. Web sitem henüz yayında değil, ancak web sitesi burada
Herhangi bir yardım için teşekkürler!!
sean
Web sitemdeki özel blogumla benzer bir sorun; yeterli içerik yoksa kenar çubuğu alt bilgi alanının altına kayıyor.
Sorunu çözenin şunları kaldırmak (veya daha güvenlisi, yorum satırına almak) olduğunu fark ettim:
Bu boş div'in ne işe yaradığını bilmiyorum & şu ana kadar blogu olumsuz etkilemedi. Daha belirgin bir başka neden, kapanış etiketleri olmayan div'lerdir - WP'de tüm açık/kapalı div etiketlerinizi takip etmek, altbilgi & üstbilgi standart bir HTML sitesinin aksine kaldırıldığı için biraz daha zordur.
Sean
Er, bu çeşitli WP sayfalarının altındaki boş "sınırlayıcı" div'ini yorum satırı haline getiriyor – orijinal yorumumdan kayboldu!
David Pomazzo
web siteme bakar mısın ve bana yardım eder misin? http://www.americasfreedomfighters.com/ google adsense ekledim ve şimdi kenar çubuğum alta itildi ve kenar çubuğunda bir hikaye var! çok teşekkür ederim
Jen
THANK YOU! It was the content width that did it for me
Cecilia
Bu sorun bende var ve birkaç gündür denememe rağmen çözemiyorum
Sitem burada:
Lütfen, gerçekten yardıma ihtiyacım var. Teşekkürler!!!! =)
WPBeginner Desteği
Muhtemelen .hfeed div'inizi bitirmeden önce şu şekilde bir clear eklemeniz gerekiyor:
1-click Use in WordPress
Yönetici
Katie Clark
Bu sorunum var ve nereden başlayacağımı bile bilmiyorum, çünkü bugün hiç düzenleme yapmadım. Herhangi bir öneriniz var mı? Sitem burada
http://clarkscondensed.com/
Yayın Kadrosu
Siteniz Chrome'da iyi görünüyor.
Yönetici
Doomish
Harika ipucu! Gerçekten yardımcı olacak, ve Kathy'nin yorumu tipik olarak başıma gelen şey.
kathy
Çoğu tema doğru CSS'ye sahip olduğundan, bunun neredeyse her zaman yanlış kapatılmış HTML sorunu olduğunu düşünüyorum. Genellikle belirli bir sayfada ortaya çıkar, çünkü kullanıcı gönderi düzenleyicisine kendi HTML'sini eklemeye çalışmıştır ve oradan işler karışmıştır. Basit bir hata, ancak ayıklanması uzun sürebilir.