Konunuzla ilgili makalelere tek ve çift sınıflar eklemek ister misiniz? WordPress blog ? Bir sınıf eklemek, her makale için belirli bir stil görüntülemenizi sağlar.
Bu derste, size WordPress'te çift veya tek derslerin nasıl gösterileceğini göstereceğiz.
Neden sınıf eklesin? çiftleri "Ya da" garip » temanız üzerine WordPress blog ?
çok WordPress temaları WordPress yorumları için eski veya aynı sınıfı kullanın. Kullanıcıların bir yorumun nerede bitip diğerinin nerede başladığını görmelerini sağlar.
Aynı şekilde makaleleriniz için de bu tekniği kullanabilirsiniz. Kullanıcıların büyük sayfaları hızla taramasına izin vermek estetik açıdan hoş görünüyor. Bu, özellikle gazete veya dergi sitelerinin ana sayfası için kullanışlıdır.
Bununla birlikte, makalelerinizde nasıl sınıf ekleyeceğinizi göreceğiz. WordPress blog.
Nasıl WordPress üzerine tek / çift bir sınıf eklemek
WordPress varsayılan CSS sınıfları oluşturur ve bunları anında web sitenizdeki farklı makalelere ekler. Bu CSS sınıfları, eklentilerin ve tema geliştiricilerin, her farklı makaleye kendi stillerini eklemelerine yardımcı olur.
WordPress ayrıca "adlı bir işlev sunar post_class Tema geliştiricileri tarafından makalelere sınıf eklemek için kullanılır.
İşlevi post_class Aynı zamanda bir filtredir, bununla onu değiştirebileceğiniz anlamına gelir. Tam olarak burada yapacağımız şey bu.
Sadece bu kodu function.php dosyanıza ekleyin. WordPress tema.
oddeven_post_class fonksiyonu ($ sınıfı) {global $ current_class; $ Sınıflar [] = $ current_class; Current_class $ = ($ current_class == 'tuhaf')? ' 'Hatta'' garip; $ Sınıfları return; } Add_filter ( 'post_class', 'oddeven_post_class'); Küresel $ current_class; $ Current_class = 'garip';
Bu fonksiyon sadece eşitlemek için sınıf ve garip öğeleri ekler.
Sitenizin kaynak kodunda tek ve çift sınıflar bulacaksınız. Fareyi bir makalenin başlığına götürün ve ardından öğeyi incelemek için sağ tıklayın.
Artık makalelerinize tek ve çift sınıfları eklediniz. Bir sonraki adım, onlara CSS ile benzersiz bir stil vermektir. Özel CSS kodunuzu alt temanıza veya basit bir CSS eklentisi kullanarak ekleyebilirsiniz.
İşte başlangıç noktası olarak kullanabileceğiniz bir CSS kodu örneği:
.even {arka planı: #f0f8ff; .odd} {arka planı: #f4f4fb; }
İşte sonuç nasıl olabilir:
İyi sonuçlar elde etmek için biraz pratik yapmanız gerekecek, ancak bunun için CSS'de uzmanlaşmanız veya sadece aşağıdaki gibi bir araç kullanmanız gerekecek CSS Kahraman.
Bu kadar basit. Umarım bu eğitim size çok yardımcı olacaktır. Bize sorular sormakta veya bu öğreticiyi en sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşmakta çekinmeyin.
