Ana İçeriğe Geç

WordPress'in farklı kategorilere benzersiz bir stil vermek nasıl

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

WordPress'te kategorileri farklı kategorilere ayırmak ister misiniz?

Çoğu WordPress teması, tüm kategori arşiv sayfaları için aynı stili kullanır. Bununla birlikte, içerik açısından zengin bir web siteniz varsa, potansiyellerini en üst düzeye çıkarmak için her kategoriyi farklı bir şekilde görüntülemeyi seçebilirsiniz.

Bu öğreticide, WordPress blogunuzda kategorileri nasıl farklı göstereceğinizi göstereceğiz.

Daha fazla uzatmadan sizi listemizi keşfetmeye davet ediyoruz. Ama önce, WordPress'i hiç kurmadıysanız öğrenin Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

WordPress'teki kategorilere neden farklı bir stil vermelisiniz?

Daha önce de söylediğimiz gibi, çoğu WordPress teması her kategori arşiv sayfası için aynı şablonu kullanır. Bunun nedeni, WordPress tema geliştiricilerinin web sitenizdeki kategorileri nasıl kullanacağınızı bilmemesidir.

Ayrıca Oku: Nasıl sadece WordPress abonelere RSS içeriği görüntülemek için

Ancak, içerik açısından zengin bir web siteniz varsa, bir arşiv sayfasının düzenini değiştirme kategorisinin, kullanıcıların o sayfadaki içerikle nasıl etkileşimde bulundukları üzerinde önemli bir etkisi olabilir.

Örneğin, bir haber veya dergi web sitesini yönetiyorsanız, yerel haberler kategorisinde yerel duyuruları görüntüleyebilirsiniz. Hava durumu bilgilerini görüntüleyebilir, bu kategorideki en popüler hikayeleri vb. Görüntüleyebilirsiniz.

Bununla birlikte, WordPress'te bireysel kategorilerin nasıl kolayca özelleştirilebileceğini görelim.

Kategorilere bir stil nasıl verilir

WordPress'te kategorileri sınıflandırmanın birkaç yolu vardır. Kategorilere farklı bir stil kazandırmak için size iki farklı yöntem göstereceğiz ve ihtiyaçlarınıza ve beceri seviyenize en uygun olanları seçebilirsiniz.

Bir WordPress temasında tek bir kategori şablonu kullanma

WordPress temaları standart bir şablon hiyerarşisini izler. Bir şablon dosyası adına göre, WordPress bir sayfayı görüntülemek için otomatik olarak doğru şablonu seçebilir.

Örneğin, kategori arşiv sayfalarını görüntülemek için category.php dosyasını arar.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

WordPress ayrıca şunları yapmanızı sağlar: model oluştur bireysel kategoriler için. "" Kategorisini sınıflandırmak istediğinizi varsayalımApple"Farklı. Bunu, WordPress temanıza yeni bir şablon dosyası ekleyerek ve adlandırarak yapabilirsiniz. kategori-apple.php.

Bir FTP istemcisi kullanarak WordPress web sitenize bağlanın, ardından şuraya gidin: / Wp-content / themes / your-tema / ve category-apple.php adlı yeni bir dosya oluşturun. "Apple" ı kategorinizin adıyla değiştirmeyi unutmayın.

Yeni bir wordpress kategorisi ekleyin

Dosyayı kullanabilirsiniz " category.php WordPress temanızın başlangıç ​​noktası. Sadece tüm içeriğini düzenleyin ve kopyalayın. Şimdi yeni dosyanızı "olarak yeniden adlandırın" kategori-apple.php Ve kodu içine yapıştırın.

Ardından, bireysel kategori modelinizde değişiklik yapmaya başlayabilirsiniz. Bu kategori için farklı bir kenar çubuğu oluşturabilir ve kullanabilirsiniz, tam genişlikte bir sayfa haline getirebilirsiniz, hoşgeldin mesajı ekle ya da ne istersen.

CSS kodunu kullanarak kategorilere stil verin

WordPress, web sitenizdeki farklı öğelere otomatik olarak CSS sınıfları ekler. Bunlar hem beden sınıfını hem de yayın sınıfını içerir.

Örneğin, bir kategori arşiv sayfasını görüntüler ve ardından İnceleme aracını kullanırsanız, CSS sınıflarının "kategorileri" ni ve "gövde" etiketinde kategori adını fark edeceksiniz.

