# 122: Video Arşivini Oluşturmak, Bölüm 1 - CSS Hileleri

Anonim

Video arşiv sayfası, sitenin insanların izlenebilecek tüm ücretsiz videolara göz atabilecekleri bölümüdür. Göz atmak içindir, snippet'lerin ana sayfasını veya demoların ana sayfasını beğenmelidir.

Bu sayfalar, daha önce birçok kez yaptığımız gibi çok hızlı ve kolay bir şekilde şekle girebileceğimiz kendi şablonlarındandır. Nesnelerin etrafına kendi sarmalayıcıyı koyarız ve 2/3 1/3 düzenini vermek için ızgara yapımızı kullanırız.

Ne çok burada benim için heyecan verici bazı eski brüt işaretlemeyi söküp daha intellegent ve otomatik olarak oluşturulan biçimlendirme ile değiştirin için bir şans olduğunu. Geçmişte, video arşivlerine her girişi bir tanım listesi olarak elle yazıyordum. Başlangıç ​​olarak, bu muhtemelen bir video listesi için doğru anlamsal biçimlendirme değildir, özellikle de her giriş yeni bir liste başlattığında.

Bunun yerine, tüm bu eski işaretlemeyi çıkarıyoruz ve bunun yerine WordPress'ten ihtiyacımız olan tüm verileri almak için dikkatlice hazırlanmış bir sorgu çalıştırıyoruz. Bu sorgu üzerinde bir döngü çalıştırırız ve daha temiz olan yeni işaretleme üretiriz (sadece sınıflarla div'ler). Bu, gelecekte bu arşiv sayfalarının bakımını elden geçirmemize gerek kalmadan bize zaman kazandıracak.

Bu yeni işaretlemeyi yazarken, dinamik olmamız gereken bitleri dolduran WordPress işlevleriyle süslüyoruz. Başlıklar the_title(). Bağlantılar the_permalink(). Küçük resimler özel alanlardır. Kolay dolandırıcı.

Div'ler, ızgara sistemimizdeki sınıf adlarını kullanır, böylece tüm kayan ve boyutlandırma ve şeyler otomatik olarak çalışır. Verimli değil miyiz? Yine de bazı CSS'lerin özel olması gerekiyor ve ihtiyacımız olanı yazıyoruz. Örneğin, özellikle bu bölümde modüller için dolguyu ayarlamak (çok fazlaydı, azalttık). Kafamız üzerinde body_class()çalışırken çok eskiden akıllıca kullandığımız için, bu tür şeyleri bizim için mevcut olan sınıf isimleri aracılığıyla yapmak kolaydır .