En çok ihtiyaç duyduğunuzda güvenilir WordPress eğitimleri.
WordPress Başlangıç Rehberi
WPB Kupası
25 Milyon+
Eklentilerimizi kullanan web siteleri
16+
Yıllık WordPress deneyimi
3000+
Uzmanlardan WordPress eğitimleri

WordPress'te Kenar Çubuğu Tarafı Nasıl Değiştirilir (4 Yöntem)

WordPress temalarını özelleştirmeye başladığımızda, kenar çubuğunu sağdan sola taşımak basit olmalıydı.

Ancak, birçok kullanıcının bu temel düzen değişikliğiyle mücadele ettiğini keşfettik çünkü her tema bunu farklı şekilde ele alıyor ve bazıları seçeneği belirgin hale getirmiyor.

WPBeginner'da kullanıcılara yardımcı olduktan sonra, kenar çubuğu konumlandırmasının ziyaretçilerin içeriğinizle nasıl etkileşim kurduğunu önemli ölçüde etkileyebileceğini öğrendik.

Tasarım en iyi uygulamalarını takip ediyor olun veya hedef kitlenizin okuma alışkanlıklarına uyum sağlıyor olun, kenar çubuğunuzun konumunu nasıl değiştireceğinizi bilmek değerli bir beceridir.

Bu kılavuzda, WordPress'te kenar çubuğu konumunuzu değiştirmenin en kolay yollarını göstereceğiz.

WordPress'te Kenar Çubuğu Tarafını Değiştirme

💡Hızlı Cevap: WordPress Temanızda Kenar Çubuğu Tarafı Nasıl Değiştirilir

İhtiyaçlarınıza en uygun olanı seçebilmeniz için ele alacağımız yöntemlerin hızlı bir özetini aşağıda bulabilirsiniz:

  • Yöntem 1: WordPress Özelleştiriciyi Kullanın – Bu en kolay seçenektir ve kenar çubuğu düzenini değiştirmek için yerleşik bir ayara sahip klasik bir tema kullanan kullanıcılar için en iyisidir.
  • Yöntem 2: Özel CSS Kodu Kullanın – Bu yöntem, yerleşik bir kenar çubuğu seçeneği olmayan klasik bir tema kullanan kullanıcılar içindir. Küçük bir kod parçacığı eklenmesini gerektirir.
  • Yöntem 3: Tam Site Düzenleyicisini (FSE) Kullanın – Bu, modern bir blok teması kullanan herkes için standart yöntemdir. Kenar çubuğunu yeni bir konuma sürükleyip bırakmanız yeterlidir.
  • Yöntem 4: CSS Hero Eklentisini Kullanın – Bu, kenar çubuğu konumunu değiştirmek ve diğer tasarım özelleştirmelerini yapmak isteyen herhangi bir temadaki yeni başlayanlar için en iyi seçenektir.

WordPress Temamda Kenar Çubuğu Tarafını Nasıl Değiştiririm?

WordPress temanızdaki kenar çubuğu tarafını değiştirmek için öncelikle klasik bir tema mı yoksa blok teması mı kullandığınızı belirlemeniz gerekir. Kullanacağınız yöntem tamamen tema türünüze bağlı olacaktır.

Klasik temalar genellikle bu değişiklik için Tema Özelleştiriciyi veya özel CSS'yi kullanır. Blok temaları ise daha yeni Tam Site Düzenleyicisini kullanır.

Hangisine sahip olduğunuzu hızlıca kontrol etmek için işte yol. Kontrol panelinizde Görünüm'e gidin. Eğer ‘Düzenleyici’ menüsü görüyorsanız, bir blok teması kullanıyorsunuz demektir. Eğer bunun yerine ‘Özelleştir’ ve ‘Widget’lar görüyorsanız, klasik bir temaya sahipsiniz demektir.

Klasik ve Blok Tema Tanımlama

Kenar çubuğunu taşımak birçok nedenden dolayı faydalı olabilir. Örneğin, sağdan sola dilleri olan web siteleri, kenar çubuğu sol taraftayken daha doğal hissettirir.

Sitenizdeki kullanıcı deneyimini de iyileştirmek isteyebilirsiniz. Ziyaretçilerinizin e-ticaret sitenizde sayfaları belirli bir düzende taradığını fark ederseniz, kenar çubuğunu ayarlamak alışverişi daha sezgisel hale getirebilir.

