İçerik
- Bilgi gerekli: Temel PHP ve CSS
- Gerektirir: WordPress kurulumu, tercih edilen metin editörü
- Proje zamanı: 10 dakika
.Net dergisinin basılı sürümüne abone olursanız (değilse, neden olmasın !?), bu ayın sayısının "WordPress ile Duyarlı Tasarım" hakkında mükemmel bir makale içerdiğini göreceksiniz.
Makalede yazar Jesse Friedman, gerçekten etkili bir yanıt veren web sitesi oluşturmak için doğal WordPress işlevselliğinden en iyi şekilde yararlanmak ve üstesinden gelmek için gerçekten yararlı bir sürü teknik özetlemektedir. WordPress ile duyarlı bir site oluşturmayı düşünüyorsanız, kesinlikle makalesinin bir kopyasını almalısınız. Okunması gereken bir kitap.
Kısa bir süre önce kişisel blogumu WordPress'te duyarlı, mobil öncelikli bir yaklaşım kullanarak yeniden oluşturduğumda, makalede ele alınan bazı tekniklere aşina oldum. Ancak benim için gerçekten göze çarpan tek öğe, Jesse’nin jQuery aracılığıyla akıcı görüntüler sağlama yaklaşımı oldu.
WordPress ve "akışkan resimler" ile ilgili sorun
Maksimum genişlik:% 100 kullanan 'değişken görsellerin' hepinizin farkında olduğunuzdan emin olduğumdan, kaplarının boyutuna göre ölçeklenebilmeleri için görsellerin sabit bir genişliğe veya yüksekliğe sahip olmamasını gerekli kılın. Ne yazık ki WordPress, Medya kitaplığından oluşturulan görüntülerin boyutlarını otomatik olarak hesaplar ve karşılık gelen genişlik ve yükseklik özelliklerini herhangi bir img> etiketine ekler.
Bu, sayfa oluşturma hızı için harikadır, ancak büyük Duyarlı düzenler oluşturma söz konusu olduğunda, görüntü boyutları artık kapsayıcılarının boyutuyla sınırlandırılmadığından çalışmalarda.
Bu bir sorun.
JQuery olmayan çözüm
Jesse, makalesinde, yüklendikten sonra sayfadaki tüm img> etiketlerinden genişlik ve yükseklik özniteliklerinin kaldırılması için jQuery'nin kullanılmasını önermektedir. Bu kesinlikle işe yarıyor, ancak sitemi oluştururken bunu başarmak için JavaScript'e güvenme fikrinden hoşlanmadım, özellikle de söz konusu sayfada çok sayıda resim varsa.
Burası WordPress filtrelerinin kurtarmaya geldiği yer.
WordPress kodeksi bir filtreyi şu şekilde tanımlar:
"... WordPress'in çeşitli türlerdeki metni veritabanına eklemeden veya tarayıcı ekranına göndermeden önce değiştirmek için başlattığı kancalar."
Görünüşe göre bu tam olarak ihtiyacımız olan şey. Sayfada oluşturulmadan önceki son işlem olarak tüm görüntüler üzerinde çalışmak üzere bir filtre ayarlayarak, PHP'yi genişlik ve yükseklik niteliklerini kaldırmak için kullanabiliriz ve böylece JavaScript aracılığıyla (potansiyel olarak) pahalı DOM işleme ihtiyacını ortadan kaldırabiliriz.
Kod
- /**
- * DUYARLI GÖRÜNTÜ İŞLEVLERİ
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (genişlik
Yukarıdaki kodda, add_filter işlevini kullanarak iki filtre ekliyoruz. İlk argüman, bağlanmak istediğimiz filtredir ve ikincisi, filtre çağrıldığında çalıştırmak istediğimiz işlevi belirtir.
Kodumuzda iki belirsiz işleve bağlıyız:
- post_thumbnail_html - ile alınan görüntüler post_thumbnail ()
- image_send_to_editor - düzenleyiciye eklenen resimler
Daha sonra, görüntü etiketlerinden hem genişlik hem de yükseklik özelliklerini kaldırmak için normal bir ifade kullanırız. Artık resimlerimiz tarayıcıya gönderildiğinde, tıpkı Bay Marcotte'nin bize söylediği gibi tamamen "akıcı" olabilirler.
Itiraf
Kullanma fikrine sahip olduğumu itiraf etmeliyim add_filter hayatım boyunca yapamadığım öznitelikleri kaldırmak için, bağlanmak için doğru WordPress filtrelerini bulun.
Bir sürü araştırmadan sonra, sonunda Nathaniel Taintor tarafından yazılan ve ihtiyacım olan iki filtre hakkında bilgi sağlayan Wordpress Stack Exchange hakkında bu son derece yararlı gönderiye rastladım.
Uyarılar
Bildiğim kadarıyla bu yaklaşımın tek büyük dezavantajı, sitenizdeki tüm resimlerden genişlik ve yükseklik özelliklerini kaldırmamasıdır. Bunu özellikle WordPress'in yorumlarda kullandığı Gravatar görüntüleriyle ilgili bir sorun olarak buldum.
Herhangi birinin bu soruna bir çözümü varsa, lütfen hepimizin yararlanabilmesi için bir yorum bırakın.
Umarım bu yararlı olmuştur ve WordPress web sitelerinde "akıcı görüntüler" uygulamak için JavaScript'e güvenmenin bir alternatifi olmuştur.
Kelimeler: David Smith
Dave Smith, İngiltere'nin güzel Bath kentinin yakınında bulunan bir arayüz tasarımcısıdır. Yeni ve heyecan verici web projeleri üzerinde çalışmadığı zamanlarda, Big Band caz gruplarından Senfoni orkestralarına kadar her şeyde trompet çalarken bulunabilir. Dave'i Twitter'da @get_dave olarak takip edebilirsiniz.
