WordPress Web Sitenizin CSS'sini Nasıl Özelleştirirsiniz?

WordPress web siteniz için hangi temayı seçerseniz seçin, aynı tasarımı kullanan başka siteler de olacaktır. Ve günümüzde pek çok temanın sunduğu kapsamlı özelleştirme seçenekleriyle bile sitenizi daha da öne çıkarmak isteyebilirsiniz.

Sitenizin gerçekten bir parça gibi görünmesini sağlamak için, bir temanın seçenekleri veya ayarları aracılığıyla sunulan standart özelleştirmenin ötesine geçmeniz gerekir. WordPress CSS'nizi özelleştirmek, tasarımınızı sitenize tamamen benzersiz olacak şekilde değiştirmenize olanak tanır.

Bu makale, Divi gibi gelişmiş temalar kullanmak, alt temalar oluşturmak ve özelleştirmek, yerleşik WordPress Özelleştirici'yi ve WordPress CSS eklentilerini kullanmak dahil olmak üzere WordPress CSS'nizi özelleştirmenin çeşitli yollarını inceleyecektir.

CSS: Temel Bilgiler ve WordPress Bunu Nasıl Kullanıyor?

İlk önce ilk şeyler: CSS, size kısaltmadan daha anlamlı gelmeyebilecek Basamaklı Stil Sayfaları anlamına gelir. Öyleyse, onu parçalayalım.

Stil sayfası, başka bir belgenin sunumu için kullanılacak stilleri (yazı tipi, renkler vb.) açıklayan bir belgedir. Bizim durumumuzda, web sayfalarını şekillendiriyoruz. Adın "basamaklı" kısmı, gerçekten güçlendiği yerdir. Web sayfalarının stili, alt sayfanın daha yüksek olanın stillerine ekleme veya değiştirme ile basamaklı şelale gibi birden çok stil sayfasıyla oluşturulabilir. Bu önemlidir, çünkü temanız tarafından sağlanan orijinalleri düzenlemeden kendi stillerinizi bu şekilde ekleyebileceksiniz – buna birazdan geleceğiz.

CSS, bir web sayfasının yapısını göründüğünden ayırmanıza olanak tanır. Tüm stil bilgileri, web tarayıcısı tarafından okunan ve sayfaya uygulanan kurallar olarak yazılan ayrı CSS dosyalarında bulunur. Kurallar, aşağıdaki resimde gösterildiği gibi HTML öğesini ( seçici olarak adlandırılır) ve uygulanacak stilleri ( bildirimler olarak adlandırılır) tanımlar:

Göründüğü kadar basit olan CSS, düzen, renkler, yazı tipleri ve hatta animasyonlar dahil olmak üzere bir web sayfasının görünüşünün hemen hemen her yönünü değiştirmek için kullanılabilir. Daha fazla ayrıntı için, sözdiziminden geçen W3Schools'un bu CSS öğreticisiyle başlayabilirsiniz.

Çoğu WordPress teması, sitenizi style.css adlı bir dosyada sunmak için kullanılan CSS'yi içerir. Bu dosyayı açarsanız, temanız için stil kurallarının tam listesini görürsünüz. Ne yaparsanız yapın, bu dosyada herhangi bir değişiklik yapmayın! Temanıza bir sonraki güncellemeyi yüklediğinizde, bu değişikliklerin üzerine yazılacak ve temanızın stilleri tasarımcının orijinallerine geri dönecektir.

WordPress temanıza özel CSS eklemenin birkaç yolu vardır, böylece değişiklikleriniz bir tema güncellemesinden kurtulur. Hadi dalalım!

WordPress CSS'nizi Nasıl Özelleştirirsiniz?

Artık CSS'nin ne olduğunu ve WordPress temalarının onu nasıl kullandığını daha iyi anladığınıza göre, CSS'yi özelleştirme seçeneklerinize (belirli bir sırayla) bir göz atalım ve her yöntemin avantajlarını ve dezavantajlarını tartışalım. Bitirdiğimizde, tam olarak bir CSS sihirbazı olmayacaksınız , ancak temanızda istediğiniz türde değişiklikleri yapmak için en iyi yöntemi bulabileceksiniz.

Seçenek 1: Bir Alt Tema Kullanarak CSS'yi Özelleştirin

CSS'nizi özelleştirmek için bir alt tema kullanırsanız, daha önce bahsettiğimiz tema güncellemeleri sorun olmaz. Bir tema güncellemesi, 'ana' temayı etkileyerek alt temanızdaki değişiklikleri değiştirmeden bırakır. Birçok tema geliştiricisi, bugünlerde sizin için gerektiğinde değiştirebileceğiniz bir alt tema içeriyor.