Tüm bunları göz önünde bulundurarak, WordPress blogunuzun veya web sitenizin kenar çubuğu tarafını nasıl değiştireceğimize bakalım.

4 kolay yöntemimiz var ve tercih ettiğinize atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: WordPress Özelleştirici ile Kenar Çubuğu Yanını Değiştirme (Klasik Temalar)

Bu yöntem, klasik tema kullanan kişiler içindir. Bu, sitenizin tasarımını stilize etmek için WordPress özelleştiricisini hala kullanabileceğiniz ve WordPress yönetici'nin Görünüm menüsündeki Widget'lar bölümünün hala mevcut olduğu anlamına gelir.

WordPress kontrol panelinizde tema özelleştirici eksikse, muhtemelen bir blok tema kullanıyorsunuzdur ve üçüncü yönteme atlamanız gerekir.

Bazen, klasik tema geliştiricileri seçebileceğiniz birden fazla kenar çubuğu yerleşimi sunar. WordPress özelleştiricisini kullanarak ve tercih ettiğiniz kenar çubuğu konumunu orada seçerek bunun doğru olup olmadığını doğrulayabilirsiniz.

Öncelikle Görünüm » Özelleştir'e gidin. Örnek olarak Hestia temasını kullanıyoruz.

Hestia için Özelleştir'e Tıklayın

Burada, sol sütundan Görünüm Ayarları » Genel Ayarlar sayfasına gidin

Gördüğünüz gibi, Hestia'da üç kenar çubuğu şablonu bulunur: kenar çubuğu olmayan, sol kenar çubuğu olan ve sağ kenar çubuğu olan. Bu, kenar çubuğu tarafını tek bir tıklamayla değiştirmemizi sağlar. Burada kenar çubuğu tarafını sola değiştirdik.

Bu ayar, tüm web siteniz için varsayılan kenar çubuğu düzenini kontrol eder. Ancak Hestia, blog kenar çubuğu konumunu ayrı ayrı özelleştirmenize de olanak tanır, böylece yalnızca blog yazılarınızı veya gönderi sayfanızı etkiler.

Hestia'da kenar çubuğu konumunu değiştirin

Değişiklikleri yaptıktan sonra, mevcut widget'ları normal şekilde kenar çubuğuna ekleyebilirsiniz. Daha fazla bilgi için WordPress'te widget ekleme ve kullanma hakkındaki rehberimize göz atın.

Ardından, sadece ‘Yayınla’ya tıklayın.

Bu kullanışlı bir özellik olsa da, her şey temaya bağlıdır. Kenar çubuğunu özelleştiriciyi kullanarak değiştirip değiştiremeyeceğinizi görmek için tema belgelerinizi kontrol etmenizi önemle tavsiye ederiz.

Değilse, bir sonraki yönteme geçin.

Yöntem 2: Kenar Çubuğu Tarafını Kodla Değiştirme (Klasik Temalar)

Klasik temanız birden fazla kenar çubuğu seçeneği sunmuyorsa, kenar çubuğu tarafını CSS kodu kullanarak manuel olarak değiştirebilirsiniz.

Çoğu klasik tema, kenar çubuğunu ve içerik alanını birbirinin yanına yerleştirmek için float adlı bir CSS özelliği kullanır. Amacımız, her iki öğenin CSS'sini bulmak ve kaydırma yönlerini basitçe tersine çevirmektir.

Bu yöntemi denemek için bir hazırlık sitesi ve/veya alt tema kullanmanızı öneririz. Bu şekilde, bir hata oluşursa, ana temanızı ve/veya canlı web sitenizi etkilemez.

Ayrıca, bir alt tema kullanmak, bir tema güncellemesi olduğunda değişikliklerinizin üzerine yazılmasını önleyebilir.

Adım 1: Kenar Çubuğu CSS Sınıfınızı Bulmak İçin İnceleme Aracını Kullanın

Yapacağınız ilk şey web sitenizi açmak. Ardından, kenar çubuğu alanınızın etrafında gezinin ve tarayıcınızın İncele aracını kullanın.

Chrome kullanıyorsanız, alana sağ tıklayıp ‘İncele’yi seçebilirsiniz.

