WordPress web sitenizin CSS'si nasıl özelleştirilir? Bu makalede öğrenin.
Web siteniz için hangi WordPress temasını seçerseniz seçin, onu kullanacak başka web siteleri de olacaktır. Ve bugünlerde birçok WordPress temasının sunduğu birçok özelleştirme seçeneğine rağmen, web sitenizi daha da benzersiz hale getirebilirsiniz.
Yöntemlerden biri vraiment WordPress temanızın görsel yönüne dokunduğunuzda, bir WordPress temasının seçenekleri veya ayarları tarafından sunulan standart özelleştirmenin ötesine geçmelisiniz. WordPress blogunuzun CSS özelleştirmesi, web sitenizin görünümünü gerçekten benzersiz kılmak için değiştirmenize olanak tanır.
Bu eğitimde, web sitenizi CSS ile kişiselleştirmek, alt temalar oluşturmak ve kişiselleştirmek, WordPress kişiselleştirici eklentileri ve CSS WordPress eklentileri kullanmak için kullanılabilecek çeşitli yöntemler incelenecektir.
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.
CSS: Temel bilgiler ve WordPress'in bunları nasıl kullandığı
Her şeyden önce: CSS, Cascading Style SheetsKısaltmadan daha net olmayan. Öyleyse, onu parçalayalım.
Stil sayfası, stilleri tanımlayan bir belgedir (gibi yazı tipi, renk, vs..) başka bir belgenin sunumu için kullanılacak. Bizim durumumuzda, web sayfalarının bir stiliyle uğraşıyoruz.
BölümBasamaklıİsmi onu gerçekten güçlü kılan şeyin bir parçası. Web sayfaları, alt sayfadaki stilleri daha yüksek bir seviyeden ekleyerek veya değiştirerek, basamaklı bir şelale gibi birden çok stil sayfasıyla tasarlanabilir. Bu önemlidir, çünkü stillerinizi ekleme şekliniz orijinal değişikliklerin üzerine yazacaktır.
Göründüğü kadar basit, CSS bir web sayfasındaki hemen hemen her şeyi değiştirmek için kullanılabilir (düzen, renkler, yazı tipleri ve hatta animasyonlar dahil).
Keşfeterek bildirimlerinizi nasıl yöneteceğinizi öğrenin WordPress e-posta bildirimlerini nasıl yönetilir
Çoğu WordPress teması, adlı bir dosyada bulunan CSS kodunu kullanır. style.css. Bu dosyayı açarsanız, WordPress temanız için bir stil kuralları listesi göreceksiniz. Ne yaparsan yap bu dosyayı değiştirmeyin! Güncellemeler değişikliklerin üzerine yazacak.
Eklemenin birkaç yolu vardır. özel CSS kodu WordPress temanıza ekleyin, böylece değişiklikleriniz WordPress temasının bir güncellemesinden kurtulur.
WordPress web sitenizi CSS ile nasıl özelleştirebilirsiniz?
Artık CSS'nin ne olduğunu ve WordPress temalarının bunları nasıl kullandığını daha iyi anladığınıza göre, WordPress blogunuzu özelleştirmek için kullanabileceğiniz seçeneklere bir göz atacağız ve artılarını ve eksilerini tartışacağız. her yöntem.
Çalışmamızın sonunda, WordPress temanıza hangi yöntemin karşılık geldiğini belirleyebileceksiniz.
Seçenek # 1: Bir alt tema kullanarak CSS'yi özelleştirin
Eğer kullanıyorsanız un çocuk teması CSS kodunuzu özelleştirmek için, daha önce bahsettiğimiz temalarda yapılan güncellemeler artık sorun olmayacak. WordPress temasının güncellenmesi temayı etkileyecektir "ebeveyn», Alt temanızdaki değişiklikleri olduğu gibi bırakmak. Birçok WordPress tema geliştiricisi, bir çocuk temasının faydasını anlar.
Bir çocuk teması oluşturmak oldukça basittir. Web barındırıcınızda bir dosya içeren bir klasör oluşturmaktan oluşur. style.css ana temayı şablon olarak listeleyen ve dosyayı içe aktarılan style.css ana temanın ('Basamaklı' stil sayfalarının anlamını hatırlıyor musunuz?).
kodeks WordPress alt temalar oluşturma konusunda daha fazla bilgi var.
Alt temanızı oluşturduktan ve uygun şekilde etkinleştirdikten sonra, WordPress temanızı özelleştirmeye başlayabilirsiniz. En hızlı yol dosyanızı düzenlemektir style.css, iki şekilde erişilebilir.
Keşfetmek için bu makaleye göz atın CSS, HTML ve Javascript dosyalarınızı nasıl sıkıştırabilirim?
Birincisi, WordPress panosundaki düzenleyiciyi tıklayarak kullanmaktır. Görünüm> Düzenleyici. L 'yayımcı Temada bulunan sağdaki dosyaların listesini görüntüler (Yalnızca popüler dosyalar görüntülenir). Dosyan style.css listenin en altında olacak ve seçeneği tıklayarak Stil senin dosya style.css şarj edecek.
Değişikliklerinizi bu konuma ekleyebilir ve değişikliği kaydedebilirsiniz.
Dosyanıza erişmenin diğer yolu style.css (tek önerdiğimiz) web barındırma içindeki dosyalara göz atmaktır. FTP istemcisi veya bir dosya yöneticisi. Oluşturduğunuz alt tema klasörü " wp-content> temalar« . Dosyayı düzenlemek için bir metin düzenleyici kullanabileceksiniz style.css.
Seçenek n ° 2: CSS'yi Özelleştiriciden Özelleştirme
WordPress 4.7'den itibaren, kullanıcılar doğrudan WordPress yönetici alanından özel CSS ekleyebilir. Bu son derece kolaydır ve değişikliklerinizi gerçek zamanlı önizleme ile görebilirsiniz.
İlk önce sayfaya gitmeniz gerekiyor Temalar »Özelleştirin.
Bu, WordPress tema özelleştirme arayüzünü başlatacak.
Sol bölmede bir dizi seçenek ile sağda web sitenizin gerçek zamanlı önizlemesini göreceksiniz. Sekmeye tıklayın Ek CSS sol bölmede.
Sekme, size özel CSS'nizi ekleyebileceğiniz basit bir alan gösterecek. Geçerli bir CSS kuralı eklediğiniz anda, web sitenizin gerçek zamanlı önizleme bölmesinde uygulandığını görebileceksiniz.
Web sitenizde nasıl göründüğünden memnun olana kadar özel CSS kodu eklemeye devam edebilirsiniz. " Kaydet ve Yayınla İşin bittiğinde en tepede.
Not: Özelleştiriciyi kullanarak eklediğiniz herhangi bir özel CSS, yalnızca o belirli WordPress temasıyla kullanılabilir. Diğer temalarla kullanmak istiyorsanız, aynı yöntemi kullanarak yeni temanıza kopyalayıp yapıştırmanız gerekecektir.
Seçenek # 3: Bir eklenti kullanarak CSS'yi özelleştirin
CSS özelleştirmesi için bir eklenti kullanmanın avantajı, bir WordPress tema değişikliği yapsanız bile eklentiyi korumanızdır. Stiller tüm WordPress temalarında iyi görüntülenemediğinden, bunun kendi değiş tokuşları vardır.
İşte bazı eklentileri şunlardır:
1. Jetpack'te Özel CSS (Ücretsiz)
WordPress eklentisi jetpack bir milyondan fazla WordPress web sitesinde yüklüdür ve muhtemelen sizin de. Mevcut özellikleri getiriyor WordPress.com kendi kendine barındırılan web siteleri için CSS özelleştirme için modül.
Modül Jetpack kontrol panelinde etkinleştirildikten sonra, bir alt tema oluşturmadan WordPress temanızı özelleştirmenize olanak tanıyan özel bir CSS düzenleyici mevcut olacaktır. Editöre bu yolu izleyerek erişirsiniz " Görünüm> CSS'yi Düzenle« .
2. Basit Özel CSS (Ücretsiz)
Eğer tek başına bir seçenek istiyorsanız Bunun yerine, Basit Özel CSS iyi bir seçimdir. 200.000'ten daha fazla web sitesinde kullanılan ve 4,9 yıldız derecesine sahip bu ücretsiz eklenti, kesinlikle CSS WordPress blogunuzu kişiselleştirmenize yardımcı olacaktır.
Bu eklenti herhangi bir yapılandırma gerektirmez, sadece eklentiyi kurmanız ve etkinleştirmeniz gerekir. CSS kodunuzu değiştirmek için " Görünüm> Özel CSS« WordPress kontrol panelinde. CSS değişikliklerinizi metin kutusuna uygulayın ve tamamlandığında ayarlarınızı kaydedin.
3. CSS Hero (yıllık 14 $ 'dan itibaren)
Bugün baktığımız WordPress eklentisinin son seçeneği, adlı premium bir WordPress eklentisidir. CSS Kahraman. Itibaren 14 $ yıllık Bir web sitesi için, bu eklenti, WordPress temanızı sezgisel bir arayüz kullanarak özelleştirmenize olanak sağlar.
En iyi şekilde çalışmak üzere tasarlandı onlarca uyumlu WordPress teması CSS Hero, WordPress temanızın tüm unsurları üzerinde tam kontrol sağlar. Listesinde olmayan temalar için Roket moda CSS Hero özelleştirmesini etkinleştirmek için
CSS Hero, bir arayüz aracılığıyla kodla etkileşimi basitleştirerek CSS sözdizimini anlama ihtiyacını ortadan kaldırır ve bu, animasyonlar ve geçişler için geçerlidir. Ayrıca değişikliklerinizi gerçek zamanlı olarak önizleyebilir ve önceki bir sürüme geri dönebilirsiniz.
WordPress blogunuzun CSS'sini tamamen değiştirmek istiyor ancak CSS öğrenmek istemiyorsanız, özellikle WordPress temalarından birini kullanıyorsanız, CSS Hero web sitenizi özelleştirmek için harika bir seçenektir.
İçeriğin önemli olduğunu bilseniz de, popüler bir WordPress teması kullanıyor olsanız bile web sitenizin diğerlerinden farklı olmasını isteyeceksiniz. CSS ile web sitenizin tasarımını tamamen benzersiz olacak şekilde özelleştirebilirsiniz.
Keşfeterek daha ileri gidin Kullanıcıların belirli sayfaları düzenlemesine izin nasıl
Dolayısıyla, WordPress temanızın CSS'sini özelleştirmenin birkaç yolu vardır:
- Bir çocuk teması.
- Özelleştirici.
- CSS eklentisi.
Ayrıca bazı premium WordPress eklentilerini keşfedin
Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.
Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.
1. Reklam Eklemek
WP PRO Reklamcılık Sistemi, web sitenizde reklam göstermenize yardımcı olmak için 18 stratejik konumlar sunan bir WordPress reklam yönetimi eklentisidir. Ayrıca, her bir reklamın performansını göreceğiniz ayrıntılı bir istatistik bölümüne de sahiptir.
Bu özellik, kampanyanızı geliştirmenize ve karınızı en üst düzeye çıkarmanıza yardımcı olacağı için çok önemlidir. Bu WordPress Adsense eklentisi, arka plan reklamları adı verilen benzersiz bir özellikle birlikte gelir. İçeriğinizin arka planı olarak reklam görüntülemenizi sağlar.
2. WP Ortam Dosyası Yöneticisi
WP Media File Manager, Sürükle ve Bırak işlevini kullanarak medya kitaplığını bir hiyerarşi biçiminde düzenlemeyi kolaylaştıran bir WordPress eklentisidir. CodeCanyon'daki en güçlü WordPress dosya yöneticisi eklentilerinden biridir. El ile klasör oluşturmanıza bile gerek kalmayacak.
Bu WordPress eklentisi, kaynak klasörün hiyerarşisini otomatik olarak kopyalayarak PC'nizin dosya yöneticisinden web sitesine binlerce dosya yüklemenizi sağlar. Aynı dosyanın farklı klasörlerde olmasını istiyorsanız, artık bu işlevi sağlayan gerçek bir medya kitaplığınız olduğunu bilin.
Belirli dosya türlerini indirme sorunlarına veda edin, şimdi sadece bu WordPress eklentisini yüklemeniz ve dosyalarınızı yönetmenize yardımcı olmasına izin vermeniz gerekiyor.
3. Menü Kahraman
Hero Menu, mega menü WordPress eklentisidir. Ve çok fazla kahramanca olmasa da, sadece 19 $ 'a gerekli tüm özelliklere sahip. Biraz Mega Ana Menü gibi, CodeCanyon'da yer alan ürünleri de içeren bir eklenti ve şu anda kredisine yaklaşık 4500 satış var.
Özellikler bölümünde, hızlı bir şekilde oluşturmanın oldukça kolay olduğunu anlayacaksınız. megamenu. İşlem sadece birkaç adım alır. Ancak ek olarak, eklentinin uyumlu olduğunu fark edeceksiniz. WooCommerce, duyarlı bir tasarım ve menüleri oluşturmak için "sürükle ve bırak" arayüzü sunar.
Menü oluşturucu, eklentinin kullanımını iyileştirir ve alıcının işini büyük ölçüde basitleştirir. UI entegrasyonu da harika bir iştir ve UI diğer eklentilerle mükemmel bir şekilde çalışır.
Önerilen Kaynaklar
Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.
- WordPress sayfaların güzel geçişler oluşturmak için nasıl
- WordPress REST API'si nasıl kullanılır?
- WordPress web sitenizi Telegram ile nasıl ilişkilendirirsiniz
- WordPress birkaç adımda nasıl temizlenir
Sonuç
Orada! Bu eğitim için bu kadar. Bu eğitimin size WordPress web sitenizin CSS'sini nasıl özelleştireceğinizi göstermesini umuyoruz. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın.
Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.
...