Özel CSS ile Temanızı Nasıl Özelleştirirsiniz?

Sitenizin tasarımı üzerinde tam kontrol sahibi olmak mı istiyorsunuz?

WordPress için çok sayıda kullanıcı dostu özelleştirme aracı olsa da, biraz CSS size çok yardımcı olabilir.

Örneğin, yazı başlıklarının yazı tipi boyutunu büyütmek veya bağlantılarınızın rengini değiştirmek isteyebilirsiniz. Bu kadar basit bir şey için tamamen yeni bir eklenti yüklemek aşırıya kaçmış gibi görünüyor.

Çözüm CSS'dir.

Birkaç satır CSS ile küçük stil özelleştirmelerini hızlıca halledebilirsiniz. Ve kod olmasına rağmen, Javascript veya PHP gibi bir programlama dili kadar karmaşık değildir .

Burada ve orada biraz CSS yazdıysanız, bu kılavuzdan büyük ölçüde yararlanacaksınız, ancak tamamen yeni başlayanlar bile burada bazı pratik ipuçları bulabilir.

Psst! Bir Compete Themes müşterisiyseniz sonuna kadar okuyun. Sizin için ücretsiz bir bonusumuz var (özellikle yeni başlayanlar için faydalıdır).

CSS'ye hızlı bir giriş

Zaten CSS'ye aşinaysanız, sizi uzun bir genel bakışla rahatsız etmek istemiyorum. CSS ile hiç çalışmadıysanız veya CSS'nin ne olduğundan bile emin değilseniz, lütfen önce konuyla ilgili makalemize göz atın:

CSS Nedir ve WordPress'i Nasıl Etkiler?

Bu, sitelere stil vermek için CSS'nin neden kullanıldığının ve nasıl uygulandığının temellerini kapsayacaktır.

WordPress sitenize CSS nasıl eklenir

CSS'de yeni olan WordPress kullanıcılarının yaptığı büyük bir hata var:

Tema dosyalarını özelleştirirler.

Örneğin, Challenger temasını kullanan biri CSS düzenlemelerini doğrudan Görünüm > Düzenleyici menüsünden erişilen style.css dosyasına yerleştirebilir.

style.css dosyasını düzenlemeyle ilgili sorun, Challenger'ın yeni bir sürümüne güncelleme yaparsanız tüm değişikliklerinizi kaybetmenizdir. İnanın bana, yapılması uzun süren kod değişikliklerini kaybetmek inanılmaz derecede cesaret kırıcı olabilir.

En iyi yol

Sitenize, üzerine asla yazılmayacak şekilde CSS eklemenin daha iyi bir yolu var. Ayrıca bu kod, temanın stillerini geçersiz kılmayı kolaylaştıracak şekilde sitenize eklenir.

Sitenize CSS eklemek için Özelleştirici'yi (Görünüm > Özelleştir) açmak ve Ek CSS bölümüne tıklamak istiyorsunuz.

Bu bölümü açarsanız, kodunuzu ekleyebileceğiniz bir metin alanı görürsünüz. WordPress burada bazı ipuçları içerecek, ancak kapatmak için Kapat bağlantısını tıklayabilir ve yalnızca kod girişini gösterebilirsiniz.

Eklemek istediğiniz herhangi bir CSS'yi buraya girip kaydedebilirsiniz.

Buraya eklediğiniz kod, sitenin görünümünü önizlemede hemen güncelleyecektir. Değişikliklerinizden memnun kaldığınızda, düzenlemelerinizi kaydedebilirsiniz.

CSS'yi buraya yerleştirmenin ek avantajı, canlı olarak gerçekleşen güncellemeleri izleyebilmeniz, böylece neyi sevdiğinizi bulmak için farklı kodları hızlı bir şekilde test edebilmenizdir.

Artık sitenize nasıl güvenli bir şekilde CSS ekleyeceğinizi öğrendiğinize göre, şimdi CSS yazmanın temellerini ele alalım!

Profesyonel ipucu: sitenizi bozma konusunda endişelenmeyin. Kötü bir düzenleme yaparsanız, eklediğiniz CSS'yi silebilirsiniz. Bu şekilde CSS ekleyerek sitenizi tamamen bozmanız veya admin menüsüne erişiminizi kaybetmeniz mümkün değildir.

CSS seçicileri nasıl bulunur

Daha önce CSS yazdıysanız, ilk adımın tarayıcıya sitede hangi öğeyi hedeflediğinizi söylemek için bir seçici seçmek olduğunu bilirsiniz. Yukarıdaki ekran görüntüsünde “site-title” sınıfına sahip tüm öğeleri hedefliyorum.