Daha fazla bilgi için, İncele öğesinin temelleri kılavuzumuza göz atabilirsiniz.

WordPress kenar çubuğu alanını inceleme

Şimdi, imlecinizi sayfanın sağ üst tarafındaki HTML ve CSS satırlarının üzerine getirmek isteyeceksiniz.

Tüm kenar çubuğu alanınızın vurgulandığını gördüğünüzde, o satıra tıklayın. Bizim durumumuzda <aside id=”secondary” class=”sidebar widget-area”> idi.

WordPress kenar çubuğu alanını tanımlayan satırı bulma

Sayfanın altındaki 'Stiller' sekmesinde kenar çubuğuyla ilgili tüm CSS özellikleri bulunur.

Bizim durumumuzda, kenar çubuğu alanı için CSS sınıfının .sidebar olduğunu gördük. Kenar çubuğunun konumunu belirleyen kurallar da vardır, bu durumda sol taraftır.

Önemli: Bu öğreticide kullanılan .sidebar ve .content-area gibi sınıf adları, örnek temamıza özgüdür. Önceki adımda kendi temanız için keşfettiğiniz tam sınıf adlarını kullanmalısınız.

Bunu biliyoruz çünkü margin-left kuralını kaldırdığımızda kenar çubuğu diğer tarafa hareket ediyor.

WordPress kenar çubuğu alanı için CSS sınıfını bulma

İşte temamızın kenar çubuğu alanı için kod:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Bu kodu bir metin düzenleyiciye kopyalayıp yapıştırabilirsiniz çünkü daha sonraki bir adımda ihtiyacımız olacak. Veya bu sekmeyi daha sonra açık tutabilirsiniz.

Kenar çubuğu alanı için CSS sınıfını artık bildiğimize göre, tüm gönderilerinizi veya gönderi içeriğinizi görüntüleyen ana içerik alanı için de sınıfı bulmamız gerekiyor.

Yapabileceğiniz şey, HTML ve CSS satırlarının üzerine gelerek ana içerik alanını hangi satırın vurguladığını görmektir. Burada, bunun <div id="primary" class="content-area"> satırı olduğunu öğrendik.

Ana içerik alanı için CSS sınıfını bulma

Daha önce olduğu gibi, o alanın CSS sınıfının ne olduğunu görmek için aşağı kaydırıp ‘Styles’ sekmesine gidebilirsiniz. Bu durumda, .content-area idi. İşte bunun kodu:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Yine, içerik alanınızın CSS kodunu bir metin düzenleyiciye kopyalayıp yapıştırabilir veya bir sonraki adım için bu sekmeyi açık tutabilirsiniz.

Kenar çubuğunuzun ve içerik alanınızın CSS sınıflarını bildiğimize göre, kenar çubuğunun tarafını değiştirmek için style.css tema dosyanızı düzenleyebiliriz.

Adım 2: Tema'nızın style.css Dosyasını Özelleştirin

Genellikle, stil.css dosyanızı doğrudan web barındırma sağlayıcınızın dosya yöneticisini veya FTP istemcisini kullanarak düzenlemeniz gerekir. Ancak, stil.css dosyası oldukça uzun olabilir ve bir hata yaparsanız, bu tüm web sitenizin tasarımını etkileyebilir ve kullanıcı deneyiminizi bozabilir.

Bu yüzden WPCode kullanmanızı öneririz. Tema dosyalarınızı doğrudan düzenlemeden özel CSS eklemenin en güvenli ve en kolay yolu olduğunu gördük.

Kod değişiklikleriniz istenmeyen hatalara neden olursa, tek bir tıklamayla devre dışı bırakabilir ve web siteniz normale döner.

Daha fazla bilgi edinmek için WPCode incelememize bakın.

Not: Bu eğitim için ücretsiz WPCode sürümünü kullanabilirsiniz, ancak premium plana yükseltme daha gelişmiş özelliklere erişmenizi sağlayacaktır. Daha fazla bilgi için tam WPCode incelememize göz atın.

Öncelikle WPCode'u WordPress'inize kurun. Adım adım talimatlara ihtiyacınız varsa, bir WordPress eklentisinin nasıl kurulacağına dair rehberimizi okuyun.

