Son zamanlarda okuyucularımızdan biri bize bir WordPress temasının kenar çubuğu tarafını nasıl değiştireceğimizi sordu?

Bu soruyu genellikle kenar çubuğunun konumunu soldan sağa veya sağdan sola değiştirmek isteyen kullanıcılardan alırız.

Bu derste, WordPress'te kenar çubuğunun konumunu nasıl değiştireceğinizi göstereceğiz.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

WordPress e1568058176266'da kenar çubuğunun konumu nasıl değiştirilir

WordPress'de kenar çubuğunun konumunu neden değiştirmelisiniz?

Kullanılabilirlik uzmanları, insanların sayfaları soldan sağa taradığına inanıyor. Kullanıcıların önce bu içeriği görmesi için önemli içeriği sola koymanızı önerirler. Ancak, web siteniz bir RTL dilindeyse bu tersine çevrilebilir (solda).

Eğer öğrenmek WordPress blogunuzda kenar çubukları varsa

Birçok WordPress web sitesi, iki sütunlu tipik blog düzenini kullanır. Biri içerik için, diğeri kenar çubuğu için.

tipik içerik demosu WordPress kenar çubuğu

Web sitelerinde yeniyseniz, tercih ettiğiniz konumda kenar çubuğu olan bir WordPress teması seçmelisiniz.

çok WordPress temaları kenar çubuğu ayarlarında kenar çubuğu tarafını değiştirme seçenekleri sunar. Ancak, WordPress temanız bu seçeneğe sahip değilse, kenar çubuğu tarafını manuel olarak değiştirmeniz gerekecektir. Keşfederek daha ileri gidin WordPress'te kenar çubuğu nasıl kaldırılır

Bununla birlikte, CSS kullanarak WordPress'in kenar çubuğu tarafını kolayca değiştirmek için kullanmanız gereken yönteme bir göz atalım.

Kenar çubuğunu CSS ile değiştirme

WordPress temanızda herhangi bir değişiklik yapmadan önce, öncelikle alt tema oluşturma. Bir alt tema kullanarak, ana temanızı yaptığınız değişiklikleri kaybetmeden güncelleyebilirsiniz.

keşfedin WordPress üzerine her öğe için farklı bir kenar çubuğu görüntülemek için nasıl

İkinci olarak, aktif temanızda gerçek zamanlı değişiklikler yaparken, her zaman WordPress web sitenizin bir yedeğini oluşturmalısınız.

WordPress tema dosyalarını düzenlemek için bir FTP istemcisine ihtiyacınız olacak. Danışın FTP nasıl kullanılacağı hakkında rehberlik.

FTP istemcisini kullanarak WordPress web sitenize giriş yapın ve tema klasörüne gidin. Genellikle yer almaktadır:

 / Siteniz / wp-content / themes / your-tema-klasör / 

Artık WordPress temanızın ana stil sayfası dosyasını Not Defteri gibi bir metin düzenleyicide indirip açmanız gerekiyor. Bu dosyanın adı style.cssve WordPress temanızın kök dizininde bulunur.

keşfedin WordPress dosya ve klasörlerini yönetme

Bu dosyada, kenar çubuğunuzun CSS sınıfını bulun. Genellikle bu sınıf " kenar çubuğu ". Bu örnekte, varsayılan WordPress temasını kullanıyoruz " yirmi onbeş Kenar çubuğu için bu sınıfa kim sahip:

.sidebar {float: left; marj-sağ:% -100; maksimum genişlik: 413px; pozisyon: göreceli; genişlik:% 29.4118; }

Gördüğünüz gibi kenar çubuğu% -100 marjı ile sola doğru yüzer. Şamandırayı sağa değiştireceğiz:

.sidebar {float: sağ; sol kenar boşluğu:% -100; maksimum genişlik: 413px; pozisyon: göreceli; genişlik:% 29.4118; }

Değişikliklerinizi kaydedin ve style.css dosyasını bir FTP istemcisi kullanarak web sitenize yükleyin. Şimdi, web sitenizi ziyaret ederseniz, şöyle görünecek:

demo sitesi kenar çubuğunu değiştirmek

Aslında, kenar çubuğunu taşıdık, ancak içerik alanını taşımadık. " yirmi Onbeş İçerik alanının konumunu tanımlamak için bu CSS'yi kullanır.

.site-content {display: block; şamandıra: sol; sol kenar boşluğu:% 29.4118; genişlik:% 70.5882; }

İçeriği sağa taşımak için değiştireceğiz. Aşağıdaki gibi:

.site-content {display: block; şamandıra: sol; sağ kenar boşluğu:% 29.4118; genişlik:% 70.5882; }

İşte bu CSS kodunu uyguladıktan sonra web sitenizin nasıl görüneceği.

yeni sunum kenar çubuğu web sitesini taşıdı

Gördüğünüz gibi içerik alanının ve kenar çubuğunun konumunu değiştirdik. Ancak, solda hala beyaz bir blok var.

Keşfeterek daha ileri gidin WordPress dosya ve klasörlerini yönetme

CSS ile çalışırken sık sık bu hatalarla karşılaşırsınız. Buna neyin neden olduğunu ve nasıl düzeltileceğini anlamak biraz dedektiflik gerektirecektir.

Kaynak koduna bakmak için tarayıcınızın "İnceleme" aracını kullanın. Farenizi tarayıcıda etkilenen bölgenin üzerine getirin, sağ tıklayın ve tarayıcı menüsünden "Denetleyici" yi seçin.