CSS seçicilerini nasıl kullanacağınızdan emin değilseniz, SitePoint'ten CSS seçicilere yönelik bu harika girişe göz atın.

Şimdi olay şu…

Birçok deneyimli WordPress kullanıcısı bile seçicileri tamamen yanlış bulmaya devam ediyor. Tema tarafından zaten kullanılan bir seçiciyi bulmak için style.css dosyasını kontrol ederler. Bu sıkıcıdır ve özelleştirmenizi yapmak için uygun bir seçici bile bulamayabilirsiniz.

Size çok daha verimli bir süreç sunayım.

WP profesyonelleri CSS seçicilerini nasıl bulur?

CSS yazarken, tarayıcıya hangi öğeyi düzenlemek istediğinizi söylemek için önce bir seçiciye ihtiyacınız vardır. Temanızdaki stil sayfasını kontrol edebilseniz de, onları bulmak için tarayıcınızın web geliştirici araçlarını kullanmak çok daha kolaydır.

İşte ne demek istediğime bir örnek:

Açık geliştirici araçlarında her öğenin sınıflarını ve kimliklerini görebilirsiniz. Daha sonra kendi özel seçicilerinizi yazmak için mevcut sınıfların ve kimliklerin herhangi bir kombinasyonunu kullanabilirsiniz.

Bu eğitimde bu sürecin çok daha derin ayrıntılarına giriyorum:

WordPress Sitelerinde CSS Seçicileri Nasıl Bulunur?

Tarayıcınızın geliştirici araçlarına nasıl erişeceğinizi, HTML'de nasıl gezineceğinizi ve ihtiyacınız olan CSS seçicilerini nasıl bulacağınızı öğreneceksiniz.

CSS özellikleri ve değerleri

Artık istediğiniz seçiciyi almanın çok daha hızlı bir yoluna sahip olduğunuza ve Özelleştirici'deki Ek CSS bölümüne nasıl kod ekleyeceğinizi bildiğinize göre, geriye sadece değiştirmek istediğiniz özellikleri seçmek kalıyor.

Örneğin Challenger'da site başlığını hedefleyip yazı tipini büyütmek istiyorsanız bunu font-size özelliği ile yapabilirsiniz. Bu CSS ifadesi şöyle görünebilir:

 .Site Başlığı {
  yazı tipi boyutu: 32 piksel;
}

CSS'ye pek aşina değilseniz, bu CSS özellikleri listesini özellikle yararlı bulacaksınız. Düzenlemek istediğiniz kalite (arka plan rengi, yazı tipi boyutu, kenarlıklar vb.) için bu listeyi arayabilirsiniz.

Kullanıcılarımız için ÜCRETSİZ önceden yazılmış CSS

CSS acemi veya ustası, hoşunuza gideceğini düşündüğüm bir şey var…

Temalarımızdan herhangi birini kullanırsanız, oluşturduğumuz önceden yazılmış CSS snippet kitaplıklarını seveceksiniz. Örneğin, Tracks CSS Parçacıkları Koleksiyonu, sitenizi özelleştirmek için kopyalayıp Ek CSS bölümüne yapıştırabileceğiniz düzinelerce parçacık içerir:

Bu, daha önce hiç CSS yazmamış olsanız bile sitenizi CSS ile özelleştirmeyi çok kolaylaştırır. İstediğiniz herhangi bir parçacığı kopyalayıp yapıştırabilir ve ardından değeri istediğiniz gibi değiştirebilirsiniz.

Temanızın CSS parçacıklarını bulmak için Destek Merkezi'ni ziyaret edin ve kullandığınız temayı seçin. Ardından, kenar çubuğunun altındaki CSS Parçacıklarını Görüntüle düğmesini tıklayın:

Seçtiğiniz tema için bir sonraki sayfada bir dizi önceden yazılmış parça bulacaksınız.

Çözüm

Tüm Rekabet Temaları kullanıcılarının CSS uzmanı olmasını beklemiyorum ve hala WordPress'in temellerine hakim olan biri için bu öğreticinin ne kadar korkutucu olabileceğini anlıyorum.

Bununla birlikte, CSS ile özelleştirme olanakları hakkında bilgi sahibi olmak kesinlikle yararlıdır. Ayrıca, snippet koleksiyonları, bazı kopyala ve yapıştır koduyla ayaklarınızı daldırmayı çok kolaylaştırır.

Gelecekte sitenizi kodla özelleştirmeye daha hazır hissettiğinizde buna geri dönebilirsiniz. Bu durumda, geri dönüp bir şans verebilmek için bu sayfayı daha sonra yer imlerine ekleyin.