Tamamlandıktan sonra, Kod Parçacıkları » + Parçacık Ekle'ye gidin. Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğini belirleyin ve ‘+ Özel Parçacık Ekle’ düğmesine tıklayın.

Adding a new custom code snippet in WPCode

Şimdi, özel kodunuz için bir başlık yazın. Bu, ‘Kenar Çubuğu Yanını Değiştir’ gibi bir şey olabilir.

Ardından, Kod Türünü 'CSS Snippet' olarak değiştirin.

WPCode'da kenar çubuğu tarafını değiştirmek

Tamamlandığında, kenar çubuğunuzun ve içerik alanlarınızın CSS kod parçacıklarını Kod Önizleme kutusuna eklemeniz gerekir.

Bunları kolayca ayırt edebilmeniz için aralarına boş bir alan koyabilirsiniz, şöyle:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Şimdi bu CSS kodunu özelleştirelim. Yapmanız gereken, kenar çubuğu ve ana içerik alanlarının yerleşimini tanımlayan CSS özelliklerini değiştirmektir.

Bizim durumumuzda, bu CSS sınıfları float, margin, padding ve width özelliklerine sahiptir, ancak bu temanıza bağlı olarak farklı görünebilir.

Kenar çubuğu alanımız için, float ve margin özelliklerindesol'usağolarak değiştirdik. Bu, kenar çubuğu alanının orijinal olarak yerleştirildiği yönün tersinde olacağı anlamına gelir.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Bu bölümü tamamladık, içerik alanının yerleşimini değiştirelim. Bizim için işe yarayan, float: left'i float: right ve margin-rightmargin-left olarak değiştirmek oldu. Bu, WordPress'e içerik alanını sağ tarafa taşımasını söyler.

Ek olarak, position: relative ve right: 100% özellikleri ekledik. Bunlar, içerik alanımızın sağ taraftan çok uzağa gitmemesini sağlar.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Yine, temamız için çalışanlar sizinkilerle çalışmayabilir çünkü her temanın CSS sınıfları için farklı adları vardır ve farklı özellikler kullanır. Temanız için en iyi neyin işe yarayacağını anlamak için bu tam CSS referansını okumanızı öneririz.

Ek olarak, kenar çubuğu yerleşimini ayarlamak için kodda genişlik ve kenar boşluklarının yüzdeleriyle oynamaktan çekinmeyin.

Kod parçacığınızı değiştirdikten sonra, Ekleme bölümüne gidin. Ekleme Yöntemi'nin 'Otomatik Ekle' olduğundan emin olun.

Konum olarak, kodunuzun stil.css dosyanızdaki mevcut kodu geçersiz kılabilmesi için 'Site Geneli Altbilgi'yi seçin.

Şimdi, kodu ‘Aktif’ yapmak için sağ üst köşedeki geçiş düğmesine tıklayabilir ve ‘Snippet Kaydet’e tıklayabilirsiniz. Ardından, sonuçları görmek için web sitenizi önizleyin.

WPCode'da Site Geneli Altbilgi konumu seçme

Yukarıdaki ekran görüntülerine bakarsanız, demo web sitemizdeki kenar çubuğunun sağ tarafta olduğunu görebilirsiniz.

style.css dosyasındaki kodu düzenledikten sonra tema artık sol kenar çubuğuna sahip:

WordPress'te CSS kodu kullanarak kenar çubuğu tarafını başarıyla değiştirme

Kenar çubuğu tarafını değiştirdiğinize göre, daha fazla kenar çubuğu içeriği değiştirmeye veya eklemeye başlayabilirsiniz. İşte size yardımcı olacak bazı fikirler:

💡Profesyonel İpucu: Bazı modern temalar, float yerine Flexbox adlı bir CSS sistemi kullanır.

Denetleme aracını kullanırsanız ve içeriğinizi ve kenar çubuğunuzu tutan kapsayıcıda display: flex; gibi bir özellik bulursanız, kenar çubuğu tarafını değiştirmek için ona yalnızca flex-direction: row-reverse; ekleyebilmeniz mümkün olabilir.

Yöntem 3: Kenar Çubuğu Yanını FSE (Blok Temalar) ile Değiştirme

Blok tema kullanıyorsanız, WordPress yönetici panelinizde Widget'lar bölümünü göremezsiniz. Bu menü mevcut değilse kenar çubuğunun tarafını nasıl değiştireceğinizi merak ediyor olabilirsiniz.

