Ana İçeriğe Geç

WordPress web sitenizin CSS’ini kişiselleştirme

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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.

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

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

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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 istiyorsanız, ancak CSS öğrenmek istemiyorsanız, CSS Hero, özellikle WordPress temalarından birini kullanıyorsanız, web sitenizi özelleştirmek için mükemmel 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  

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.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. CodeCanyon'daki en güçlü WordPress dosya yöneticisi eklentilerinden biridir. El ile klasör 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

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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

... 

Bu makalede, 1 yorumunu içeren

  1. Bonjour

    Size, herhangi bir WordPress sayfasından CSS veya SCSS ve Javascript'in tam olarak düzenlenmesine izin veren ve yapılan değişikliklerin canlı bir görüntüsünü sunan Anym Live Editor eklentisini tanıtmak istiyorum! Ek olarak, eklenti, değiştirmek istediğiniz sayfayla etkileşim kurmanıza olanak tanıyan çeşitli araçlarla donatılmıştır ve sıradan bir IDE (Sublime metin stili) gibi çalışır, ancak bu sefer sitenize adanmıştır. WordPress.

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse2
cıvıltı
Enregistrer2