WordPress Web Sitenizi CSS ile Nasıl Özelleştirirsiniz: 3 Kolay Yöntem

WordPress yıllar içinde gelişti ve bugün oldukça esnek ve blok düzenleyicisi Gutenberg aracılığıyla özelleştirmesi kolay bir platform. Yine de, Gutenberg editörünün sağladığından biraz daha fazla erişime ihtiyaç duyduğunuz zamanlar olacaktır.

Özel CSS'nin kullanışlı olduğu yer burasıdır. CSS stili, WordPress web sitenizin renklerini, boşluklarını, yazı tiplerini, düzenlerini ve temelde diğer tüm görsel öğelerini düzenlemenize olanak tanır ve tam olarak istediğiniz gibi görünmesini sağlar.

Bu makalede, WordPress web sitenizi CSS ile özelleştirmenin temelleri konusunda size yol göstereceğiz.

Web Sitenizi Neden CSS ile Özelleştirin?

Özel CSS eklemek, sitenizin görünümüne ince ayar yapmak için kullanabileceğiniz yöntemlerden yalnızca biridir. Diğer yöntemler arasında bir iyi özellikli premium WordPress temasıveya bir sayfa oluşturucu yükleme.

Bu iki yöntemin kullanımı yeni başlayanlar için biraz daha kolay olsa ve kodlama bilgisi gerektirmese de özel CSS kullanmak iki ana yönden daha avantajlıdır:

Sıfır Maliyet

Premium temalar ve WordPress sayfa oluşturucular kullanışlı olabilir, ancak bunların bir bedeli vardır - dolar ve sent olarak. Özel CSS yazma bilgisi ile donanmışken, aynı etkileri ekstra bir masrafa girmeden elde edebilirsiniz.

Minimal Şişkinlik

Sayfa oluşturucular ve iyi özellikli temalar, kullanıcılara web sitelerini özelleştirmek için daha fazla esneklik ve çok çeşitli seçenekler sunmak için tasarlanmıştır. Bu nedenle, web sitelerine şişkinlik ekleme eğilimindedirler ve potansiyel olarak onları yavaşlatırlar.

Öte yandan, özel CSS yazarken, yalnızca gerekli özellikleri ekleyerek genellikle daha hafif web siteleri ve daha hızlı yükleme hızları elde edersiniz.

WordPress Web Sitenizi CSS ile Özelleştirmenin 3 Kolay Yöntemi

Umarım, zaten biliyorsundur CSS nasıl yazılır. Temel bilgileri öğrendikten sonra, WordPress web sitenize özel CSS eklemek için aşağıdaki yöntemlerden herhangi birini kullanabilirsiniz:

Yöntem 1: WordPress Özelleştirici'yi kullanın

WordPress 4.7 veya sonraki herhangi bir sürümü ile doğrudan yönetici alanından özel CSS ekleyebilirsiniz. Bu en basit yöntemdir ve canlı bir önizleme mevcut olduğundan, yaptığınız değişiklikleri gerçek zamanlı olarak görebilirsiniz.

Ayrıca, yapacağınız tüm değişiklikler WordPress'in içinde kaydedildiğinden, en çok tavsiye edilendir. Bu, temanızı değiştirseniz veya güncelleseniz bile özel CSS'nizi kaybetmeyeceğiniz anlamına gelir.

İşte atılması gereken adımlar:

Aşama 1: Şu yöne rotayı ayarla Görünüm > Özelleştir.

Bu, soldaki bazı özelleştirme seçenekleriyle birlikte sağda sitenizin canlı bir önizlemesini gösteren WordPress tema özelleştiricisini açacaktır. Sol panelin en altına gidin ve bir Ek CSS sekme.

Adım 2: Tıkla Ek CSS Sekme.

Bu, sol bölmede özel CSS'nizi ekleyebileceğiniz küçük bir kutu açacaktır. İstediğiniz kadar CSS kodu satırı yazabilirsiniz. Bu düzenleyicinin en güzel yanı, kodunuzu doğrulaması ve herhangi bir hata olduğunda sizi uyarmasıdır.

Aşama 3: Değişikliklerinizi yayınlayın.

Eklediğiniz herhangi bir geçerli CSS kuralı, sağdaki canlı önizleme alanında görünecektir. Değişiklikleri sitenize uygulamak için Yayınla Memnun kaldığınızda sol bölmenin üstündeki düğmesine basın. Değişikliklerin hemen yürürlüğe girmesini istemiyorsanız, yayınlamayı daha sonra planlayabilir veya çalışmanızı taslak olarak kaydedebilirsiniz.

Özelleştiriciyi kullanarak yaptığınız tüm değişikliklerin mevcut temanıza bağlı olduğunu unutmamak önemlidir. Başka bir temaya geçerseniz, özel CSS'nizi kopyalayıp yeni temaya eklemediğiniz sürece değişiklikler kaybolur. Bir temaya eklediğiniz tüm özel CSS'leri bir not defterine kaydetmek iyi bir uygulamadır. Bu şekilde, kodu kopyalayıp farklı bir tema için “Ek CSS” bölümüne yapıştırabilirsiniz.

Bu çok fazla iş gibi geliyorsa ve kullandığınız herhangi bir WordPress temasına özel CSS'nizi uygulamanıza izin veren bir çözümü tercih ediyorsanız, sonraki yöntem tam size göre.