Neyse ki, klasik temalar için olan sürece kıyasla işlem çok daha basittir. Bunun nedeni, blok temalarının Gutenberg bloklarını kullanması ve öğeleri tam site düzenleyiciyi (FSE) kullanarak konumlarını değiştirmek için sürükleyip bırakabilmenizdir.

İkinci olarak, blok temaları genellikle bir kenar çubuğu içeren bir şablona sahip olacaktır. Biz sadece bunu değiştirmemiz yeterli, bu şablonu kullanan her sayfa etkilenecektir. Erişmek için şablonun adını görmek üzere temanızın belgelerini kontrol edebilirsiniz.

Gösterim için, kenar çubuğu şablonuna sahip bir sayfaya sahip olan Twenty Twenty-Four temasını kullanacağız.

Öncelikle kontrol panelinizde Görünüm » Düzenleyici'ye gidin.

WordPress yönetim panelinden Tam Site Düzenleyici'yi seçme

Burada, blok temanızı özelleştirmek için bazı menüler göreceksiniz.

'Şablonlar'ı seçin.

FSE'de Şablonlar menüsünü seçme

Şimdi, düzenlemek istediğiniz kenar çubuğuna sahip şablonu bulun.

Twenty Twenty-Four'da bu 'Kenar Çubuklu Sayfa' ve 'Kenar Çubuklu Tek'tir. Temanıza bağlı olarak, şablonun adı açıkça kenar çubuğu olduğunu belirtmeyebilir, bu nedenle tekrar, temanızın belgelerini kontrol etmelisiniz.

Devam edin ve bu kenar çubuğu şablonunu seçin.

Tam site düzenleyicisinde kenar çubuğu olan sayfa şablonunu seçme

Genellikle, blok temaları kenar çubuğunu ve ana içerik alanını bir sütun bloğunda içerir. Bu, her şeyi düzenli, organize ve birbirinden güzel bir şekilde ayrılmış tutar.

Kenar çubuğu tarafını değiştirmek için, kenar çubuğunu oluşturan sütunu seçip etrafta hareket ettirmeniz yeterlidir.

Bunu yapmanın en kolay yolu, sayfanın sol tarafındaki 'Liste Görünümü' özelliğine tıklamaktır.

Ardından, genişletmek için 'Sütunlar' bloğuna tıklayın ve kenar çubuğu öğelerini içeren sütunu bulana kadar içeriğinin üzerine gelin.

Bizim durumumuzda, Twenty Twenty-Four temasının 'Sidebar' adında bir şablon parçasına sahip olması işe yaradı, bu yüzden onu tanımlamak kolaydı. Bununla birlikte, bazı temalar kenar çubuğunu oluşturan isimsiz, normal bir blok grubuna sahip olabilir.

Doğru sütunu seçtiğinizde, kenar çubuğu blok grubunun etrafında dikdörtgen bir vurgu ve bir araç çubuğu göründüğünde anlayacaksınız.

FSE'de Liste Görünümü özelliğini açma

Şimdi, kenar çubuğu sütununun araç çubuğunda, sütunun yerleşimini değiştirmek için kullanabileceğiniz oklar göreceksiniz.

Üzerine tıklayın ve Sütunlar bloğunun nasıl tasarlandığına bağlı olarak, doğru uyumu bulana kadar konumla oynamanız gerekebilir.

FSE'de kenar çubuğunda gezinme

Tema geliştiricisi, ana içerik alanı ile kenar çubuğu alanı arasında boşluk oluşturmak için bazı boş sütunlar eklemiş olabilir.

Silmek isterseniz, daha önce olduğu gibi Liste Görünümü özelliğini kullanarak doğru boş sütunu bulun. Ardından, blok araç çubuğunda üç noktalı menüye tıklayın ve 'Sil'i seçin.

FSE'de boş bir sütunu silme

Veya kenar çubuğu alanı ile içerik alanı arasında daha fazla boşluk bırakmak istiyorsanız, Blok ayarları sekmesini açıp 'Stiller' bölümüne geçebilirsiniz.

Ardından, 'Boyutlar' bölümünde, dolgu, kenar boşluğu veya blok aralığı kaydırıcısını sürükleyebilirsiniz.

FSE'de sütunların blok aralığını ayarlama

