Kenar çubuğu, çok sayıda amaç için kullanılabileceği için bir WordPress web sitesinde çok önemli bir alandır. Genel olarak, kenar çubukları ana içeriğin solunda veya sağında bulunur, fakat bazen içeriğin altına da yerleştirilebilirler. Kenar çubukları, web sitesinin büyümesi için gerekli olan veya web sitesinde sorunsuz kullanıcı gezinmesine yardımcı olan widget’lar içerir. Bu widget’lar, diğer şeylerin yanı sıra harekete geçirici mesaj düğmelerini, haber bülteni formlarını, arama çubuklarını, yan menüleri, afişleri ve reklamları içerir.
Bununla birlikte kenar çubuklarının açık bir şekilde kullanılmasına rağmen, bazı WordPress kullanıcıları bunları web sitelerinde, belirli sayfalarda ve gönderilerde veya sitelerinin tamamında devre dışı bırakmayı tercih ediyor. Birinin kenar çubuğunu kaldırmayı seçmesinin nedenleri farklıdır ve bu makale boyunca kenar çubuklarını kaldırmanın yanı sıra bunlara da göz atacağız. Bu görev karmaşık hale gelebileceğinden, WordPress’te kenar çubuğunu nasıl kaldıracağınızı gösteren birkaç yöntem ekledik:
-
Tema seçeneklerini kullanarak kenar çubuğunu kaldırma
-
Bir eklenti kullanarak kenar çubuğunu kaldırma
-
CSS kodunu kullanarak kenar çubuğunu kaldırma
-
Kenar çubuğunu özel şablonlar kullanarak kaldırma
WordPress’te kenar çubuğunu neden kaldırmalısınız?
Bazı WordPress kullanıcılarının kenar çubuğunu kaldırmayı seçmesinin en önemli nedeni, mobil ekranlarda nasıl ve nerede görüntülendiğidir. Mobil ekran en sık kullanılan görüntü alanı haline geldiğinden, tüm WordPress web sitesi sahipleri, mobil ekranlardaki olası kenar çubuğu sorunlarını ele almalıdır. Genelde mobil cihazlarda kenar çubuğu sayfa içeriğinin altına yerleştirilir ve bu da sayfanın aşırı uzun olmasına neden olur. Bu durum sık sık kullanıcıları kenar çubuğu bölümüne kaydırmaktan caydırır. Ek olarak mobil ekranlar oldukça küçük olduğundan, tipik bir kenar çubuğu düzeni, kullanıcıların bazı kenar çubuğu widget’larıyla etkileşim kurmak için sürekli olarak yakınlaştırıp uzaklaştırma ihtiyacı duymasına neden olabilir.
Bunun dışında kenar çubuğu içeriği, kullanıcıları ana sayfa içeriğinden uzaklaştırarak amacını bozabilir. Blog sitelerinde bundan kaçınmak çok önemlidir; okuyucularınızın temiz ve düzenli bir şekilde görüntülenen makale içeriğine odaklanmasını istersiniz. Ek olarak haber toplama siteleri veya dergiler gibi bazı niş amaçlı web siteleri, zaten zengin içerikli bir web sitesinde dağınıklık hissi yarattıklarından kenar çubuklarını kaldırır.
WordPress’te kenar çubuğu nasıl kaldırılır
Kenar çubuğunu neden kaldırmak isteyebileceğinizi gördükten sonra, bunu nasıl başarabileceğinizi düşünelim. Uygulaması en kolay olanlardan başlayarak çeşitli yöntemleri tartışacağız. Ek olarak kenar çubuğunu tüm sayfaların yanı sıra tek bir sayfa veya gönderi için nasıl devre dışı bırakacağınızı göstereceğiz. Nihayetinde, hangi yöntemin ve web sitesinin hangi bölümü için kullanılacağının seçimi size kalmıştır.
Tema seçeneklerini kullanarak kenar çubuğunu kaldırma
Kenar çubuğunu kaldırmanın en iyi ve en kolay yöntemi, temanızdaki uygun seçenekleri kullanmaktır. Tüm iyi kodlanmış temalar, web sitesinin çeşitli yönlerini yönetmeye yardımcı olan çok çeşitli seçenekler sunar. Bu yüzden temanızın özellikle kenar çubuğuyla ilgili bir dizi seçenek içerme olasılığı çok yüksektir. Bu yüzden kenar çubuğunu kaldırmanıza yardımcı olabilecek ayarları bulma umuduyla her zaman mevcut temanızın seçeneklerini incelemelisiniz.
Tüm temalarımız buna izin verdiğinden, size bir WordPress teması içinde uygun seçeneği kullanarak kenar çubuğunu nasıl devre dışı bırakacağınızı göstereceğiz. Kenar çubuğunu genel olarak devre dışı bırakmak için Tema_adı Seçenekleri > Kenar Çubuğu’na gidin ve Kenar Çubuğu Düzeni seçeneğini bulun. Alternatif olarak, doğru yol bunun yerine Tema_adı > Sayfa olabilir ve seçenek adı aynı kalır. Ayrıca Theme_name kısmı temanın ismi ile değiştirilecektir ve bazı durumlarda (örneğin Lekker Core) Core kelimesini içerebilir. Seçeneği bulduğunuzda, Kenar Çubuğu Yok ayarını seçin ve bitirmek için Değişiklikleri Kaydet düğmesine basın.
Bazen kenar çubuğunu tüm sayfalar için değil, yalnızca belirli sayfalar için devre dışı bırakmak isteyebilirsiniz. Temalarımızdan birini kullanıyorsanız bunu kolayca yapabilirsiniz. Tüm WordPress temaları, bireysel sayfalarda global Tema_adı Seçenekleri içinde sahip olduklarına eşdeğer bir dizi seçenek içerir. Bu sayfaya özgü seçenekleri kullanarak, tek tek sayfalardaki seçim seçeneklerini ayarlayabilirsiniz. Bu durum sayfanın bir kenar çubuğuna sahip olup olmayacağı seçimini içerir. Aynısı, kişiselleştirilmiş ayarlamalar yapmanıza izin veren seçeneklere sahip oldukları için tek gönderiler için de geçerlidir.
Bu yüzden tek bir sayfada veya gönderide kenar çubuğunu devre dışı bırakmak için, önce düzenlemek için tıklayın ve Tema_adı Ayarları’na gidin. Daha sonra Kenar Çubuğu Ayarları bölümünü bulun ve kendinizi o bölüm içinde konumlandırın. Kenar Çubuğu Düzeni seçeneğini bulun, değeri Kenar Çubuğu Yok olarak ayarlayın ve sayfayı veya gönderiyi güncellemek için Güncelle düğmesine basın. İşte bu kadar, seçtiğiniz sayfa veya gönderi artık kenar çubuğuna sahip olmayacak.
Bir eklenti kullanarak kenar çubuğunu kaldırma
Temanızın kenar çubuğunu kaldırmak için benzer bir seçeneği yoksa, farklı bir yöntem denemeniz gerekecektir. Kenar çubuklarını kaldırmanın başka bir yolu, bu olasılığı sunan uygun bir eklenti bulmaktır. Çok sayıda WordPress eklentisi sayesinde, size yardımcı olacak birini bulmak zor değil. Bu özel durumda, kenar çubuklarından (widget alanları) bahseden eklentileri aramalısınız veya kenar çubuğunu hariç tutan sayfa veya gönderi şablonları sunmalısınız.
WordPress eklentileri deposunu ararken bulduğumuz eklenti, Herhangi Bir Tema ve Sayfa Oluşturucu için Tam Genişlik Şablonlarıdır. Eklenti, Kenar Çubuğu Yok şablonu dahil olmak üzere çeşitli sayfa ve gönderi şablonları sunar. Fakat küresel uygulama için bir seçenek içermez, yani her sayfa için uygun şablonu seçmeniz veya ayrı ayrı göndermeniz gerekir.
Bu eklentiyi kullanan bir sayfadaki kenar çubuğunu kaldırmak için önce onu yüklemeniz gerekir. Daha sonra sayfayı düzenlemek için tıklayın ve sağdaki Sayfa Nitelikleri bölümünü bulun. Şablon seçeneğini bulun, sayfa şablonunuz olarak FW Kenar Çubuğu Yok şablonunu seçin ve seçimin kaydedilmesi için Güncelle düğmesine basın.
Benzer şekilde, bu eklentiyi kullanarak tek bir gönderiden kenar çubuğunu kaldırmak için, o gönderiyi düzenlemek için tıklayın, Gönderi Özellikleri bölümünü bulun, gönderi şablonu olarak FW Kenar Çubuğu Yok’u seçin ve bu seçimi uygulamak için Güncelle düğmesine basın.
Bu durum kenar çubuğunu kaldırmak için özel eklentileri kullanma konusundaki açıklamamızı sonlandırıyor. Artık kenar çubuğunu kaldırmak istediğiniz tüm sayfalara ve gönderilere göz atabilir ve bu adımları izleyerek yapabilirsiniz.
Şimdiye kadar özetlediğimiz iki yöntemi kullanarak kenar çubuğunu kaldıramadıysanız, daha az başlangıç dostu yaklaşımları tercih etmeniz gerekecektir. Kenar çubuğunu kaldıramamanızın nedenlerinden biri, bulduğunuz eklenti ile temanız veya diğer eklentileriniz arasındaki uyumsuzluk olabilir. Alternatif kenar çubuğu kaldırma yöntemlerini denemek istemenizin bir diğer nedeni de, eklenti tarafından sağlanan bir şablonu kullandıktan sonra sayfa yapısından veya stilizasyondan memnun kalmamış olmanızdır. Durum ne olursa olsun, endişelenmemelisin. Kod kullanımını içeren kenar çubuğunu kaldırmanın ek yolları vardır. Onları keşfedelim.
CSS kodunu kullanarak kenar çubuğunu kaldırma
Web sitenizdeki kenar çubuğunu kaldırmanın alternatif bir yöntemi, Görünüm > Özelleştir > Ek CSS’ye küçük bir CSS kodu eklemenizi gerektirir. Bu yöntemi kullanarak, neye ihtiyacınız olduğuna bağlı olarak web sitenizdeki veya yalnızca belirli sayfalardaki ve yayınlardaki kenar çubuğunu kaldırabileceksiniz.
Bununla birlikte CSS kodu büyük ölçüde sayfalarınızın HTML yapısına bağlı olduğundan, kullanılan çeşitli temalar veya eklentiler göz önüne alındığında, tüm web siteleri için çalışan bir kod göstermek imkansızdır. Bu yüzden tüm adımları ayrıntılı olarak açıklarken bu yöntemi bir örnek kullanarak ele alacağız. Daha sonra rehberimizi kullanarak, sayfalarınızın veya gönderilerinizin HTML yapısıyla uyumlu olacak benzer kodlar oluşturabileceksiniz.
Kenar çubuğunu CSS kullanarak tüm sayfalardan kaldırmak için, kenar çubuğu içeren sayfalarınızdan birini tarayıcınızın öğe inceleme aracını kullanarak incelemeniz gerekir. Bunu yapmak için, kenar çubuğu içeren sayfalarınızdan birini inceleyin ve kenar çubuğuna, tercihen üst kısma yakın bir yere sağ tıklayın. Ardından açılan menüden İncele seçeneğine tıklayın.
Bu durum tarayıcınızın geliştirici araçlarının geçerli sayfanızın HTML yapısını gösteren Öğeler sekmesini açacaktır. Ve doğrudan sağ tıkladığınız öğenin üzerine konumlanacaksınız.
Kenar çubuğuna karşılık gelen HTML öğesini bulana kadar HTML yapısında yukarı çıkmanız gerekecek. Siz HTML yapısında yukarı doğru çıktıkça web sitesinde her öğe vurgulanacağından, üzerine geldiğinizde tüm kenar çubuğu bölümünü vurgulayan bir öğe bulmanız yeterli olacaktır. Bu yüzden kenar çubuğu bölümünün başına yakın bir yere tıklarsanız, karşılık gelen HTML öğesini bulmak daha kısa sürer. Bulduktan sonra, aşağıda verilen formda CSS kodunu oluşturmak için o öğeyi kullanacaksınız.
appropriate-css-selector-corresponding-to-the-sidebar-element {
display: none;
}
Örneğimizde, HTML öğesi, incelediğimiz başlığın üzerindeki üçüncü kaydırma div’idir. Bu div, biri kenar çubuğuyla ilgili olan ve CSS seçici olarak kullanacağımız üç ayrı sınıfa sahiptir. Yani, kenar çubuğu bölümünü devre dışı bırakmak için aşağıdaki koda ihtiyacımız olacak:
.-page-sidebar-section{
display: none;
}
CSS seçici olarak o belirli sınıfı kullandığımızı belirtmek için seçilen div sınıfından önce nokta eklenir.
Fakat ele almamız gereken iki ek konu daha var. Birincisi, kenar çubuğunu basitçe kaldırarak, büyük olasılıkla ana içeriğin aynı kalması ve otomatik olarak genişlememesidir. İkinci sorun, bahsettiğimiz kodla ilgilidir, çünkü başka bir CSS kodu tarafından geçersiz kılınırsa çalışmayabilir.
İlk sorunu çözmek için, sayfa içeriğini içerdiği HTML öğesinin %100’üne genişleten uygun CSS kodunu da eklemeniz gerekecek. Bu yüzden önce bu HTML öğesinin ne olduğunu bulmanız ve ardından aşağıda verilen biçimde CSS’yi eklemeniz gerekir.
appropriate-css-selector-corresponding-to-the-page-content-element {
width: 100%;
}
Bizim durumumuzda, karşılık gelen HTML öğesi, doğrudan birincinin üzerinde bir div’dir.
Yine CSS seçici olarak bu elementin en uygun sınıfını kullanacağız. Dolayısıyla, bizim durumumuzda uygun CSS şöyle olacaktır:
.-page-content-section{
width: 100%;
}
Son olarak ne bu ne de önceki CSS kodunun başka herhangi bir çakışan kod tarafından geçersiz kılınmadığından emin olmak için, her iki kod satırına da !important ekleyeceğiz. Bu durum yeni CSS kodumuzu en yüksek önceliğe sahip yapacaktır. Bu yüzden aşağıda verilen kodu kullanarak her iki olası sorunu da çözeceğiz.
.-page-sidebar-section{
display: none !important;
}
.-page-content-section{
width: 100% !important;
}
Bu durum tüm sitenizdeki kenar çubuğunu kaldıran CSS kodunun nasıl yapılacağına ilişkin açıklamayı sonlandırıyor.
Daha önce de belirttiğimiz gibi, tam kod duruma göre değişir, fakat talimatlarımızı izlerseniz web siteniz için uygun bir CSS kodu da oluşturabileceksiniz.
Tek bir sayfada kenar çubuğunu kaldıran bir kod oluşturmak için önceden oluşturulmuş CSS’yi biraz ayarlamanız yeterlidir. Daha kesin olarak, her iki CSS seçicisini de belirli bir sayfaya işaret edecek şekilde ayarlamanız gerekecektir.
page-specific-appropriate-css-selector-corresponding-to-the-sidebar-element {
display: none !important;
}
page-specific-appropriate-css-selector-corresponding-to-the-page-content-element {
width: 100% !important;
}
Bunu yapmanın en kolay yolu, gövde etiketini bulana kadar sayfanın HTML yapısını gözden geçirmektir. Daha sonra gövde etiketinin sahip olduğu sınıflar içinde, kimliğini kullanarak geçerli sayfayı tanımlayan birini bulmanız ve kullanmanız gerekecektir. Bu sınıf, page-id- ve ardından geçerli sayfanın kimliğini temsil eden sayı olacaktır.
Bizim durumumuzda, aşağıdaki CSS kenar çubuğunu yalnızca kimliği 4972 olan sayfada kaldıracaktır.
.page-id-4972 .-page-sidebar-section{
display: none...