Gördüğümüz en yaygın düzen sorunlarından biri, kenar çubuğunun içeriğin yanında görünmek yerine içeriğin altına düşmesidir. Bu, bir siteyi anında bozuk gösterir ve ziyaretçileri şaşırtabilir.
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çeriğin altında 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 dışında, CSS ayrıca WordPress web sitenizdeki her öğenin genel tasarımını etkiler. Düzeninizdeki öğelerin genişliğini, hizalamasını ve kaydırmasını tanımlamak için kullanılır.
Basitçe söylemek gerekirse, içerik alanınızın genişliği mevcut alandan fazlaysa, kenar çubuğunu aşağı taşınmaya zorlayacaktır.
İ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
Genellikle, kenar çubuğu sorunu WordPress tema dosyalarınızdaki değişikliklerden kaynaklanır.
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ğini doğru şekilde isteme ve alma hakkındaki 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
Ortaya çıkan değişikliklerin hemen görünmediği durumlar, genellikle önbelleğe alma sorunlarından kaynaklanır.
Önbelleğe alma 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 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.
Sorun kaybolursa, bu bir eklentinin soruna neden olduğu anlamına gelir. WordPress eklentilerinizin tümünü tek tek etkinleştirin, soruna neden olan eklentiyi bulmak için her eklentiden sonra web sitenizi kontrol edin.
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 devre dışı bırakma ve WordPress yönetici alanına erişemediğinizde eklentileri devre dışı bırakma hakkındaki eğitimlerimize göz atabilirsiniz.
4. Düzeni Bozan Bozuk <div> Etiketlerini Düzeltme
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.
Örneğin, bu sorun yalnızca tek gönderilerde oluşuyorsa, single.php şablonunu kontrol etmek isteyebilirsiniz. Hangi şablona bakacağınızı öğrenmek için, eksiksiz WordPress şablon hiyerarşisi bilgi kartımıza bakın.
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.
Ayrıca, öğelerin başlangıç ve bitiş etiketlerini vurgulayarak kodu hata ayıklamaya yardımcı olan Denetim aracını veya kod düzenleyici uygulamalarını kullanabilirsiniz.
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, mevcut 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ı
Yukarıdaki adımların hiçbiri işe yaramadıysa endişelenmeyin - denenecek birkaç şey daha var.
Ö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)
Umarız bu makale, WordPress kenar çubuğunun içerik sorununun altında kalması sorununu nasıl çözeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca yaygın WordPress hataları hakkındaki nihai kılavuzumuzu ve her WordPress gönderisi ve sayfası için farklı kenar çubuklarının nasıl görüntüleneceği 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 koduna bir kod düzenleyicide bakmak isteyebilirsiniz, bu da yanlış div'i bulmanıza yardımcı olacaktır, ayrıca öğeyi inceleyerek sitenize de bakabilirsiniz: 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
teşekkürler çocuklar - bu gönderi sorunumu çözdü. Çok minnettarım
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 barındırdığınız WordPress.org vs ü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ırdığınız WordPress.org vs ücretsiz WordPress.com blogu arasındaki fark hakkındaki kılavuzumuza 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 bakıp bana yardım edebilir misin? http://www.americasfreedomfighters.com/ google adsense ekledim ve şimdi kenar çubuğum alta itildi ve kenar çubuğunda bir hikaye yükseliyor! ç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 sorun bende var ve nereden başlayacağımı bile bilmiyorum, çünkü bugün herhangi bir düzenleme yapmadım. Herhangi bir öneriniz var mı? İşte sitem
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.