Bittiğinde, ‘Kaydet’e tıklayın.

Ardından, düzenlediğiniz şablonu kullanan tüm sayfaları mobil ve masaüstü olarak önizleyerek nasıl göründüğünü görebilirsiniz.

Kenar çubuğu tarafını FSE ile başarıyla değiştirmek

Şablonu düzenlediniz, ancak sayfalarınız veya gönderileriniz onu kullanmıyor mu?

Tek yapmanız gereken, sayfayı veya gönderiyi blok düzenleyicide açmaktır. Ardından, Gönderi ayarları panelinde, 'Şablon' alanındaki bağlantıya tıklayın ve 'Şablonu Değiştir'i seçin.

Blok düzenleyicide sayfa şablonunu değiştirme

Şimdi, kenar çubuğunu kullanan şablonu seçin.

Bundan sonra, sayfayı veya gönderiyi güncelleyebilirsiniz.

Blok düzenleyicide kenar çubuğu şablonunu seçme

Tam site veya blok düzenleyiciyi kullanmaya yönelik daha fazla ipucu ve püf noktası için bu kılavuzlara göz atın:

Yöntem 4: CSS Hero ile Kenar Çubuğu Yanını Değiştirme (Tüm Temalar)

Bir sonraki yöntem, görsel CSS düzenlemesi için en iyi WordPress eklentisi olan CSS Hero adlı ücretli bir eklenti kullanır. Bu eklenti, herhangi bir koda dokunmadan tema CSS'nizi özelleştirmeyi kolaylaştırır, bu da onu yeni başlayanlar için harika kılar.

Bu yöntem tüm temalarla da çalışır, bu nedenle önceki yöntemleri biraz sınırlayıcı bulursanız, bunun yerine bunu kullanabilirsiniz. Bununla birlikte, ücretsiz bir eklenti sürümü yoktur, bu nedenle ücretli bir plan satın almanız gerekir.

Eklenti ve fiyatlandırması hakkında daha fazla bilgi için CSS Hero incelememize göz atın.

Öncelikle eklentiyi bilgisayarınıza indirin ve WordPress web sitenize kurun. Adım adım talimatlar için, WordPress eklentisi nasıl kurulur konusundaki başlangıç kılavuzumuza göz atın.

Yüklendikten sonra, araç çubuğunda 'CSS Hero' menüsünü göreceksiniz. Görsel CSS düzenleyicisini açmak için tıklayın.

CSS Hero'yu WordPress'te açma

Unutmayın ki tüm WordPress temaları aynı şekilde çalışmadığı için, kenar çubuğunun tarafını değiştirmek için CSS Hero'yu kullanma şekliniz farklı olacaktır. Bu nedenle, sizin için neyin işe yaradığını görmek için platformla oynamanızı öneririz.

Bununla birlikte, kenar çubuğu tarafını sağdan sola değiştirmek için hangi ayarları özelleştirdiğimizi size göstereceğiz.

Öncelikle, sayfanızdaki kenar çubuğu alanına tıklayın. Kenar çubuğunuzdaki tüm öğeler bir grup olarak seçildiğinde ve etraflarında dikdörtgen bir vurgu olduğunda doğru olanı tıkladığınızı anlayacaksınız.

CSS Hero'da kenar çubuğu seçimi

Sayfanın sol tarafında, öğelerinizi özelleştirmek için bazı menüler göreceksiniz.

Deneyimlerimize göre, kenar çubuğu yerleşimini değiştirebilen ayarlar Konum, Ölçüler ve Boşluklardır.

CSS Hero'daki Konumlar, Ölçüler ve Boşluklar ayarları

Konum, kenar çubuğunun sayfadaki diğer öğelere göre nasıl yerleştirildiğini belirler. Burada, kenar çubuğunun nerede olması gerektiği konusunda size biraz özgürlük verecek olan 'Mutlak'ı seçebilirsiniz.

Buradan, kenar çubuğunu yerleştirmek için Üst, Sağ, Alt ve Sol pikselleri değiştirebilirsiniz.

CSS Hero ile kenar çubuğunun konum ayarlarını değiştirme

Artık kenar çubuğunun ve ana içerik alanının aynı tarafta olduğunu görebilirsiniz.

