WordPress'te Belirli Kullanıcı Rolleri İçin CSS Nasıl Uygulanır (Kolay Yol)

Farklı kullanıcıların farklı deneyimlere ihtiyaç duyduğu birçok WordPress sitesinde çalıştık. Üyeler, müşteriler, yazarlar ve danışanlar, rollerine uyan bir düzenden faydalanabilir.

Ancak WordPress, kullanıcı rollerine göre stillendirme yapmak için yerleşik bir yol sunmaz. Tema dosyaları aracılığıyla bunu yapmaya çalışmak riskli gelebilir, özellikle de bir geliştirici değilseniz.

Yanlış kod ekleyerek kullanıcıların takıldığını veya sitelerini bozduklarını gördük. Bu yüzden bunu halletmek için her zaman daha güvenli ve daha kolay bir yol öneriyoruz.

Bu kılavuzda, başlangıç dostu bir araç kullanarak belirli kullanıcı rolleri için özel CSS'nin nasıl uygulanacağını göstereceğiz. Bu, hızlı ve güvenli bir çözüme ihtiyaç duyduğumuzda kendi sitelerimizde kullandığımız yöntemdir.

Bu rehberde ele alacağımız konuların hızlı bir özetini aşağıda bulabilirsiniz:

• WordPress'te Belirli Kullanıcı Rolleri İçin CSS Nasıl ve Ne Zaman Uygulanır
• WordPress'te Belirli Kullanıcı Rollerinin Özel CSS'ini Uygulama
• WordPress Yönetici Alanı İçin Belirli Kullanıcı Rollerinin Özel CSS'ini Ekleme
• Diğer Alanlarda Belirli Kullanıcı Rolleri İçin Özel CSS Ekleme
• Sıkça Sorulan Sorular
• Ek İpuçları

WordPress'te Belirli Kullanıcı Rolleri İçin CSS Nasıl ve Ne Zaman Uygulanır

İşletmelerimiz için kullanıcı girişi gerektiren çeşitli web sitelerini yönetiyoruz. Farklı kullanıcı rolleri için görünümü özelleştirme ihtiyacını sık sık buluyoruz.

Bu sitelerde bölünmüş testler yaparken, kişiselleştirmenin kullanıcı deneyimini büyük ölçüde geliştirdiğini keşfettik. Daha iyi bir kullanıcı deneyimi, nihayetinde daha fazla müşteri memnuniyeti, dönüşüm ve satış ile sonuçlanır.

İster site sahibi, ister geliştirici veya tasarımcı olun, sitenizin farklı kullanıcılar için nasıl göründüğü üzerinde kontrol sahibi olmak çok faydalı olabilir.

İşte bazı yaygın kullanım durumları:

• Üyelik Siteleri: Özel CSS kullanarak premium üyelere farklı deneyimler sunabilirsiniz.
• E-ticaret Mağazaları: Alışveriş sepetlerini, müşteri indirimlerini ve oturum açmış müşteriler için diğer özellikleri vurgulayabilirsiniz.
• Çok Yazarlı Bloglar: Birden fazla yazarla bir blog yönetmek karmaşık hale gelebilir. Özel CSS ile, katkıda bulunanlar ve aboneler için işleri basit tutarken editörler için temiz, verimli bir arayüz oluşturabilirsiniz.
• Müşteri Siteleri: Özel CSS ile belirli öğeleri gizleyerek müşteriler için basitleştirilmiş bir yönetici alanı oluşturabilirsiniz.

Şimdi sorun, WordPress'e farklı kullanıcı rolleri için hangi CSS kodunun yükleneceğini nasıl söyleyeceğimizdir.

WordPress'te Belirli Kullanıcı Rollerinin Özel CSS'ini Uygulama

WordPress'te CSS dahil özel kodu yönetmenin en kolay yolu WPCode kullanmaktır. WordPress için en iyi kod parçacığı eklentisidir ve özel CSS'nizi tek bir yerde güvenli bir şekilde yönetmenize olanak tanır.

Not: WPCode'un ücretsiz sürümü de mevcuttur. Ancak, daha fazla özelliği açmak için ücretli bir plana yükseltmenizi öneririz.

Neden WPCode'u öneriyoruz:

• Web sitenizi bozmadan CSS dahil herhangi bir özel kodu güvenli bir şekilde eklemenize olanak tanır. Bir kod parçacığı çalışmıyorsa, kolayca devre dışı bırakabilirsiniz.
• İhtiyaç duyulduğunda bir kod parçasını çalıştırmanıza olanak tanıyan güçlü kod ekleme ve koşullu mantık araçlarıyla birlikte gelir.
• Birçok ayrı eklenti yüklemekten sizi kurtaran, kullanışlı kod parçacıklarından oluşan devasa bir kod kitaplığına erişim sağlarsınız.

Bununla birlikte, bazı özel CSS ekleyelim ve belirli kullanıcı rolleri için uygulayalım.

WPCode'da Özel CSS Ekleme

Öncelikle WPCode eklentisini yükleyip etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin eğitimimize bakın.

Etkinleştirdikten sonra, Kod Parçaları » + Parça Ekle sayfasına gidin. Orada, çeşitli görevler için birçok kullanışlı parça göreceksiniz.

