Innhold
- Kunnskap som trengs: Grunnleggende PHP og CSS
- Krever: WordPress-installasjon, tekstredigerer du velger
- Prosjekt tid: 10 minutter
Hvis du abonnerer på den trykte versjonen av .net magazine (hvis ikke, hvorfor ikke !?), vil du ha sett at månedens utgave inneholder en utmerket artikkel om "Responsive Design with WordPress".
I artikkelen skisserer forfatter Jesse Friedman en mengde veldig nyttige teknikker for å få mest mulig ut av og overvinne iboende WordPress-funksjonalitet for å produsere et virkelig effektivt responsivt nettsted. Hvis du tenker å produsere et responsivt nettsted med WordPress, bør du definitivt hente en kopi av artikkelen hans. Det er en må-lese.
Etter å ha nylig gjenoppbygd min personlige blogg på WordPress ved hjelp av en responsiv, mobil-første tilnærming, var jeg kjent med noen av teknikkene som er dekket i artikkelen. Imidlertid var det eneste som virkelig skiller seg ut for meg, Jesses tilnærming til å muliggjøre flytende bilder via jQuery.
Problemet med WordPress og "flytende bilder"
Som jeg er sikker på at dere alle er klar over, krever 'flytende bilder' - som bruker maksimal bredde: 100% - at bildene ikke har noen fast bredde eller høyde for å kunne skalere til størrelsen på containeren. Dessverre beregner WordPress automatisk dimensjonene til bildene som genereres fra mediebiblioteket og legger til tilsvarende bredde- og høydeattributter til alle img> -koder.
Dette er flott for gjengivelse av sider, men det kaster a gigantisk nøkkel i verk når det gjelder å lage responsive oppsett, da bildedimensjoner ikke lenger er begrenset til størrelsen på beholderen.
Det er et problem.
Ikke-jQuery-løsningen
I sin artikkel foreslår Jesse ’å bruke jQuery for å fjerne attributt for bredde og høyde fra alle img> -koder på siden når den er lastet inn. Dette fungerer absolutt, men når jeg bygger nettstedet mitt, likte jeg ikke ideen om å stole på JavaScript for å oppnå dette, spesielt hvis det var mange bilder på den aktuelle siden.
Dette var hvor WordPress-filtre kom til unnsetning.
WordPress-kodeksen definerer et filter som:
"... kroker som WordPress lanserer for å endre tekst av forskjellige typer før du legger den til databasen eller sender den til nettleserskjermen."
Som det viser seg er dette akkurat det vi trenger. Ved å sette opp et filter som skal kjøres på alle bilder som den siste handlingen før de gjengis på siden, kan vi bruke PHP til å fjerne attributtene for bredde og høyde og derved omgå behovet for (potensielt) dyr DOM-manipulering via JavaScript.
Koden
- /**
- * RESPONSIVE BILDEFUNKSJONER
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- funksjon remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (bredde
I koden ovenfor legger vi til to filtre ved hjelp av add_filter-funksjonen. Det første argumentet er filteret vi ønsker å koble til, og det andre spesifiserer funksjonen vi vil kjøre når filteret kalles.
I koden vår kobler vi til to uklare funksjoner:
- post_miniatyrbilde_html - bilder hentet med post_miniatyrbilde ()
- image_send_to_editor - bilder lagt til redaktøren
Vi bruker deretter et vanlig uttrykk for å fjerne både bredde- og høydeattributtene fra bildekodene. Nå når bildene våre sendes til nettleseren, kan de være fullstendig 'flytende' akkurat som hr. Marcotte sa til oss at de burde.
En tilståelse
Jeg må innrømme at jeg hadde hatt ideen om å bruke add_filter for å fjerne attributter som jeg ikke kunne finne ut de riktige WordPress-filtrene jeg kunne koble meg til i løpet av livet.
Etter mye søk kom jeg til slutt over dette ekstremt hjelpsomme innlegget på Wordpress Stack Exchange av Nathaniel Taintor, som ga informasjonen om de to filtrene jeg trengte.
Advarsler
Så vidt jeg vet er den eneste store ulempen med denne tilnærmingen at den ikke fjerner bredde- og høydeattributtene fra alle bildene på nettstedet ditt. Jeg fant dette å være et problem, spesifikt med Gravatar-bildene WordPress bruker i kommentarer.
Hvis noen har en løsning på dette problemet, kan du legge igjen en kommentar slik at vi alle kan dra nytte av det.
Jeg håper dette har vært nyttig og vist et alternativ til å stole på JavaScript for å implementere "flytende bilder" på WordPress-nettsteder.
Ord: David Smith
Dave Smith er frontend designer basert i nærheten av den vakre byen Bath, Storbritannia. Når han ikke jobber med nye og spennende webprosjekter, kan han bli spilt på trompet i alt fra Big Band jazzgrupper til Symfoniorkestre. Du kan ta igjen Dave på Twitter som @get_dave.
