Conţinut
- Cunoștințe necesare: PHP și CSS de bază
- Necesită: Instalare WordPress, editor de text la alegere
- Timpul proiectului: 10 minute
Dacă vă abonați la versiunea tipărită a revistei .net (dacă nu, de ce nu !?), veți vedea că numărul din această lună conține un articol excelent despre „Design responsiv cu WordPress”.
În articol, autorul Jesse Friedman prezintă o mulțime de tehnici cu adevărat utile pentru a profita la maximum și pentru a depăși funcționalitatea inerentă WordPress, pentru a produce un site web cu adevărat eficient. Dacă vă gândiți să creați un site receptiv cu WordPress, ar trebui să ridicați cu siguranță o copie a articolului său. Este o lectură obligatorie.
După ce mi-am reconstruit recent blogul personal pe WordPress folosind o abordare receptivă, primul mobil, eram familiarizat cu unele dintre tehnicile acoperite în articol. Cu toate acestea, singurul element care mi-a ieșit cu adevărat în evidență a fost abordarea lui Jesse de a permite imagini fluide prin jQuery.
Problema cu WordPress și „imaginile fluide”
Deoarece sunt sigur că sunteți conștienți de „imaginile fluide” - care utilizează lățimea maximă: 100% - este necesar ca imaginile să nu aibă lățime sau înălțime fixă pentru a putea scala la dimensiunea containerului lor. Din păcate, WordPress calculează automat dimensiunile imaginilor generate din biblioteca Media și adaugă atributele de lățime și înălțime corespunzătoare oricăror etichete img>.
Acest lucru este excelent pentru viteza de redare a paginilor, dar aruncă un masiv cheie în funcționare atunci când vine vorba de crearea de aspecte responsive, deoarece dimensiunile imaginii nu mai sunt limitate la dimensiunea containerului lor.
Asta e o problema.
Soluția non-jQuery
În articolul său, Jesse sugerează utilizarea jQuery pentru a elimina atributele de lățime și înălțime din toate etichetele img> de pe pagină după ce a fost încărcată. Acest lucru funcționează cu siguranță, dar la construirea site-ului meu nu mi-a plăcut ideea de a mă baza pe JavaScript pentru a realiza acest lucru, mai ales dacă pe pagina în cauză erau multe imagini.
Aici au apărut filtrele WordPress.
Codex-ul WordPress definește un filtru ca:
„... conectează WordPress pe care îl lansează pentru a modifica textul de diferite tipuri înainte de a-l adăuga în baza de date sau de a-l trimite pe ecranul browserului.”
După cum se dovedește, acest lucru este exact ceea ce avem nevoie. Configurând un filtru pentru a rula pe toate imaginile ca acțiune finală înainte ca acestea să fie redate pe pagină, putem folosi PHP pentru a elimina atributele de lățime și înălțime eludând astfel necesitatea manipulării DOM (potențial) scumpe prin JavaScript.
Codul
- /**
- * FUNCȚII DE IMAGINE RESPONSIVE
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funcție remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (width
În codul de mai sus adăugăm două filtre folosind funcția add_filter. Primul argument este filtrul pe care vrem să-l conectăm și al doilea specifică funcția pe care vrem să o rulăm atunci când filtrul este apelat.
În codul nostru ne conectăm la două funcții obscure:
- post_thumbnail_html - imagini recuperate cu post_thumbnail ()
- image_send_to_editor - imagini adăugate editorului
Apoi, folosim o expresie regulată pentru a elimina atât atributele lățime, cât și înălțimea din etichetele de imagine. Acum, când imaginile noastre sunt trimise către browser, acestea pot fi complet „fluide”, așa cum ne-a spus domnul Marcotte că ar trebui.
O mărturisire
Trebuie să mărturisesc că am avut ideea de a folosi add_filter pentru a elimina atributele pe care nu le-am putut pentru viața mea să găsesc filtrele WordPress corecte în care să mă conectez.
După o mulțime de căutări, am dat peste această postare extrem de utilă pe Wordpress Stack Exchange de Nathaniel Taintor, care furniza informații despre cele două filtre de care aveam nevoie.
Avertismente
Din câte știu, singurul dezavantaj major al acestei abordări este că nu elimină atributele de lățime și înălțime de pe toate imaginile de pe site-ul dvs. Am găsit că aceasta este o problemă, în special cu imaginile Gravatar pe care le folosește WordPress în comentarii.
Dacă cineva are o soluție la această problemă, vă rugăm să lăsați un comentariu, astfel încât să putem beneficia cu toții.
Sper că acest lucru a fost util și a demonstrat o alternativă la bazarea pe JavaScript pentru a implementa „imagini fluide” pe site-urile web WordPress.
Cuvinte: David Smith
Dave Smith este designer de front-end cu sediul în apropierea frumosului oraș Bath, Marea Britanie. Când nu lucrează la proiecte web noi și incitante, poate fi găsit cântând la trompetă în toate, de la grupuri de jazz Big Band până la orchestre simfonice. Puteți ajunge din urmă pe Dave pe Twitter ca @get_dave.
