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 olacaktır. Ve birçok kişi tarafından sunulan birçok özelleştirme seçeneğine rağmen WordPress temaları günümüzde web sitenizi daha da benzersiz hale getirebilirsiniz.

Yöntemlerden biri vraiment WordPress temanızın görsel yönüne dokunmak için, 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ü onu gerçekten benzersiz kılmak için.

Bu eğitimde, web sitenizi CSS ile özelleştirmek, alt temalar oluşturmak ve özelleştirmek, yerleşik WordPress Özelleştirici eklentileri ve WordPress eklentileri CSS'nin.

Ama başlamadan önce, bakmak için zaman ayırın Bir WordPress tema nasıl kurulurKaç eklentileri WordPress yüklemeniz gerekir.

Sonra birlikte listemizi öğrenin.

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.

WordPress web sitenizin CSS’ini kişiselleştirme

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

en WordPress temaları adlı bir dosyada bulunan bir CSS kodunu kullanın 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 nasıl yapılacağını daha iyi anladığınıza göre WordPress temaları bunları kullanın, WordPress blogunuzu özelleştirmek için kullanabileceğiniz seçeneklere göz atacağız ve her yöntemin artılarını ve eksilerini tartışacağız.

css web sitesi wordpress 1 nasıl özelleştirilir

Ç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.

keşfedin Ne zaman ve nasıl bir alt WordPress yüklemek için

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.

css web sitesi wordpress nasıl özelleştirilir 1 1

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.

WordPress stil

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.

css web sitesi wordpress 2 nasıl özelleştirilir

İlk önce sayfaya gitmeniz gerekiyor Temalar »Özelleştirin.

Temayı özelleştirmek için WordPress özelleştiricisine erişim

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.

ek css kodunu girin ve yayınlayın

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.

jetpack-form eklentisi

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.

Tek özel css

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.

CSS Kahraman WordPress

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.

Öğrenmek Yorumlar bir makaleden diğerine WordPress'te nasıl taşınır

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:

  1. Bir çocuk teması.
  2. Özelleştirici.
  3. CSS eklentisi.

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. 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.

Reklamcılık WordPress eklentisi ekleme

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.

Artı gibi eklentileri ile uyumlu olduğundan WPBakery et Slider Devrimi, reklamlarınızı kaydırıcı şeklinde görüntüleyebilir veya web sitenizin herhangi bir yerine yerleştirebilirsiniz.

Indir | gösteri | Web hosting

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. Biridir WordPress eklentileri CodeCanyon'daki en güçlü dosya yöneticisi. Klasörleri manuel olarak oluşturmanıza bile gerek kalmayacak.

WP Media Dosya Yöneticisi WordPress Ortam Kitaplığı Klasörleri Kategorileri Yükleme Eklentisi

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.

Indir | gösteri | Web hosting

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.

Hero Menu Responsive WordPress Mega Menü Eklentisi

Ö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.

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. 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

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.

...