Farklı kullanıcıların farklı deneyimlere ihtiyaç duyduğu birçok WordPress sitesi üzerinde çalıştık. Üyeler daha temiz düzenlere ihtiyaç duyabilir, yazarlar daha az dikkat dağıtıcı unsurlardan faydalanabilir ve müşteriler genellikle yöneticilerle aynı öğeleri görmemelidir.
Zorluk, WordPress'in siteyi kullanıcı rollerine göre stilize etmek için yerleşik bir yol içermemesidir. Belirli kullanıcılar için öğeleri gizlemek, düzenleri ayarlamak veya tasarımları ince ayar yapmak istiyorsanız, genellikle tema dosyalarını düzenlemeye veya özel kod eklemeye zorlanırsınız.
İşte işlerin riskli hale geldiği yer burasıdır. Kullanıcıların, özellikle tema dosyaları veya alt temalar içinde çalışırken, yanlış yere küçük bir CSS parçacığı ekleyerek sitelerini yanlışlıkla bozduklarını gördük.
Kullanıcı rollerine göre CSS uygulamak için en güvenli ve en kolay yol WPCode eklentisini kullanmaktır. Yerleşik Koşullu Mantığı, tema dosyalarınıza dokunmadan Yöneticiler, Editörler veya Aboneler gibi rolleri hedeflemenizi sağlar.
Bu kılavuzda, başlangıç dostu bir araç kullanarak belirli kullanıcı rolleri için özel CSS uygulayacağınızı göstereceğiz. Bu, daha sonra sorunlara neden olmayacak hızlı, güvenli bir çözüm gerektiğinde kendi sitelerimizde kullandığımız yaklaşımdır.
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
İşletmelerimiz için kullanıcı girişi gerektiren çeşitli web siteleri 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. Araştırmalar, kişiselleştirilmiş web deneyimlerinin dönüşüm oranlarını %10-15'e kadar artırabileceğini gösteriyor, bu da role dayalı stil oluşturmayı değerli bir strateji haline getiriyor.
Daha iyi bir kullanıcı deneyimi, nihayetinde daha fazla müşteri memnuniyetine ve satışa yol açar.
İ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. Bu, özellikle teknik olmayan kullanıcıları kafasını karıştırabilecek karmaşık kontrol paneli widget'larını veya eklenti bildirimlerini gizleyerek müşteri arayüzünü basitleştirmek için kullanışlıdır.
Ş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ı Rolleri İçin Özel CSS Nasıl Uygulanır
CSS dahil özel kodu WordPress'te 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önetmenizi sağlar.
Not: WPCode'un ücretsiz bir sürümü de mevcuttur. Ancak, daha fazla özelliği etkinleştirmek 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, belirli bir kullanıcı rolü için özel CSS eklemenin nasıl yapıldığına bakalım.
WPCode'da Özel Bir CSS Parçacığı Ekleme
Bu örnek için, belirli bir rol (Editör gibi) için WordPress Yönetici Kontrol Panelini özelleştireceğiz. İşlemin nasıl çalıştığını göstermek için arka uçtaki 'Yazılar' menüsünü vurgulayan bir kod kullanacağız.
- İlk olarak, WPCode eklentisini kurun ve etkinleştirin. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin eğitimimize bakın.
- Etkinleştirdikten sonra, Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.
- ‘Özel Kod Ekle (Yeni Parça)’ üzerine gelin ve ‘+ Özel Parça Ekle’ye tıklayın.
- Bir sonraki ekranda, sağdaki açılır menüden kod türü olarak ‘CSS Parçası’nı seçin (genellikle HTML Parçası olarak varsayılan olur).
- Parçanız için “Editörler İçin Yönetici Menüsü Vurgusu” gibi bir başlık girin.
- Özel CSS'nizi ‘Kod Önizleme’ kutusuna yapıştırın.
Bu yönetici alanı örneği için kullandığımız örnek kod aşağıdadır:
li#menu-posts {
background-color: #bf0505;
}
Önemli: Doğru Konumu Seçme
Bu özel kod Yönetici Paneli için olduğundan, ‘Ekleme’ bölümüne aşağı kaydırmanız ve konumu ‘Yönetici Üstbilgisi’ olarak seçmeniz gerekir.
Sitenizin ön ucu için CSS ekliyor olsaydınız (bir üye sayfası gibi), konumu ‘Site Geneli Üstbilgisi’ olarak bırakırdınız.
Koşullu Mantık Uygulama
Şimdi, bu kodun yalnızca istediğimiz kullanıcı rolü için çalıştığından emin olalım.
- ‘Akıllı Koşullu Mantık’ kutusuna aşağı kaydırın ve geçişi ‘Mantığı Etkinleştir’ olarak değiştirin.
- ‘Koşul’u ‘Göster’ olarak ayarlayın ve ‘+ Yeni grup ekle’ye tıklayın.
- Açılır listeden ‘Kullanıcı Rolü’nü seçin.
- Hedeflemek istediğiniz belirli rolü seçin (örneğin, Editör, Abone).
- Son olarak, sağ üstteki ‘Snippet Kaydet’e tıklayın ve geçişi ‘Etkin Değil’den ‘Etkin’e getirin.
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, bu belirli sayfaları kolayca hedeflemenizi sağlar. “WooCommerce” gibi konum seçenekleri görseniz de, görüntüleme sorunlarını önlemek için tüm CSS'ler için Ekleme Konumu'nu Site Geneli Üstbilgisi olarak tutmanızı öneririz.
Konumu değiştirmek yerine, Akıllı Koşullu Mantık bölümünü kullanın. CSS'nin yalnızca “Sayfa Türü” “WooCommerce Sepeti” veya “Ödeme” olduğunda gösterilmesi için kurallar ekleyebilirsiniz.
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.
WordPress'te özel kullanıcı rollerine CSS uygulayabilir miyim?
Evet. WPCode, üyelik eklentileri, LMS araçları veya özel kod tarafından oluşturulan özel olanlar da dahil olmak üzere herhangi bir kullanıcı rolünü hedeflemenizi sağlar. Özel rolün koşullu mantık seçeneklerinde göründüğünden emin olmanız yeterlidir.
CSS değişiklikleri bazı kullanıcılar için görünmezse ne olur?
Bu, siteniz agresif önbellekleme veya bir CDN kullanıyorsa olabilir. Önbelleğinizi temizlemeyi deneyin ve WPCode'un parçasının aktif olduğundan ve doğru konumu ve rolü hedeflediğinden emin olun.
Canlı hale getirmeden önce CSS değişikliklerini önizleyebilir miyim?
WPCode'un görsel bir önizlemesi yoktur, ancak test ederken snippet'i etkin değil olarak tutabilirsiniz. Tarayıcınızın geliştirici araçlarını kullanarak değişiklikleri incelemek için Gizli veya Özel pencere açmanızı ve belirli kullanıcı rolüyle (örneğin, Abone olarak) oturum açmanızı öneririz.
Tema dosyalarını düzenlemek yerine WPCode kullanmak güvenli midir?
Kesinlikle. WPBeginner'da, tüm özel kodlarımızı tema dosyalarından ayrı tuttuğu için WPCode'u kullanıyoruz, bu nedenle güncellemeler sırasında değişiklikler kaybolmaz. Ayrıca, parçacıkları tek bir yerde yönetmeyi daha güvenli ve kolay hale getirir.
Ek Kaynaklar
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.
Bir sorunuz veya öneriniz mi var? Tartışmayı başlatmak için lütfen bir yorum bırakın.