Bir WordPress bloguna özel CSS kodu eklemenin birden fazla yolu vardır.

Bugün size teklif ettiğim iki farklı yöntemin güçlü ve zayıf yönlerini açıklayacağım, böylece size en uygun olanı seçebileceksiniz.

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.

Özelleştirmek istediğiniz öğeleri nasıl bulabilirsiniz?

Bir kez izole ettikten sonra değiştirmek istediğiniz WordPress temanızı (örneğin bir makalenin başlığı), ihtiyacınız olacak CSS özelliklerini belirleme uygulayabilirsiniz, böylece uygun değişiklikleri yapabilirsiniz. Neyse ki, bu süreç karmaşık değildir.

CSS, hangi unsurların farklı spesifik değişikliklerle karşılaşacağını belirlemek için seçiciler kullanır. Genellikle, bu bir "belirterek yapılır sınıf "Bir öğenin (veya DOM öğesi). Bununla birlikte, CSS, tüm bir öğenin düzenini tanımlamak için de kullanılabilir (örneğin, "etiketi" ") veya etiketin tanımlayıcısını kullanarak.

Neyse ki, popüler tarayıcılar, sadece birkaç tıklama ile sayfa öğelerine uygulanan farklı seçicileri ve bildirimleri görmemize izin veriyor. Örneğin, Google Chrome'da, aşağıdaki örnekte olduğu gibi, belgenin belirli bir bölümünü vurgulamanız ve ardından sağ tıklamanız gerekir.

"Tıklayarak Elemanı incelemek Görüntülenen açılır menüde, sayfanın HTML kodunu, sağdaki pencerede incelenen öğe vurgulanmış olarak yeni bir pencerede görürsünüz (ya da aşağıdaki). Aşağıda bir örnek görebilirsiniz.

Bu unsurların metinleri (veya nitelikleri) Kırmızı ile vurgulanmış olarak, kodu inceleyerek vurguladığınız öğeye uygulanabilir farklı belirli stilleri gösterir.

Ayrıca Oku: Nasıl Visual Editor CSS ile bir açılır menü ekleme

Örneğin, " yazı Boyutu Vurgulanan öğede görüntülenen yazı tipinin 13 piksel boyutunda olduğunu söyler. Tanımlayıcılar parantezlerle çevrili ve seçicilerden önce gelir. İlgili stil sayfası dosyasının adı, seçicilerin hemen sağında görüntülenir.

Bu bilgiyi aklınıza getirdikten sonra, stili değiştirmek kolaylaşır. Örneğin, fontu 13px'ten 14px'e değiştirmek istiyorsanız, stil sayfanızda, vurgulanan öğeye karşılık gelen seçiciyi arayın. Genellikle bu biçimdedir: (« # .block-eklenti içerikli bilgiler"). Daha sonra özniteliklerin farklı değerlerini değiştirebilirsiniz.

Aynı şeyi Firefox’ta da yapabilirsiniz, sayfanın belirli bir bölümünü vurgulayın, öğeyi sağ tıklayın ve ardından " Elemanı incelemek Görünen menüde.

Nasıl WordPress ve CSS birlikte çalışarak

Şu bir gerçektir ki, WordPress temaları farklı yaratılmıştır. Bu yüzden unutmayın ki sizin WordPress tema aşağıdaki bölümlerde okuduklarınıza %100 uymayabilir.

Bununla birlikte, WordPress blogunuzda kullanılan CSS’nin "" adlı bir dosyada bulunması muhtemeldir. style.css ". Bu, yalnızca WordPress için değil, her tür web sitesi için bir stil sayfasının ortak adıdır.

Ayrıca bakınız: WordPress üzerine görüntüleri Gravatar boyutlandırmak için nasıl

Şimdi farklı düzenleme işlemlerinden geçmenin zamanı geldi.

Yöntem # 1: WordPress Temanızın Stil Dosyasını Düzenleme

Temanızın style.css dosyasına erişmenin iki yolu vardır.

İlki, WordPress panonuzdan yapmanız. Soldaki menüden "" menüsünü seçin. Apparence "Ve sonra" Yayımcı '.

Düzenleyici sayfasına girdiğinizde, sayfanın sağ tarafındaki dikey çubukta dosyaların bir listesini göreceksiniz. Dosya listesinde ilerleyin. "Adlı bir dosya göreceksiniz stil style.css Sayfanın en altında.

Bu dosyanın adına tıklarsanız, dosya ortadaki editörde yüklenecek ve görüntülenecektir. Dosyayı düzenlemek için bu ekranı kullanabilirsiniz.

Stil sayfasını bulmanın diğer yolu, barındırma sağlayıcınızın işletim sistemine göz atmak ve dosyayı WordPress tema (bir FTP istemcisi kullanarak). Tam konum, barındırma sağlayıcınıza bağlı olarak değişecektir. Aşağıda gösterilen örnekte, web sitesi adı (bizim durumumuzda thecare içinde) Public_html klasörünün altında bir klasör var.

WordPress kurulduğundan, wp-content klasörünü "bakım" içinde görebilirsiniz. Wp-content alt klasörü, " wp-temaları", tüm nerede WordPress temaları kurulur.

Bu web sitesinden " bizi bekleyenlere », Stil dosyası« style.css "Klasöründe bulunur Veli Haber '.

Yöntem 2: CSS'yi değiştirmek için bir eklenti kullanma

WordPress blogunuzun CSS'sini düzenlemenin belki de en uygun yolu bir eklenti kullanımı.

Bir eklenti kullanmanın temel avantajlarından biri, alt temalara benzer. Evet WordPress temasını güncellersiniz, tema dosyaları arasında değil ayrı olarak saklanacaklarından değişikliklerinizin üzerine yazılmayacaktır. Diğer bir avantaj, elbette, bir çocuk teması yaratmanıza gerek olmamasıdır.

Burada, CSS kodunuzu değiştirmek için de kullanabileceğiniz bazı premium eklentiler yer almaktadır. WordPress tema :

1. Sarı Kalem: Görsel CSS Stil Editörü

Yellow Pencil, web sitenizi dakikalar içinde (yazı tipleri, renkler, animasyonlar ve daha fazlası ...) kişiselleştirmek için herhangi bir temayla kullanabileceğiniz bir görsel stil editörüdür.

Ce WordPress Plugin premium, CSS stilleri oluşturacak fon Bir oyunmuş gibi renklerle oynarken, hem yeni başlayanlar hem de deneyimli kullanıcılar için tasarlandı.

Ayrıca bizim keşfetmek 5 eklentileri WordPress bildirimleri göstermek

Kodlama bilgisi gerekmez. Ancak WordPress Plugin kodlamayı sevenler için iyi bir CSS editörüne sahiptir. Bu düzenleyici ile canlı kod yazabilir ve CSS'nizi özelleştirebilirsiniz.

Indir | gösteri | Web hosting

2. Gutenberg için özel JS ve CSS

Le WordPress Plugin premium Özel JS ve CSS Gutenberg WordPress yazılarınız ve sayfalarınız için WYSIWYG düzenleyicisine sınırsız sayıda özel stil eklemenize izin verir. WordPress'in Gutenberg sürümü ile tamamen uyumludur.

Kullanımı kolay bir CSS editörü ile yeni bir stil oluşturabilirsiniz. Bu WordPress eklentisi özelliklerini genişletir özel alanlar dinamik ve güçlü bir kişiselleştirme modülü ile özel alanlarınızı değiştirebilmenizi sağlar. ve işlevselliği gerçek zamanlı önizleme Bu WordPress eklentisinin kullanımı çok rahat ve kullanıcı dostu.

Indir | gösteri | Web hosting

3. SiteOrigin CSS

Bu listede en çok seçeneği sunan WordPress eklentisidir. İkincisi ile ilgili en şaşırtıcı şey, ücretsiz olmasıdır. Bu WordPress eklentisi, özelleştiricide bulunamayan tek eklentidir.

Eklentiyi kurduktan ve etkinleştirdikten sonra, aşağıdaki konuma gitmeniz gerekir “ Görünüm> Özel CSS Eklentinin CSS sürümüne erişmek için. Bu sayfada, canlı önizleme sunmayan bir metin düzenleyici görebilirsiniz. 

Ayrıca bizim makalemizi okuyun. Web sitenizin satışını artırmak için 10 WordPress eklentileri

İkincisine erişmek için, düzenleyicinin hemen üzerinde, solda görünen iki düğmeden birine tıklamanız gerekir. Göz simgeli düğme, meraklıların takdir edeceği görsel bir CSS kod düzenleyici getirecektir. Uzantı okları olan simge, CSS kodlarının ustalık düzeyini ifade edecek bir metin düzenleyiciyi görüntüler.

Indir | gösteri | Web hosting

4. Basit Özel CSS

Basit Özel CSS en popüler eklentilerden biridir.

Ayrıca bizim keşfetmek Blogunuzu nasıl hızlı hale getirebilirsiniz: CSS ve JS dosyalarını yönetme.

100'den fazla kez kurulmuştur ve beş yıldızlı derecelendirme almıştır.

Indir | gösteri | Web hosting

5. Özel CSS ekleme WP

WP Özel CSS Ekle size izin veren bir eklentidir bir WordPress blogunun düzenini değiştirme bütün veya tek tek makaleler. Öğeleri özelleştirmede esneklik arıyorsanız, bu harika bir seçenektir.

Eklenti 10.000'den fazla kez indirildi ve şu anda 4,3 yıldız derecelendirmesine sahip.

Indir | gösteri | Web hosting

6. Tema Junkie Özel CSS

Değişikliklerinizin canlı bir önizlemesini sunan bir çözüm arıyorsanız, kullanmayı düşünebilirsiniz. Tema Junkie Özel CSS. 

Bu çözüm, gösterge tablonuza kendi stillerinizi ekleyebileceğiniz özel bir CSS yöneticisi ekler. Ayrıca, alt tema kullanma.

Indir | gösteri | Web hosting

Diğer önerilen kaynaklar

Ayrıca, web sitenizi ve blogunuzu daha iyi ele geçirmek ve kontrol altına almak için sizi aşağıdaki kaynaklara başvurmaya davet ediyoruz.

• 10 WordPress eklentileri sosyal ağlarda paylaşılıyor
• WordPress üzerine halkanın dışında özel alanları görüntülemek için nasıl
• 5 WordPress eklentileri, blogunuzu reklamlarla para kazanmak için
• Blogunuza içerik kazıyıcılar nasıl korursunuz

Sonuç

Buraya! Bu eğitim için bu kadar, umarım WordPress blogunuza 2 yöntemle özel CSS kodu eklemeyi başarırsınız. Yorumlar veya önerileriniz için, bunlar için ayrılan bölümde bize bildirmekten çekinmeyin.

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 ya da Divi: Tüm zamanların en iyi WordPress teması.

Bu makaleyi beğendiyseniztereddüt etme en sevdiğiniz sosyal ağlarda paylaşın. 

...