Gövde wordpress kategori etiketi

Bu CSS sınıfını farklı kategoriler için özel CSS ekleme.

İşte başlangıç ​​noktası olarak kullanabileceğiniz bir CSS örneği.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

body.category-elma {background-color: #EEE; Arka plan: url ( "http://example.com/wp-content/uploads/2017/background.jpg ') sabit no-repeat; Renk: #FFFFFF; } Arama_özellikleri .kategori-elma .site {arka planı: #232323; } Arama_özellikleri .kategori elma {renkli: #cccccc; }

CSS sınıfındaki kategori adını kategorinizin adı ile değiştirmeyi unutmayın.

Bir wordpress css kod kategorisini düzenleme

Artık WordPress'e özel CSS kodu ekleyebilirsiniz. Ancak, özel bir CSS kodu eklemek için premium bir çözüme ihtiyacınız varsa, bu görevde size yardımcı olacak 2'den fazla premium WordPress eklentisi sunuyoruz.

1. Kolay Özel JS ve CSS 

Bu premium WordPress eklentisi, bunları web sitenizin herhangi bir bölümüne eklemenizi sağlayan güçlü bir CSS ve Javascript kod editörüdür. WordPress temanız için büyük bir güncellemeden sonra bile özelleştirmelerinizi korumanıza olanak tanır. Kolay özel js ve css ekstra özelleştirme wordpress eklentisi

Kişiselleştirilmiş kodunuzun kullanım alanını sınırlama olanağına sahipsiniz. Örneğin, kodunuzu yalnızca video formatına sahip bir makale için kullanabilirsiniz.

Hakkındaki makalelerimize bakın WordPress'te kullanım şartlarının kabulü nasıl istenebilir

Veya kodunuzu belirli bir WordPress temasıyla sınırlayabilirsiniz; Şu anda WordPress blogunuz için tema değiştiriyorsanız kullanışlıdır.

Indir | gösteri | Web hosting

2. Sayfalarda Özel JavaScript ve CSS!

Bu WordPress eklentisi sayesinde, ekleme olanağınız var CSS stilleri ve belirli sayfalarda özel JavaScript. Ayrıca birden fazla sayfa için kural tanımlamanıza izin verir. Bu şekilde, belirli bölümler için önceden tanımlanmış veya benzersiz stillere sahip olabilirsiniz.

Sayfalarda özel javascript css wordpress eklentisi e1558356028853

Bu WordPress eklentisi tarafından sunulan diğer tüm özellikler gibi, web sitenizin farklı sayfalarına kolayca farklı komut dosyaları ekleyebilirsiniz.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Sonuç

Buraya ! Bu eğitim için bu kadar, umarım WordPress'e özel CSS kodu eklemenize izin verir. çekinmeyin Bu makaleyi arkadaşlarınızla en sevdiğiniz sosyal ağlarda paylaşın

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

...  

Bu makale yorumları 2 içeriyor

  1. Salut!
    Lütfen bana yardım edip edemeyeceğine bak çünkü kafamı içiyorum
    Divi ve woocommerce ile bir çevrimiçi mağaza yapıyorum ve bir sorun yaşıyorum çünkü kategori sayfasını özelleştiremiyorum.
    Bağlantıyı görmeniz için iletiyorum:
    https://chachocarp.com/product-category/los-mas-vendidos
    Değiştirmek istediğim şey:
    1. Bu kategoride 24 ürünüm var ve 12 ürünün iki sayfasında göstermek yerine bunları 9, 9 ve 6'nın üç sayfasında gösteriyor ve ölümcül derecede net.
    2. Fareyle ürünlerin üzerine geldiğimde fareyle üzerine gelme yapılandırmasını korumadım. Şeffaflığın mavi olmasını ve ana sayfanın mağaza modülündeki gibi "ürünü naranaja görüntüle" harflerinin olmasını istiyorum.
    3. Sol kenar çubuğunun tüm kategorileri ve alt kategorileri göstermesini istiyorum.
    Bunu nasıl yaptı?
    Merci ton yardımcısı dökmek

    1. Merhaba Miguel,

      Lütfen WooCommerce veya Divi ile ilgili bir makalede soruyu sorun. Ve size cevap vermekten memnuniyet duyarım. 😉

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş