Özel CSS Ekleme

Çoğu değişiklik, WordPress düzenleyicisindeki ayarlarla yapılabilse de CSS kodu yazma deneyiminiz varsa sitenizi özelleştirmek için CSS’yi kullanmayı tercih edebilirsiniz. Bu kılavuz, CSS ile web sitenizi nasıl düzenleyeceğinizi gösterecektir.

Bu özellik, WordPress.com Premium, Kurumsal ve Ticaret paketlerimize ve eski Pro paketine sahip sitelerde mevcuttur. Ücretsiz ve Kişisel paketlerine sahip sitelerde bu özelliğe erişmek için paketinizi yükseltin.

CSS, Geçişli Stil Sayfaları’nın kısaltmasıdır. HTML öğelerinin web sayfasındaki görünümünü denetleyen bir biçimlendirme dilidir. WordPress, temanızın varsayılan stillerini geçersiz kılmak üzere kendi CSS stillerinizi eklemeniz için bir CSS düzenleyicisi içerir.

Bir web sitesinin tasarımını değiştirmek için CSS ile yapabilecekleriniz için neredeyse sonsuz bir potansiyel vardır. Ancak, CSS ve HTML’nin nasıl çalıştığı hakkında bilgi (veya en azından öğrenmeye istekli olmanızı) gerektirir. MDN web belgelerindeki CSS kılavuzu, CSS öğrenmeye başlamak için harika bir yerdir.

CSS öğrenmek istemiyorsanız siteniz için bir blok teması seçin. Bu temalar, herhangi bir bilgisayar kodu bilgisi olmadan web sitenizin tasarımının herhangi bir yönünü özelleştirmek için en esnek seçenekleri sunar.

Temanıza bağlı olarak, sitenizin CSS düzenleyicisine erişmenin iki yolu vardır. Her yöntem aşağıda açıklanmıştır.

Sitenizde site düzenleyicisini destekleyen bir tema kullanılıyorsa bu yöntemi kullanarak CSS ile siteyi özelleştirebilirsiniz. Sitenizde site düzenleyicisi kullanılıp kullanılmadığını belirlemenin hızlı bir yolu, panonuzda Görünüm öğesi altından kontrol etmektir. Burada Düzenleyici‘yi görüyorsanız aşağıdaki adımları izleyerek CSS düzenleyicisine erişebilirsiniz:

1. Sitenizin panosunu ziyaret edin.
2. Görünüm → Düzenleyici öğelerine gidin.
3. Soldaki Tasarım menüsünde Stiller‘e tıklayın.
   • Temanız Stil Varyasyonları içeriyorsa Stiller seçeneklerini açmak için kalem simgesine tıklamanız gerekir:

4. “Stiller” başlığının sağındaki üç noktaya tıklayın ve “Ek CSS“i seçin:

5. Verilen metin kutusuna CSS kodunuzu yazın veya yapıştırın.
6. CSS’i sitenize kaydetmek için ekranın sağ üst köşesindeki “Kaydet” düğmesine tıklayın.

Stil Kitabını yükleyerek CSS değişikliklerinizin herhangi bir blok türü üzerindeki etkisini önizleyebilirsiniz. Stil kitabını açmak için göz simgesine tıklayın.

Site Düzenleyicisi temalarında, aşağıdaki adımları izleyerek site genelindeki belirli bloklara CSS kodu uygulayabilirsiniz.

1. Sitenizin panosunu ziyaret edin.
2. Görünüm → Düzenleyici öğelerine gidin.
3. Soldaki Tasarım menüsünde Stiller‘e tıklayın.
   • Temanız Stil Varyasyonları içeriyorsa Stiller seçeneklerini açmak için kalem simgesine tıklamanız gerekir.
4. Bu kez, tüm sitenin belirli blokların görünümünü özelleştirmek üzere ayarlara erişmek için “Bloklar” bölümünü seçin.
5. CSS eklemek istediğiniz blokun adına tıklayın. Ayrıca arama kutusunu kullanarak istediğiniz blok türünü de bulabilirsiniz.
6. Aşağıya doğru kaydırın ve “Gelişmiş” öğesine tıklayın.
7. “Ek CSS” etiketli kutuya ilgili blok türünün tüm örneklerine uygulanacak CSS yazın. Blok başına CSS eklerken bir CSS seçici eklemeniz gerekmez; özelliği ve değeri eklemeniz yeterlidir. Yukarıdaki videoya bir örnek dahildir.
8. CSS’i sitenize kaydetmek için ekranın sağ üst köşesindeki “Kaydet” düğmesine tıklayın.

Klasik temalar ve birçok üçüncü taraf teması dahil olmak üzere Site Düzenleyicisi‘ni kullanmayan temalar için şu adımları izleyerek CSS ekleyebilirsiniz:

1. Sitenizin panosunu ziyaret edin.
2. Görünüm → Özelleştir → Ek CSS öğesine gidin.
3. Verilen metin kutusuna CSS kodunuzu yazın veya yapıştırın. Sağdaki önizleme penceresi değişikliklerinizi yansıtır.
4. CSS’yi sitenizde kaydetmek için “Değişiklikleri Kaydet” düğmesine tıklayın.