Ancak, özel bir CSS kodu eklediğiniz için, ‘Özel Kodunuzu Ekleyin (Yeni Parça)’ kutusunun altındaki ‘Özel Parça Ekle’ye tıklayarak sıfırdan başlamanız gerekecektir.

Ardından, ekranda beliren seçenekler listesinden kod türü olarak 'CSS Snippet'i seçmeniz gerekir.

Bu sizi kod düzenleyiciye götürecektir.

İlk olarak, kodun ne işe yaradığını hatırlamanıza yardımcı olacak bir başlık girmeniz gerekir.

Artık özel CSS kodunuzu ‘Kod Önizleme’ kutusuna ekleyebilirsiniz.

Bu eğitim için, yönetici alanındaki 'Gönderiler' menüsünü arka plan rengini değiştirerek vurgulayan bu kodu kullanıyoruz. Buraya kendi CSS kodunuzu kullanabilirsiniz:

li#menu-posts {
    background-color: #bf0505;
}

Kullanıcı Rolü Koşullu Mantığını Seçin

Ardından, 'Akıllı Koşullu Mantık' kutusuna aşağı kaydırın ve 'Mantığı Etkinleştir' seçeneğinin yanındaki geçişi açın.

Bundan sonra, ‘Koşul’u (Göster veya Gizle) seçin ve ardından ‘Yeni grup ekle’ye tıklayın.

Genişletmek için Kural'daki ilk kutuya tıklayın. Seçebileceğiniz bir kural listesi göreceksiniz.

Örneğin, oturum açma durumu, kullanıcı rolü, cihaz türü vb. seçebilirsiniz.

Bu özel CSS kodunu belirli bir kullanıcı rolü için eklemek istediğinizden, ‘Kullanıcı Rolü’nü seçin.

Bundan sonra, hangi kullanıcı rolüne uygulamak istediğinizi seçebilirsiniz.

Not: '+ Yeni grup ekle' düğmesine tıklayarak birden fazla koşullu mantık kuralı ekleyebilirsiniz.

İşiniz bittiğinde, ekranın sağ üst köşesindeki 'Snippet Kaydet'e tıklayın ve ardından 'Aktif' olarak değiştirin.

WPCode artık özel CSS'nizi WordPress'teki belirli kullanıcı rollerine gösterecektir.

WordPress Yönetici Alanı İçin Belirli Kullanıcı Rollerinin Özel CSS'ini Ekleme

Özel CSS'nizin yalnızca WordPress yönetici alanına eklenmesini istiyorsanız, WPCode bunu daha da kolaylaştırır.

Kod düzenleme ekranında, ‘Konum’ seçeneğine gidin. Açmak için açılır menüye tıklayın ve CSS'yi otomatik olarak yükleyebileceğiniz birçok konum göreceksiniz.

Şimdi, CSS kodunuzu WordPress yönetim alanına yüklemek için 'Yönetici üstbilgisi' veya 'Yönetici altbilgisi' seçeneğini seçmeniz yeterlidir.

Diğer Alanlarda Belirli Kullanıcı Rolleri İçin Özel CSS Ekleme

E-ticaret web sitelerinde tasarım kişiselleştirmesi, geliştirilmiş bir kullanıcı deneyimi sağlar ve terk edilmiş sepet satışlarını azalttığı kanıtlanmıştır.

Bir WooCommerce mağazası işletiyorsanız, çevrimiçi kurslar satıyorsanız veya başka dijital ürünler satıyorsanız, oturum açmış müşteriler için özel CSS eklemek faydalı olacaktır.

WPCode, özel kodu bir e-ticaret sitesine nereye ekleyeceğinizi seçmenizi sağlar. Konum ayarları altında 'e-ticaret' sekmesine geçin.

Özel CSS'nizi ekleyebileceğiniz sepetten önce, ödeme formundan önce, ürün sayfalarında ve daha fazlası gibi birkaç yer göreceksiniz.

WPCode, WooCommerce, Easy Digital Downloads ve MemberPress'i destekler.

Sıkça Sorulan Sorular

Farklı kullanıcı rolleri için WordPress'i özelleştirme hakkında en sık sorulan soruların yanıtları burada.

Ek İpuçları

Aşağıda, WordPress'te özel kullanıcı deneyimleri tasarlamanıza yardımcı olacak bazı ek kaynaklar bulunmaktadır. Hatta bu seçeneklerden bazılarında CSS öğrenmenize bile gerek yok:

• WordPress'te Farklı Kullanıcılara Kişiselleştirilmiş İçerik Nasıl Gösterilir
• WordPress Web Sitenizdeki Renkleri Özelleştirme
• WordPress Formlarınızı Nasıl Özelleştirir ve Stilleştirirsiniz (2 Kolay Yöntem)
• WordPress'te Özel Bir Ana Sayfa Nasıl Oluşturulur (3 Yöntem)

Umuyoruz ki bu makale, WordPress'te belirli kullanıcı rolleri için CSS'nin nasıl uygulanacağını öğrenmenize yardımcı olmuştur. Ayrıca yeni başlayanlar için varsayılan WordPress tarafından oluşturulan CSS özet sayfamıza bakmak veya WordPress yönetici alanını iyileştirmek için bu eklentilere ve ipuçlarına göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.