Bunu düzeltmek için ana içerik alanını oluşturan kapsayıcının üzerine gelip tıklayabilirsiniz.

CSS Hero'da ana içerik alanını seçme

Şimdi, sol taraftaki panelde, doğru uyumu bulana kadar Konum ayarlarını yapmanız yeterlidir.

Yaptığımız şey, konumu 'Göreli' olarak bırakıp Sağ piksel ayarlarını yapmaktı.

CSS Hero'da ana içerik alanının konum ayarlarını değiştirmek

Teknik olarak yapmanız gereken tek şey bu. Ancak kenar çubuğunun boyutunu ayarlamak istiyorsanız, kenar çubuğu alanını seçin ve 'Ölçüler' ayarlarına gidin.

Burada kenar çubuğunun genişliğini ve yüksekliğini değiştirebilirsiniz.

CSS Hero'da Ölçüler ayarlarını değiştirme

Kenar çubuğu alanı ile ana içerik alanı arasındaki boşluğu değiştirmek istiyorsanız, ‘Boşluklar’ bölümüne gidebilirsiniz.

Burada öğenin dolgu ve kenar boşluğunu ayarlamak için bazı kaydırıcılar göreceksiniz.

CSS Hero'da Boşluk Ayarlarını Değiştirme

Yine, kenar çubuğu yanını tam olarak istediğiniz gibi değiştirmek için bu eklentinin ayarlarını keşfetmenizi öneririz.

İşiniz bittiğinde, sayfanın sağ alt köşesindeki 'Kaydet' düğmesine tıklayabilirsiniz.

CSS Hero'da değişiklikleri kaydetme

Alternatif: WordPress Sayfa Oluşturucu Eklentisi ile Özel Kenar Çubukları Oluşturun

Şimdiye kadar, kenar çubuğu konumunu tüm web siteniz için değiştirme yöntemlerini inceledik. Peki ya yalnızca belirli sayfalar veya gönderi türleri için belirli kenar çubuklarına sahip olmak isterseniz? Sonuçta, her sayfanın aynı kenar çubuğu içeriğine ihtiyacı yoktur.

Örneğin, ana sayfanız daha genel bir sosyal medya simgeleri içeren kenar çubuğu ve bir eylem çağrısı ile fayda sağlayabilir. Ancak, bir ürün sayfası ilgili ürünleri veya müşteri incelemelerini sergileyen bir kenar çubuğu ile daha iyi olabilir.

Bu durumda, WordPress temanız için özel kenar çubukları oluşturmak isteyebilirsiniz. Özel kenar çubuklarıyla şunları yapabilirsiniz:

  • Belirli kenar çubuklarını farklı sayfalara veya gönderi türlerine atayın. Bu, kenar çubuğu içeriğini her sayfanın özel ihtiyaçlarına göre uyarlamanıza olanak tanır.
  • Daha dinamik ve ilgi çekici bir kullanıcı deneyimi oluşturun. Kenar çubuğunda ilgili içeriği sunarak ziyaretçileri web sitenizi daha fazla keşfetmeye istekli ve ilgili tutabilirsiniz.

İşte burada bir WordPress sayfa oluşturucu eklentisi işe yarar. Bu eklentiler, sürükle ve bırak işlevselliği ve kapsamlı şablon kütüphaneleri sunarak özel kenar çubukları oluşturmayı kolaylaştırır.

Popüler ve yeni başlayan dostu bir sayfa ve tema oluşturucu eklentisi olan SeedProd kullanmanızı öneririz. SeedProd ile kullanıcı dostu arayüzleri sayesinde özel sayfalar ve temalar kolayca tasarlayabilirsiniz.

Kullanmak İstediğiniz Blokları Doğrudan Kenar Çubuğuna Sürükleyin

Daha fazla bilgi için bu makalelere göz atabilirsiniz:

Alternatif olarak, Thrive Architect sayfa oluşturucuyu kullanabilirsiniz. Bu araç ayrıca tonlarca tema kiti ve açılış sayfası şablonuna sahiptir ve hatta yapışkan kayan bir kenar çubuğu widget'ı oluşturma özelliği sunar. Bu, kullanıcılar sayfayı aşağı kaydırdıkça kenar çubuğunuzu yapışkan tutmak için kullanışlıdır.

WordPress Kenar Çubukları Hakkında Sıkça Sorulan Sorular