Bir alt tema oluşturmak oldukça basittir – listelediği ana şablon olarak tema ve ithalat ana temanın style.css (stil sayfaları 'kaskad' hatırlamak bir style.css dosyasını içeren web barındırma bir klasör oluşturma içerir ?). Kontrol edebileceğiniz bir alt temanın nasıl oluşturulacağına dair eksiksiz bir eğitimimiz var ve bu süreçte size adım adım yol gösterecek.

Alt temanızı doğru bir şekilde oluşturup etkinleştirdikten sonra temanızı özelleştirmeye başlayabilirsiniz. En hızlı yol, iki şekilde erişilebilen style.css dosyanızı düzenlemek olacaktır.

İlk yol, Görünüm > Düzenleyici öğesine tıklayarak WordPress yönetim panosunda bulunan düzenleyiciyi kullanmaktır. Editör sayfası, sayfanın sağ tarafında dikey olarak dosyaların bir listesini görüntüler. style.css dosyanız listenin en altına doğru olacak ve Stylesheet seçeneğine tıklamak style.css dosyanızı yükleyecek ve görüntüleyecektir. Değişikliklerinizi CSS'ye ekleyebilir ve bunları kaydetmek için Güncelle düğmesini tıklayabilirsiniz.

style.css dosyanıza (önerdiğimiz) erişmenin diğer yolu, FTP veya bir dosya yöneticisi kullanarak barındırma sağlayıcınızdaki dosyalara göz atmaktır. Oluşturduğunuz alt tema klasörü wp-content > theme içinde olacaktır. style.css dosyasını düzenlemek için herhangi bir metin düzenleyiciyi kullanabilirsiniz.

Değişikliklerinizin görünmesini sağlamak için ana temayla aynı 'seçicileri' kullandığınızdan emin olmanız gerekir. Referans olarak ana temanın style.css dosyasını kullanabilir veya kullanılan seçicileri belirlemek için tek tek öğeleri incelemek için tarayıcınızı kullanabilirsiniz.

Alt tema kullanmanın en büyük dezavantajı, sunucunuzdaki dosyaları işlerken biraz rahat olmanız gerekmesidir. Artı tarafta, bir alt tema kullanmak, web sitenizin görünümü üzerinde tam kontrol sahibi olmanızı sağlar. WordPress tema özelleştirme kılavuzumuz size bir alt tema ile kullanabileceğiniz diğer bazı püf noktalarını gösterecektir.

Bir çocuk teması oluşturma sürecinde size adım atabilsek de, bazı insanlar için çok fazla sorun gibi görünen bazı stil değişiklikleri yapmak. Neyse ki sizin için bir alt tema oluşturmadan özel CSS eklemenin yolları var – bunu akılda tutarak, bir sonraki seçeneğimize bir göz atalım.

Seçenek #2: Özelleştiriciyi Kullanarak CSS'yi Özelleştirin

WordPress 3.4'e kadar, tema geliştiricileri WordPress Özelleştirici'den faydalanabiliyorlardı. Özelleştirici, bir site sahibinin veya yöneticisinin bir temanın ayarlarını düzenlemesini sağlar – web sitesine uygulamadan önce bunları önizler. Artık birçok tema, seçeneklere ve ayarlara erişmenizi sağlamak için Özelleştirici'yi kullanıyor.

Bugün ilgilendiğimiz şey, özel CSS ekleme yeteneğidir ve neyse ki, birçok tema bunu Özelleştirici'de bir seçenek olarak etkinleştirir. Kullanılabilir olup olmadığını doğrulamak için temanızın belgelerini kontrol edebilirsiniz.

İlk olarak, Görünüm > Özelleştir'i ziyaret ederek WordPress yönetim panonuzdaki Özelleştirici'ye gidin . Özelleştiricinin sol tarafında bir menü olacaktır. Temanız özel CSS'yi etkinleştirdiyse, menünün altına yakın bir yerde genellikle bir Özel seçeneği bulunur ve buna tıklamak size özel stiller ekleyebileceğiniz bir metin kutusu verir. Sağdaki önizleme, değişikliklerinizin etkisini göstermek için güncellenir ve işiniz bittiğinde Kaydet ve Yayınla düğmesini tıklayabilirsiniz.

Özelleştiriciyi kullanmanın avantajı basitliğidir ve temanız kullanımını etkinleştirdikten sonra herhangi bir şey yüklemeniz gerekmez. Ayrıca tüm değişikliklerinizi yayınlamadan önce önizleyebilirsiniz. Özelleştiriciyi kullanmanın dezavantajı, yine de CSS kuralları ekleme konusunda rahat olmanız gerektiğidir – ve tüm temalarda bu şekilde etkinleştirilmemiştir. Temaları değiştirmeye karar verirseniz, CSS'nizi özelleştirmenin başka bir yolunu aramak zorunda kalabilirsiniz.

Özel CSS için mevcut olan eklenti seçeneklerinden bazıları, bu CSS düzenleme sürecini daha da kolaylaştırıyor, hadi bir göz atalım!

Seçenek #3: CSS Eklentilerini Kullanarak CSS'yi Özelleştirin

CSS özelleştirmesi için bir eklenti kullanmanın avantajı, temanızı değiştirseniz bile eklentiyi ve CSS'sini korumanızdır. Bununla birlikte, bir temaya eklenen CSS stilleri başka bir tema için uygun olmayabileceğinden, bunun bazı dezavantajları vardır.

Bununla birlikte, eklenti seçeneklerinizi kontrol edelim!

Jetpack'te Özel CSS (Ücretsiz)

Ücretsiz Jetpack eklentisi, sizinki de dahil olmak üzere bir milyondan fazla WordPress web sitesine yüklenmiştir. WordPress.com'da barındırılan platformun özelliklerini, kendi kendine barındırılan web sitelerine ve bugünün tartışması için Özel CSS modülünü içerir. Modül Jetpack panosunda etkinleştirildiğinde, bir Özel CSS Düzenleyici kullanılabilir ve bu da temanızı bir alt tema oluşturmadan özelleştirmenizi sağlar.

Düzenleyiciye Görünüm > CSS'yi Düzenle seçeneğine giderek erişebilirsiniz. Düzenleme penceresinde, silebileceğiniz veya değişikliklerinizi sonradan ekleyebileceğiniz bir yer tutucu mesajı vardır. Daha gelişmiş CSS kullanımı için bir önişlemcinin (Less veya Sass gibi) kullanılması, temanın CSS'sini yalnızca eklemek yerine sizinkiyle değiştirmek ve CSS'nizi mobil temaya uygulamak gibi başka seçenekler de mevcuttur. Jetpack ayrıca kaydetmeden önce değişikliklerinizi çalışırken görmenizi sağlayan bir önizleme düğmesine sahiptir. Ek olarak, özel CSS'nizin önceki bir sürümüne geri dönebilirsiniz.

Özel CSS modülü, zaten Jetpack kuruluysa basit bir seçenektir, ancak diğer Jetpack özelliklerini kullanmıyorsanız, Jetpack'i sadece bu modül için kurmak biraz fazla olabilir.

Basit Özel CSS (Ücretsiz)

Bunun yerine bağımsız bir seçenek istiyorsanız, Basit Özel CSS iyi bir seçimdir. 4,9 yıldız derecelendirmeli 200.000'den fazla web sitesinde kullanılan bu ücretsiz eklenti, WordPress CSS'nizi özelleştirmek için işinizi yapmanıza kesinlikle yardımcı olacaktır.

Bu eklenti yapılandırma gerektirmez – sadece kurun ve etkinleştirin. CSS'nizi düzenlemek için WordPress yönetim panosunda Görünüm > Özel CSS'ye gidin. Bu ekrandaki düzenleyiciye özel CSS'nizi ekleyin ve değişikliklerinizi kaydetmek için Özel CSS'yi Güncelle düğmesini tıklayın.

Bu eklentiyi kullanmak, önizleme olmaması açısından style.css dosyasını düzenlemeye benzer. Sitenizdeki etkisini görmek için değişikliklerinizi kaydetmeniz gerekir. Jetpack'in aksine, önceki sürümlere geri dönüş yoktur.

CSS Kahramanı (Yıllık 14 Dolardan Başlayan Fiyatlar)

Bugün baktığımız son eklenti seçeneği, CSS Hero adlı premium bir eklentidir. Tek bir site için yılda 14 ABD dolarından başlayan bu eklenti, temanızı, kullanımı kolay bir işaretle ve tıkla arayüzü kullanarak özelleştirmenizi sağlar.

Düzinelerce uyumlu temayla (kendi Ekstra dergi temamız gibi) en iyi şekilde çalışacak şekilde tasarlanan CSS Hero, temanızın tüm öğeleri üzerinde tam kontrol sağlar. Listelerinde olmayan temalar için, CSS Kahramanı özelleştirmesini etkinleştirmek için Roket Modu'nu kullanabilirsiniz.