tarayıcı aleti kontrol

Farenizi kaynak kod görünümünün etrafında hareket ettirdiğinizde, canlı önizlemede vurgulanmış olarak etkilediği alanları fark edeceksiniz. Sağ bölmede, seçilen öğe için kullanılan CSS'yi görebileceksiniz.

Bizim keşfedin 5 WordPress eklentileri, blogunuzda CSS’yi görsel olarak düzenlemek için

Bu nedenle, vurgulanan öğeye karşılık gelen CSS yeniden ayarlanmalıdır.

@ media screen ve (min-width: 59.6875em) {body: before {background-color: #fff; kutu gölgesi: 0 0 1px rgba (0, 0, 0, 0.15); içerik: ""; ekran: blok; yükseklik:% 100; min. yükseklik:% 100; pozisyon: sabit; üst: 0; solda: 0; genişlik:% 29.4118; z-endeksi: 0; / * Safari’de kaydırma ile yanıp sönen hatayı düzeltti * /}

Bu CSS kodu, sol üste boş bir% 29,4118 genişlik ve% 100 bir genişlik ekler. İşte onu sağa doğru nasıl hareket ettireceğimiz.

@ media screen ve (min-width: 59.6875em) {body: before {background-color: #fff; kutu gölgesi: 0 0 1px rgba (0, 0, 0, 0.15); içerik: ""; ekran: blok; yükseklik:% 100; min. yükseklik:% 100; pozisyon: sabit; üst: 0; sağ: 0; genişlik:% 29.4118; z-endeksi: 0; / * Safari’de kaydırma ile yanıp sönen hatayı düzeltti * /}

Stil sayfasını kaydettikten ve sunucuya yükledikten sonra, web siteniz böyle görünecektir.

Sağdaki yeni görünüm web kenar çubuğu

CSS ile çalışmak yeni başlayanlar için kafa karıştırıcı olabilir. Tüm manuel işleri yapmak istemiyorsanız, o zaman WordPress CSS Kahraman eklentisi. Kod yazmadan CSS'yi düzenlemenizi sağlar ve her WordPress temasıyla çalışır.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Zxeion

Zxeion güçlü bir WordPress Plugin web sitenizin güvenliğini artırmaktan sorumlu premium. Bu eklenti, web sitenizi olası saldırılara karşı koruyacak bir koruma ve güvenlik araçları koleksiyonu içerir.Zxeion wordpress eklentileri, siteyi kötü amaçlı yazılım virüs saldırılarına karşı korur

Gerçek zamanlı koruma sistemi, web sitenize yönelik tehditleri belirlemenize ve hiçbir şey yapmanıza gerek kalmadan onları engellemenize yardımcı olur.

Ayrıca bizim keşfetmek WordPress'te kenar çubuklarınızı artırmak için 7 eklenti

Özellikleri şunlardır: gerçek zamanlı koruma, mükemmel müşteri desteği, düzenli güncellemeler, IP adresi engelleyici, mükemmel belgeler, modern ve profesyonel arayüz, özel müşteri desteği ve diğerleri

Indir | gösteri | Web hosting

2. Slaido 

Slaido bir WordPress Plugin Yaklaşık 320 duyarlı kaydırıcı şablonu arasından seçim yapmanıza ve bunlardan birini yalnızca birkaç tıklamayla web sitenize aktarmanıza olanak tanıyan premium. için mükemmel bir şablon paketidir. Slider Devrimi. Yani bunu tam olarak kullanabilmek için önce onu yüklemeniz gerekecek WordPress PluginKaydırıcı devrimi wordpress için Slaido şablon paketi

Başlıca özellikleri şunlardır: kaydırıcılarının duyarlı bir düzeni, kaydırıcıları içe veya dışa aktarmanın kolaylığı, düzenli güncellemeler, 24/7 mevcut müşteri desteği, akıcı ve çok havalı animasyonlar, hızlı bir başlangıç ​​için video eğitimleri, Google Yazı Tipleri desteği ve çok daha fazlası.

Indir | gösteri | Web hosting

3. Bize Ulaşın Formu

Bize Ulaşın Formu, birinci sınıf bir duyarlı WordPress eklentisi ve basit bir araçtır, ancak ziyaretçilerinizin mesajlarını bırakarak sizinle iletişime geçebilecekleri açık ve cesaret verici bir form görüntülemenize olanak tanıyan zengin kişiselleştirme seçenekleri sunar.

İletişim formu wordpress iletişim formu eklentisi

Gerekli alanları tanımlayabilir, alanların en iyi düzenini seçebilir ve müşterilerinizi veya ziyaretçilerinizi önerilerini veya iletilerini bırakmaya teşvik etmek için tamamen özelleştirebilirsiniz.

Ayrıca sizi okumaya davet ediyoruz: Bir restoran web sitesi oluşturmak ve yönetmek için 10 WordPress eklentileri

İletileri almak istediğiniz e-posta adresini ayarlayın ve işletmenizi en karlı şekilde büyütmek için kullanın.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Orada! Bu eğitim için bu kadar. WordPress blogunuzun kenar çubuğu tarafını değiştirmenize yardımcı olacağını umuyoruz. çekinmeyin Bu makaleyi arkadaşlarınızla en sevdiğiniz sosyal ağlarda paylaşın

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

...