İşte okuyucularımızın web sitelerindeki kenar çubukları hakkında sık sorduğu bazı sorular:

WordPress'te kenar çubuğu konumunu nasıl değiştiririm?

Kullanacağınız yöntem temanıza bağlıdır. Klasik temalar için, seçenek varsa Tema Özelleştirici'de konumu değiştirebilir veya özel CSS ekleyebilirsiniz. Modern blok temaları için, Kenar Çubuğu sütununu Tam Site Düzenleyicisi'nde diğer tarafa sürükleyip bırakmanız yeterlidir.

WordPress'te kenar çubuğu nasıl özelleştirilir?

Kenar çubuğunun içeriğini widget'lar veya bloklar kullanarak özelleştirebilirsiniz. Klasik bir temanız varsa, öğe eklemek veya kaldırmak için Görünüm » Widget'lar yolunu izleyin.

Bir blok teması kullanıyorsanız, Görünüm » Düzenleyici'ye gidin ve herhangi bir WordPress bloğu ekleyip kaldırarak kenar çubuğu şablon parçasını doğrudan düzenleyin.

WordPress'te sol ve sağ kenar çubuğu nasıl eklenir?

Hem sol hem de sağ kenar çubuğu eklemek, üç sütunlu bir düzeni destekleyen bir tema gerektirir.

Temanızda bu seçenek yerleşik olarak yoksa, özel bir üç sütunlu düzen oluşturmanın en kolay yolu, WordPress sayfa oluşturucu eklentisi gibi SeedProd veya Thrive Architect kullanmaktır.

WordPress'te kenar çubuğu genişliği nasıl değiştirilir?

Kenar çubuğu genişliğini değiştirmenin en güvenilir yolu özel CSS kullanmaktır. Kenar çubuğunuzun CSS seçicisini bulmak için tarayıcınızın İncele aracını kullanabilir ve ardından .sidebar { width: 30%; } gibi yeni bir genişlik kuralı ekleyebilirsiniz.

Alternatif olarak, CSS Hero gibi bir eklenti, kod kullanmadan genişliği görsel olarak ayarlamanıza olanak tanır.

Umarım bu WordPress eğitim rehberi, WordPress'te kenar çubuğu tarafının nasıl değiştirileceğini öğrenmenize yardımcı olmuştur. Ayrıca WordPress'te tam ekran duyarlı menü ekleme hakkındaki makalemizi ve maksimum sonuç elde etmek için en iyi WordPress kenar çubuğu hileleri listemizi de incelemek 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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklamanız durumunda komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve bize nasıl destek olabileceğinizi görün. İşte editöryal sürecimiz.

Nihai WordPress Araç Seti

Araç Kitimize ÜCRETSİZ erişim kazanın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Okuyucu Etkileşimleri

8 CommentsLeave a Reply

  1. Klasik'te kenar çubuğunu değiştirme ipucu için teşekkürler. Bana çok yardımcı oldu!!

  2. Çalışsaydı güzel olurdu. Kenar çubuğunu taşıdı ama sayfanın en altına attı.

    • Görünüşe göre özel temanızda çakışan CSS veya benzeri bir sorun olabilir. Tema desteğiyle iletişime geçerseniz yardımcı olabilirler.

      Yönetici

  3. wordpress'te yorum alanını sağdan sola nasıl taşınır
    önce yorum sonra gönderen tarihi ardından kategori

  4. Bu güzel bir makale, sağdan sola kaydırma burada işe yarıyor. Ayrıca bunun için yeni bir şablon oluşturmanızı da öneririm, biri kenar çubuğunu solda, diğeri ise kenar çubuğunu sağda gösterir. Bu, kullanıcılara sayfa için istenen tasarımı seçme seçeneği sunacaktır.

  5. Bu eğitim ne kadar iyi olsa da, birçok hatayla dolu olduğunu fark ettim. Örneğin, @media kuralı ile değiştirilmiş olan arasında hiçbir değişiklik yok. Lütfen makaledeki tüm kodları tekrar kontrol edin.
    Teşekkürler, yine de…

Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkürler. Lütfen tüm yorumların yorum politikamıza göre denetlendiğini ve e-posta adresinizin YAYINLANMAYACAĞINI unutmayın. Lütfen isim alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.