Yöntem 2. Eklenti Kullanın

Özel CSS eklentileri, özel CSS'nizi temanızdan ayrı olarak saklar ve hangi temayı kullanırsanız kullanın değişikliklerinizin uygulanmasına olanak tanır. Bu eklentiler ayrıca otomatik tamamlama gibi CSS eklemeyi kolaylaştıran ekstra özelliklerle birlikte gelir.

Tek dezavantajı, üçüncü taraf yazılım olmalarıdır, bu da sitenizi potansiyel olarak yavaşlatabilecekleri anlamına gelir. Ancak bu eklentilerin çoğu hafiftir, bu nedenle sitenizin performansı üzerinde genellikle çok az etkisi vardır. İşte kullanabileceğiniz en iyi özel CSS eklentilerinden bazıları:

• Basit Özel CSS

Basit Özel CSS en popüler özel CSS eklentilerinden biridir. Hafiftir, kullanımı kolaydır ve harika özellikler sunar. Ayarlamak kolaydır. Tek yapmanız gereken eklentiyi kurmak ve etkinleştirmek. Ardından, şuraya gidin: Dış görünüş panonuzun sol bölmesindeki bölüm.

adlı yeni bir seçenek göreceksiniz. Özel CSS. Üzerine tıklamak, özel CSS'nizi ekleyebileceğiniz bir düzenleyici açacaktır. Tıkla Özel CSS'yi Güncelle Değişikliklerinizi kaydetmek için düğmesine basın. Değişiklikleri görüntülemek için web sitenizi yenilemeniz yeterlidir.

• Basit Özel CSS ve JS

Daha fazla özellik istiyorsanız, Basit Özel CSS ve JS eklentisi harika bir seçenektir. CSS eklemenin yanı sıra JavaScript girişleri eklemenize de olanak tanır.

• CSS Kahramanı

Tek satır kod yazmak istemiyorsanız, CSS Kahramanı eklentisi sizin için mükemmel. Bu eklenti, herhangi bir kod yazmanıza gerek kalmadan sitenizdeki hemen hemen tüm CSS stillerini düzenlemenize olanak tanıyan, açılır menüler ve giriş alanları içeren görsel bir CSS düzenleyicisi sunar.

Yöntem 3. Ham Kodu Düzenleyin

Yukarıda açıkladığımız iki yöntem, tema dosyalarınıza dokunmanıza gerek kalmadan sitenize özel CSS eklemenize olanak tanır. Ancak bazı durumlarda temanızın CSS'sini düzenlemek veya doğrudan temanızın koduna özel CSS eklemek isteyebilirsiniz.

Bunu yapmak için web sitenizin stil sayfasına erişmeniz gerekir. Bu stil sayfasına erişmenin kolay bir yolu, Tema Editörü WordPress kontrol panelinizde.

Daha ileri gitmeden önce, yerine koymanız gereken birkaç güvenlik önlemi var. Öncelikle, web sitenizi yedekleyin. Tema dosyalarınızı düzenlerken sitenizin çökmesine neden olabilecek hatalar yapmak kolaydır.

Yedekleme, geri dönmek için işlevsel bir web sitenizin olmasını sağlar. Sonraki, bir çocuk teması oluştur. Ana temanızda doğrudan düzenlemeler yaparsanız, tema her güncellendiğinde değişiklikler kaybolur.

Bu güvenlik önlemleri alındığında, WordPress arka ucunuza giriş yapın. git Görünüm > Tema Düzenleyici. Tema düzenleyici seçeneğine tıkladığınızda, tema dosyalarınızda doğrudan değişiklik yapmanıza karşı sizi uyaran bir açılır kutu göreceksiniz. Yukarıdaki adımları izlerseniz, gitmeye hazırsınız.

Tıklamak anladım Devam etmek için.

Tıkladıktan sonra varsayılan olarak sitenizin stil sayfasını görmelisiniz. Değilse, sadece sağ bölmeye bakın ve tıklayın stil.css altında stil sayfası seçenek.

Buradan tema dosyalarınızda doğrudan değişiklik yapabilirsiniz. sadece tıklamayı unutma Kaydet ve Güncelle bir kez işiniz bitti.

Özel CSS ile Sitenizin Görünümünün Kontrolünü Elinize Alın

WordPress'te özel CSS yazmayı öğrenmek yeni başlayanlar için biraz zaman alabilir, ancak size web sitenizin görünümü üzerinde gerçek kontrol sağlayacaktır. Üstelik bu, sıfır maliyetle ve sitenizin performansı üzerinde minimum etkiyle.

Bununla birlikte, herhangi bir manuel tasarım yapmamayı tercih ederseniz, işi halletmenin, örneğin WordPress için en iyi sayfa oluşturuculardan birini kullanmak gibi başka yolları da vardır.

Harika Web Siteleri Oluşturmanıza Yardımcı Olabilecek 5 WordPress Sayfa Oluşturucu

WordPress sitenizin harika görünmesini mi istiyorsunuz, ancak bir geliştiriciye paranız yetmiyor mu? Bunun yerine bu WordPress sayfa oluşturucularını deneyin.

Sonrakini Oku

Yazar hakkında