Ana İçeriğe Geç

WordPress Blogunuza Özel CSS Ekleme

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]

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 öğelerin çeşitli belirli değişikliklere uğrayacağını belirlemek için seçiciler kullanır. Genellikle bu, bir “belirtilerek yapılır.sınıf”Bir elementin (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.

blogpascher-teftiş

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

blogpascher-logo

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, " öğesiyazı Boyutu”Vurgulanan öğede görüntülenen yazı tipinin 13 piksel boyutunda olduğunu söyler. Tanımlayıcılar küme parantezleri ile çevrilidir ve önlerinde seçiciler bulunur. İlgili stil sayfası dosyasının adı, seçicilerin hemen sağında görüntülenir.

Bu bilgiyi aklınızda bulundurduğunuzda, stili değiştirmek kolaylaşır. Örneğin, yazı tipini 13 pikselden 14 piksele değiştirmek isterseniz, vurgulanan öğeninkiyle eşleşen seçici olan stil sayfası dosyanızı bulmanız yeterlidir. Genellikle şöyle görünür: (“# .block-eklenti içerikli bilgiler"). Daha sonra niteliklerin 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

WordPress temalarının farklı şekilde oluşturulduğu bir gerçek. Bu nedenle, WordPress temanızın aşağıdaki bölümlerde okuduklarınızla% 100 uyumlu olmayabileceğini unutmayın.

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.

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]

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

Menü-yazı işleri resim kenara

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.

Menü-wordpress-yazı işleri kodu

Stil sayfasını bulmanın diğer yolu, barındırma sağlayıcınızın işletim sisteminde gezinmek ve dosyayı WordPress temasının klasöründe (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 sitesinin adı (bizim durumumuzda thecare içinde) Public_html klasörünün altında bir klasör var.

WordPress kurulu olduğu için wp-content klasörünü “thecare” içerisinde görebilirsiniz. wp-content alt klasörü, “adlı başka bir klasördür.wp-temaları“, Tüm WordPress temalarının kurulu olduğu yer.

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

Bülten ebeveyn-klasör-800x401

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.

WordPress temanızın CSS kodunu değiştirmek için de kullanabileceğiniz bazı premium eklentiler:

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.YellowPencil Görsel CSS Stil Editörü wordpress eklentisi

Bu premium WordPress eklentisi, 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. Bununla birlikte, WordPress eklentisinin kodlamayı sevenler için iyi bir CSS editörü vardır. Bu düzenleyiciyle canlı kod yazabilir ve CSS'nizi özelleştirebilirsiniz.

Indir | gösteri | Web hosting

2. Gutenberg için özel JS ve CSS

Premium WordPress eklentisi Custom 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.

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]

Gutenberg WordPress eklentisi için özel JS ve CSS

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.

SiteOrigin CSS - WordPress eklentisi

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.

Simple Custom CSS - WordPress eklentisi WordPress.org

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.

wp-eklenti özel

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

tema-esrarkeş-css

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

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.

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

...  

Bu makalede, 1 yorumunu içeren

  1. Sitenizdeki tüm farklı makaleler için çok teşekkür ederiz !! Benim gibi yeni başlayanlar için her zaman çok açık ve anlaşılır… Sanırım çok sık geri geleceğim !!

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