CSS düzenlemelerinizin en son 25 sürümü kaydedilir ve CSS düzenleyicinin alt kısmındaki Tüm geçmişi gör seçeneğine tıklanarak erişilebilir. CSS’nizin önceki sürümlerini geri yükleyebilirsiniz.

Seçenek görünmüyorsa geri yüklenecek CSS geçmişi yoktur.

Özel CSS kullanarak ana içerik alanının genişliğini değiştirdiyseniz “Ortam Genişliği” seçeneği kullanılmalıdır. “Ortam Genişliği” ayarı, sitenize eklenen tam boyutlu görüntüler için varsayılan boyuttur.

Bunun, ayarı değiştirmeden önce eklediğiniz bazı görüntülerin boyutlarını (nasıl yerleştirildiklerine bağlı olarak) etkilemeyeceğini ve ayarları değiştirdikten sonra bazılarını yeniden yerleştirmeniz gerekebileceğini unutmayın.

Varsayılan olarak, CSS düzenleyicisine eklediğiniz özel CSS, temanın orijinal CSS’sinden sonra yüklenir; bu da kurallarınızın öncelikli olacağı ve tema stillerini geçersiz kılabileceği anlamına gelir.

Onay kutusunda “Temanın orijinal CSS’sini kullanma” seçeneğine tıklayarak temanın orijinal CSS’sini tamamen kapatabilirsiniz. Bu seçenek, sitenizi CSS ile tasarlarken herhangi bir WordPress.com temasını boş bir tuval olarak kullanmanıza olanak tanır. Bu gelişmiş bir seçenektir ve yalnızca temanızın CSS’sini sıfırdan tasarlamak istediğinizde kullanılmalıdır.

Mevcut CSS kurallarına uymak istiyorsanız (en yaygın ve önerilen yaklaşımdır) bu seçeneği devre dışı bırakabilirsiniz.

WordPress.com, CSS önişlemcileri LESS ve Sass (SCSS Sözdizimi) için destek vermektedir. Bu, değişkenler ve karışımlar gibi CSS uzantılarını kullanmak isteyen kullanıcılar için gelişmiş bir seçenektir. Daha fazla bilgi için LESS ve Sass web sitelerine bakın.

Alt bilgi tanıtımı CSS ile değiştirilmemelidir. Sitenin kullandığı tema türüne bağlı olarak alt bilgi tanıtımlarını kaldırabilir veya ayarlarla değiştirebilirsiniz:

• Sitenizde bir blok teması kullanılıyorsa Site Düzenleyicisi’ni kullanarak alt bilgi tanıtımlarını düzenleyebilir veya kaldırabilirsiniz; CSS gerekmez.
• Sitenizde klasik bir tema kullanılıyorsa alt bilgi tanıtımlarını minimalist bir WordPress logosuyla değiştirebilirsiniz. Sitenin Kurumsal veya Ticaret paketi aboneliği varsa tanıtımı gizleyebilirsiniz.

Evet, yalnızca eklenti özellikli sitelerde.

Temanızdaki seçenekleri kullanarak web sitesi yazı tiplerinizi seçebilirsiniz. CSS ile çalışırken ön uçta sadece bu iki web yazı tipini kullanabilirsiniz. Ancak üçüncü taraf yazı tipi eklentilerini kullanarak başka yazı tipleri ekleyebilirsiniz.

Evet. Ortam Kütüphanenize bir görsel yükleyebilir ve görselin URL’si ile doğrudan CSS stil sayfanızdan o görsele başvurabilirsiniz. Stil sayfanızda bir arka plan görselini nasıl kullanacağınıza dair bir örnek:

 div#content { background-image: url('http://example.files.wordpress.com/1999/09/example.jpg'); } 

Yukarıda bu kılavuzda açıklandığı gibi, CSS düzenleyicisini kullanarak CSS düzenlemeleri yapmanızı öneririz. Bu yöntemi kullanarak CSS eklediğinizde, temanızın stil sayfasından CSS kurallarını geçersiz kılar. Bu, CSS çakışmalarının hatalarını ayıklamayı ve eklediğiniz önceki CSS sürümlerini geri yüklemeyi kolaylaştıran güvenli bir yöntemdir.

Tema dosyalarını doğrudan düzenlemede yetkinseniz bunu SFTP aracılığıyla veya bir alt tema oluşturarak yapabilirsiniz. Değişiklikleri canlı sitenize uygulamadan önce bir prova sitesinde test etmenizi öneririz.

WordPress.com’daki tüm yükseltmeler yıllık olarak yenilenir. Aboneliğinizi iptal ederseniz özel CSS’niz yine de kaydedilir, ancak artık başkalarının görebileceği şekilde sitenize uygulanmaz. Sitenize yeniden uygulanmalarını isterseniz paketinizi yeniden satın alabilirsiniz. Temaları değiştirmemişseniz stiller otomatik olarak yeniden uygulanır. Temaları değiştirdiyseniz geçmiş CSS’nizi CSS revizyonlarında bulabilirsiniz.