WordPress Temasını Güncellerken Özel CSS Nasıl Korunur?

Yayınlanan: 2022-05-05

1. Önsöz
2. Tema Güncellemeleri Özel CSS'yi Neden Bozuyor?
3. Özelleştiriciye Ekle
4. Bir Alt Tema Oluşturun
5. Özel Bir CSS Eklentisi Kullanın
6. Sonuç

Temalar, WordPress web sitelerinin düzenini ve görünümünü belirler. Hangi temayı kullandığınızdan bağımsız olarak, özel ihtiyaçlarınıza göre biraz özelleştirmeniz gerekebilir.

Temanızı özelleştirmenin bir yolu Basamaklı Stil Sayfalarını (CSS) kullanmaktır. Bu popüler stil sayfası dili, temanızın neredeyse her öğesini değiştirmenize olanak tanır. Arka plan renklerini belirlemek, yazı tipi boyutlarını değiştirmek, içerik arasında boşluk oluşturmak, menüleri yeniden konumlandırmak ve daha fazlası için temanıza özel CSS ekleyebilirsiniz. Ancak özel CSS, temanızı bir sonraki güncellemenizde silinebilir.

Tema Güncellemeleri Neden Özel CSS'yi Bozuyor?

Tüm temaların bir style.css dosyası vardır. Tema klasöründe bulunur, CSS'yi içerir. Temanızı güncellediğinizde, mevcut sürümü değiştirmek için yeni, farklı bir sürümünü indirirsiniz.

Temanızı güncellemek, mevcut style.css dosyasını siler ve onu yeni, yeni bir style.css dosyasıyla değiştirir. Yeni style.css dosyası, daha önce eklemiş olabileceğiniz herhangi bir özel CSS içermeyecek. Silinen özel CSS'yi her zaman geri ekleyebilirsiniz, ancak bunu her tema güncellemesinden sonra yapmak sıkıcı olabilir.

Özelleştiriciye Ekle

Temanızı güncellerken özelleştiriciye ekleyerek özel CSS'yi koruyabilirsiniz. Özelleştirici, WordPress panosundaki bir tema özelleştirme aracıdır. Bir “Ek CSS” alanına sahiptir. Özel CSS'yi doğrudan temanızın style.css dosyasına eklemek yerine, onu bu alana ekleyebilirsiniz.

Tema güncellemeleri sırasında özel CSS'nin silinmesini önlemek için WordPress'in 4.7 sürümünde "Ek CSS" alanı tanıtıldı. style.css dosyasını ve tema klasöründeki diğer dosyaları etkilemez. Bu alan aracılığıyla özelleştiriciye özel CSS eklediğinizde, web sitenizin veritabanında saklanacaktır. Ardından, özel CSS'yi korurken temanızı güncelleyebilirsiniz.

Özelleştiriciye erişmek için WordPress panosunda "Görünüm"ü tıklayın ve "Özelleştir"i seçin. "Ek CSS" sekmesi alta yakındır. Bu sekmeyi tıkladığınızda, özel CSS girebileceğiniz bir alan görüntülenecektir. Temanızı güncellemek yalnızca tema klasöründeki dosyaları değiştirir. Web sitenizin veritabanını değiştirmeyecek veya başka bir şekilde etkilemeyecek, bu nedenle özel CSS korunacaktır.

Özelleştiriciye özel CSS eklemek, onu önizlemenize olanak tanır. Özelleştirici, tüm değişiklikler için yerleşik bir önizleme özelliğine sahiptir. İster yeni widget'lar kuruyor, ister özel CSS ekliyor olun, özelleştirici, web sitenizin nasıl görüneceğini ortaya çıkaracaktır. Ardından, "Yayınla"yı tıklayarak özelleştirmeye devam etmeyi seçebilirsiniz. Web siteniz doğru görünmüyorsa, yayınlamadan önce özelleştirme seçeneklerini değiştirebilirsiniz. Ne olursa olsun, özelleştirici, özel CSS ile web sitenizin bir önizlemesini gösterecektir.

Bir Alt Tema Oluşturun

