WordPress şablon etiketleriyle belirli içerik için CSS hedef
WordPress’ten sevdiğim şeylerden biri esnekliği. Basit bir blogu, yüksek güçlü bir içerik yönetim sistemi olarak çalıştırmak veya özel uygulamalar çalıştırmak için kullanabilirsiniz. Temalar geliştirirken, size çok fazla esneklik sağlayan bir husus, şablon etiketlerinin kullanılmasıdır. Bu, verileri dinamik olarak alacak ve içeriği tasarımınız için uygun bir şekilde görüntülemenize olanak tanır. Bu yazıda iki çok özel şablon etiketine odaklanacağım: body_class () ve post_class () etiketleri. WordPress’in bunu sitenizde dinamik olarak CSS sınıfı üretmek için nasıl kullandığını ve blogunuzu veya web sitenizi düzenlemek için nasıl kullanabileceğinizi göstereceğim.
Özellikle, çeşitli kategorilerden içerik düzenlemek, her kategoriye belirli renkler, metin efektleri veya düzen stilleri eklemek için bu sınıfları nasıl kullanacağınızı göstereceğim. Bu şekilde, sitenizin farklı bölümünüze farklı bir görünüm verebilir ve arşiv sayfanızı da canlandırabilir, kullanıcıların aradıkları içerik türünü hemen bulabilmeleri için kendi stilinin farklı bir kategorisi sağlayabilirsiniz. Bu gönderiyi takip etmeniz gereken şey, aşağıdakilere ihtiyacınız var:
WordPress geliştirme kurulumu (sonuçlardan gerçekten memnun olana kadar tüm bunları doğrudan sitenizde yapmayın).
Kendi temanız veya üçüncü taraf temalarının çocuk teması. Üçüncü taraf temasını hemen düzenlemeyin, çünkü daha sonra güncellenirse, tüm değişiklikleriniz kaybolacaktır.
Bir kod editörü.
İlk şablon etiketini tanımlayın ve kullanın, şablon etiketine bakalım. Bu her temada olmalıdır – temanız değilse, eklediğinizden emin olun! Body_class () şablon şablonu etiketleri İlk şablon Body_Class () Şablon Tag (). Bu, gövde öğesinin açılmasıyla Header.php başlık dosyanıza dahildir. Bunu şöyle kodluyorsun:
Çekirdek yükleme FA1AA4761C930017C5454D62B657DE25
Bunu bitirdikten sonra, WordPress’in görüntülenen içerik türüne ve kullanılan şablon dosyasına bağlı olarak sitenizdeki her sayfada vücut öğeleri için çeşitli sınıflar yayınladığını göreceksiniz. Web sitem ana sayfam için ortaya çıkan kod aşağıdadır:
Html in body_class benim ana sayfam
Ana Sayfa: Bu, sitenin ilk sayfasıdır.
Sayfa-TEMPLATE: Bu statik bir sayfa olduğu için bir sayfa şablonu kullanır.
Page-TEMPLATE-PAGE-Full-Width: Sayfalar tarafından kullanılan şablonlar.
Page-TEMPLATE-PAGE-Full-Width.php: Kullanılan şablon dosyasının tam adı.
Sayfalar: İçerik türü. Ana sayfam ana blog sayfasıysa, bu farklı olacaktır.
Page-ID-7: Bu özel sayfa kimliği.
Ve bu kategori arşivi sayfası için ortaya çıkan koddur:
HTML Kategori Arşivi için Vücut Sınıfı Sonu Bu bize birkaç farklı şey anlatıyor:
Arşivler: Bu, bir gönderi veya sayfa yerine bir arşiv sayfasıdır.
Kategori: Bu bir kategori arşivi.
Kategoriler: Görüntülenen belirli kategoriler arşivleri.
Kategori-154: Bu kategorinin kimliği.
CSS sınıfını hedeflemek için kullanabileceğiniz içerik türünü hayal etmiş olabilirsiniz:
bireysel yayınlar veya sayfalar
Ev vahşi kategorisinin arşivi
Tüm kategori arşivleri veya belirli özel taksonomi için tüm arşivler.
Ancak bunu yapmaya devam etmeden önce, şablon etiketimizin ikincisine bakalım. Post_class şablon etiketi () Bir sonraki şablon etiketi döngülerde kullanılır. Dolayısıyla, temanızda döngü yapmanız gereken bir dizi dosyanız varsa (dahil olan bazı dosyalar veya şablon dosyanızda kodlanmış bazı döngüler), bu dosyaların her birine eklemeniz gerekir. Genellikle gönderinizi içerecek olan öğeyi açarak eklersiniz:
Çekirdek yükleme FA1AA4761C930017C5454D62B657DE25
Makalemin öğesine iki şey eklediğimi unutmayın: Yalnızca Post_class () etiketi değil, aynı zamanda ID de posta kimliği kullanıyor. Göreceğimiz gibi, değer daha sonra öğe için bir sınıf ve kimlik olarak üretilir. Bunun ana sayfada nasıl görüntülendiğini görelim:
Post -sınıfı çıkışı
Burada yapabileceğimiz birkaç dersimiz var: 7 sonrası: kimlik gönderisi
Sayfalar: Gönderi türü. Site ana sayfam statik bir sayfadır.
Tür sayfası: Gönderi türünü göstermenin başka bir yolu
Yayınlama Durumu: Bu sayfa yayınlandı (taslak veya planlanmış değil)
Has-Post-Thumbnail: Bu sayfanın bir küçük resim yazısı var (her zaman gördüğünüz bir şey değil, ancak bu sitedeki sayfama üstün resimler ekledim).
Hentry: RSS yemindeki posta kuvvetini ayarlamak için kullanılan sınıf.
Şimdi kategori arşivimize bakalım:
Kategori Arşivi için Post -Sclass Çıkışı
Bu bize çok sayıda çıktı sınıfı verir. Onları görelim. 2522 sonrası: ID gönderisi.
Gönderme: Post Türü. Tip-Post: Yazı Türü Tekrar.
Yayınlama Durumu: Bu yazı yayınlandı.
Format Standardı: Bu yazı için gönderme biçimi.
Has-Post-Thumbnail: Bu yazının bir küçük resim veya üstün görüntü var. Üstün görüntülere girmek istediğiniz arşiv sayfasını düzenlemek için çok kullanışlıdır, böylece bunlara sahip olmayan yayınlar ayarlanabilir.
Hentry: RSS için.
Kategori-Basics, Kategori Rolüleri: Kategoriler bu yazı tarafından satın alınır.
Tag-Admin vb.: Bu yazı için etiket.
Kendi sitenizi keşfetmek ve çıktı sınıfını görmek için zaman ayırmanızı öneririm. Sadece bir gönderi ve arşiv değil – örneğin 404’ü veya arama sayfanızı hedeflemek için kullanabilirsiniz.
Bu, hem kendi sayfalarında hem de arşivlerde her gönderiyi düzenlememiz için bize çok fazla esneklik sağlar. Bunun nasıl yapılacağını görmeye devam edelim. Body_class () ve Post_Class () ‘nın stil için kullanma artık bu şablon etiketinin nasıl kodlandığını ve ne yaptıklarını biliyorsunuz, nasıl kullanabileceğimizi görmeye devam edelim. Size farklı kategorilere farklı bir renk veren ve kategoriye ve arşivlere stil vermek için kullanan bir örnek göstereceğim. Bu, gördüğüm bu etiketin en yaygın kullanımlarından biridir, ancak diğer popüler yayın yayınlarına kendi tarzını vermektir.
Tüm bunları tema stili sayfanızda yaparsınız, bu nedenle üçüncü taraf bir tema kullanırsanız, bir çocuğun teması yapmayı unutmayın. Bir kimlik veya slug kullanmayı seçin (yakında daha fazla bilgi), kodumu kendi sitenizdeki belirli kategorileri hedefleyecek şekilde ayarlamanız gerekir. [Blog] Renkli Learn-WP blogu
Bunun, başlık stiline ve sitemin yanına göre Blue Post unvanını kullandığını göreceksiniz. Bu, Genel Arşiv sayfası için kullandığım stil. Bu, düzenlenmiş CSS’dir:
Çekirdek yükleme FA1AA4761C930017C5454D62B657DE25
Body_class etiketini kullanarak stil düzenlemesi oldukça basittir. Ancak ekran görüntüsünden, yan çubuğa bağlı dört ana kategori olduğunu ve her birinin kendi rengi olduğunu göreceksiniz. Bunu bu dört kategorinin her biri için kategori arşivleri düzenlemek için kullanmak istiyorum.
Çekirdek yükleme FA1AA4761C930017C5454D62B657DE25
Bu tarzla neyi hedeflediğimi nasıl bilebiliriz? #Content ID’den önce .category-Basics sınıfını kullandığımı öğrenebilirsiniz. Bu yüzden Body_class () şablonu etiketi tarafından Body Tag ile üretilen kategori-temel sınıfını hedefledim. Not: Kategoriden sümüklü böcekleri içeren bir sınıf kullandım. Sitenizde bazı kullanıcılar varsa ve salyangozları değiştirebileceklerini düşünüyorsanız, bunun yerine kategori kimliği sınıfını kullanın. Bu üretilen arşiv sayfası:
Özel renklerle-WP kategorisi arşivi
Gönderi başlığı için kategorinin rengini, her yazının altındaki sınırını ve kategori açıklamasının arka planını kullandığını görebilirsiniz. Ayrıca diğer üç kategoriye benzer bir stil ekledim: Çekirdek FAAA4761C930017C5454D62B657DE25
Bu bana üç renk daha veriyor. İhtiyaçlar için Yeşil:
Yeşil Renkli Öğren Ultimate için kırmızı:
Kırmızı ile Ultimate Learn-WP kategorisi arşivi
Ve son olarak, uygulama için sarı:
Sarı ile WP Uygulama Kategori Arşivi Güzel görünüyor. Ancak Post_Class () etiketine ve daha ileri gitmek için nasıl kullanabileceğinize bakalım. Stil Düzenlemesi Geçerli Post_class etiketini kullanarak, sitem yalnızca kategori arşiv sayfasında bir renk koordinasyon stiline sahiptir. Ancak, ana blog sayfasında tek tek gönderileri hedefleyen bir stil ekleyebilir ve hangi kategorilerden geldiklerini vurgulamak için renkler kullanabilirim. Bunu yapmak için stil sayfama aşağıdakileri ekledim:
Çekirdek yükleme FA1AA4761C930017C5454D62B657DE25 Ve bu blog sayfamdaki etkisi:
Kategorilere dayalı özel renklerle-WP blog sayfası İstersem stili her yazının alt sınırına ekleyebilirim, hatta kategoriye arka plan rengi verebilirim.Sadece hayal gücünüz (ve iyi tasarım sınırları) ile sınırlısınız.Vücudu hedeflemek ve ders sonrası daha fazla teknik tasarım kontrolü sağlar. Sitenizi düzenleme şekliniz üzerinde daha fazla kontrol sağlar.Sitenizin farklı bölümlerini ayıran net bir kategoriniz varsa (iş departmanınız veya mağazanızın bir kısmı gibi), bunu sitenizin her bir parçası için farklı bir görünüm veya marka oluşturmak için kullanabilirsiniz.Yeterince taşıyorsanız, şirketinizdeki her bölüm için ayrı sitelere sahip çoklu ağların kullanımını bile kaydedebilir. Sitenizi düzenlemek için Body_Class () ve Post_Class () Şablon etiketlerini nasıl kullanıyorsunuz?Bize yorumlarda söyleyin!
Etiket:
çocuk teması
CSS özelleştirme
tasarım