CSS Hero, stili geçişler gibi daha karmaşık efektler için bile görsel bir işaretle ve tıkla işlemine dönüştürerek CSS sözdizimini anlama ihtiyacını ortadan kaldırır. Ayrıca değişikliklerinizi canlı olarak önizleyebilir ve önceki bir revizyona geri dönebilirsiniz.

WordPress CSS'nizi tamamen değiştirmek istiyorsanız ancak CSS bilgisine sahip değilseniz, CSS Hero sitenizi özelleştirmek için harika bir tam özellikli seçenektir – özellikle önerilen temalardan birini kullanıyorsanız.

Seçenek #4: Divi Temasını Kullanarak CSS'yi Özelleştirin

Web sitenizin tüm CSS'si üzerinde tam kontrol sağlamayı amaçlayan ve hem CSS'ye yeni başlayanların hem de gelişmiş tasarımcıların sitelerinin görünümünü kolaylıkla özelleştirmesini sağlamak için gelişmiş kontrol sağlayan WordPress temaları vardır. Divi temamız piyasadaki en gelişmiş temalardan biridir ve WordPress CSS'nizi özelleştirmek istiyorsanız en iyi seçimimizdir (doğal olarak!).

Divi, web sitenizdeki tüm öğeler için size tonlarca özelleştirme seçeneği sunar, ancak gerçekten özel CSS eklemeniz gerekiyorsa, bunu yapmanın iki yolu vardır. Özel CSS seçeneğine sahip güçlü ePanel'i kullanarak CSS'yi tüm siteye uygulayabilirsiniz. Alternatif olarak, değişiklikleri yalnızca bir sayfadaki belirli bir modüle uygulamak istiyorsanız, Özel CSS sekmesi olan Gelişmiş Tasarım Ayarları'nı kullanabilirsiniz.

ePanel'i kullanmak için WordPress yönetim panosunda Divi > Tema Seçenekleri'ne gidin . Genel Ayarlar sekmesinde, Özel CSS alanını bulacağınız en alta gidin. Özel CSS'nizi girin ve Kaydet 'i tıklayın . Presto, değiştir! CSS'niz , tıpkı bir style.css dosyasını düzenler gibi sitenize yansıtılacaktır. Ayrıca, ePanel'de deneyebileceğiniz CSS özelleştirmelerinin başka örneklerini de sağladık.

Her Divi modülünün, hemen hemen her şeyi özelleştirmenizi sağlayan kendi Genel ve Gelişmiş ayarları olsa da, hepsinde kendi CSS'nizi girmeniz için bir Özel CSS sekmesi de bulunur. Bu sekmeyi bulmak için bir modülü, satırı veya bölümü düzenleyerek ayarlar açılır penceresini görün. Özel CSS sekmesinde, değişikliklerinizi ayrı ayrı uygulayabilmeniz için modülün her yapısal öğesi için ayrı alanlar göreceksiniz.

Divi'nin ePanel ve Özel CSS sekmelerini kullanmanın avantajları, bir alt tema oluşturma ihtiyacını ortadan kaldırması ve CSS'yi belirli sayfalardaki ayrı modüllere kolayca hedeflemesidir. Divi gibi gelişmiş bir tema, size WordPress CSS'niz üzerinde çok az güçlükle üstün kontrol sağlar.

Çözüm

İçeriğinizin harika olduğunu bilseniz de popüler bir tema kullanıyor olsanız bile sitenizin tasarımının diğerlerinden farklı olmasını sağlamak istersiniz. CSS ile sitenizin tasarımını, aynı temayı kullanan diğerlerine kıyasla tamamen farklı görünecek şekilde özelleştirebilirsiniz.

WordPress'in gücünün bir parçası, herhangi bir sorunu çözmek için birden fazla yola erişim sağlamaktır. WordPress CSS'yi özelleştirmenin birkaç yolu vardır:

1. Bir çocuk teması kullanın.
2. Özelleştiriciyi kullanın.
3. Bir CSS eklentisi kullanın.
4. Divi gibi gelişmiş bir tema kullanın.

WordPress' CSS'sini özelleştirme konusunda nasıl bir deneyim yaşadınız? En sevdiğiniz ipuçlarını ve püf noktalarını duymayı çok isteriz – aşağıdaki yorumlar bölümüne abone olun ve bize bildirin!

Makale küçük resmi, Max Griboedov, ProStockStudio / Shutterstock.com