Başka bir çözüm, bir alt tema oluşturmaktır. Alt temalar, aslında, değişikliklerinizi kaybetme korkusu olmadan özelleştirebileceğiniz diğer temaların kopyalarıdır. Tam kopya değiller. Bunun yerine, çoğu alt tema, bir style.css dosyası ve bir function.php dosyası dahil olmak üzere yalnızca birkaç temel dosyadan oluşur.

Alt temalar, bir ana temanın özelliklerini devralacak şekilde tasarlanmıştır. Temanızı ana tema olarak kullanabilirsiniz. Alt temanın kendi style.css dosyasını ve functions.php dosyasını içeren kendi klasörü olacaktır. Ancak alt tema bir index.php dosyası, bir page.php dosyası, bir single.php dosyası veya diğer standart tema dosyalarını içermez. Bu özellikler için ana temadan yararlanacaktır.

Alt temaların kendi style.css dosyası olduğundan, özel CSS'yi desteklerler. Daha da önemlisi, alt temalar, ana temaları güncellendiğinde tüm özel CSS'lerini korur. Ana temanın güncellenmesi, alt temanın style.css dosyasını etkilemez. Bir alt temanın nasıl oluşturulacağına ilişkin talimatlar için geliştirici.wordpress.org/themes/advanced-topics/child-theme adresini ziyaret edin. Alternatif olarak, bazı premium temalar bir alt tema ile birlikte gelir.

Yalnızca birkaç özel CSS satırı için, onu özelleştiriciye eklemek isteyebilirsiniz. Daha büyük miktarlarda özel CSS için, bir alt tema oluşturmak muhtemelen çabaya değer. Bir alt tema size özelleştirebileceğiniz ayrı bir style.css dosyası sağlayacaktır.

Alt temanın style.css dosyası üzerinde çevrimdışı bile çalışabilirsiniz ve bu ayrı bir dosya olduğu için özel CSS için bolca alanınız olur. Özelleştiriciye özel CSS eklemek, sizi yalnızca çevrimiçi olarak erişilebilen küçük bir alanla kısıtlar. Özelleştirici, bir önizleme modunun avantajını sunarken, bir alt tema, ayrı bir style.css dosyasının avantajını sunar.

Özel bir CSS Eklentisi Kullanın

Özel bir CSS eklentisi kullanabilirsiniz. Örneğin, Basit Özel CSS eklentisi, kulağa tam olarak nasıl geliyorsa onu yapar: Temanıza kolayca özel CSS eklemenizi sağlar. Eklentiye eklenen özel CSS, temanızın kendi CSS'sini geçersiz kılar.

Basit Özel CSS eklentisini etkinleştirdikten sonra, WordPress panosunda "Görünüm" altında yeni bir "Özel CSS" sekmesi görmelisiniz. Burası özel CSS ekleyebileceğiniz yerdir. Temanızı güncellediğinizde, özel CSS korunacaktır. Temanızı güncellemek temanın style.css dosyasını değiştirir, ancak eklenti yeni style.css dosyasını özel CSS'nizle geçersiz kılar.

Hem özel CSS'yi hem de özel JavaScript'i destekleyen Basit Özel CSS ve JS eklentisi de vardır. Bunu, temanızın kendi CSS'sini geçersiz kılan özel CSS oluşturmak için kullanabilirsiniz. Bir alt tema oluşturmakla uğraşmak istemiyorsanız, özel bir CSS eklentisi kullanmak isteyebilirsiniz. Özel bir CSS eklentisi indirmek, tema güncellemeleri sırasında özel CSS'yi korumanın kolay bir yoludur.

Çözüm

Bir temayı güncelledikten sonra özel CSS'yi kaybetmeniz sinir bozucu. Özel CSS'yi bilgisayarınıza yerel olarak kaydetmiş olsanız bile, geri dönüp eklemeniz gerekir. WordPress panosundaki özelleştiriciyi kullanarak, bir alt tema oluşturarak veya özel bir CSS eklentisi kullanarak temanızın özel CSS'sini koruyabilirsiniz.

Web Performansı

Yükleme süresi önemlidir! Sitenizin ne kadar hızlı olduğunu biliyor musunuz?

DAHA FAZLA BİLGİ EDİN