Indhold
- Viden nødvendig: Grundlæggende PHP og CSS
- Kræver: WordPress-installation, teksteditor efter eget valg
- Projekt tid: 10 minutter
Hvis du abonnerer på den trykte version af .net-magasinet (hvis ikke, hvorfor ikke !?), vil du have set, at denne måneds udgave indeholder en fremragende artikel om "Responsivt design med WordPress".
I artiklen skitserer forfatter Jesse Friedman en masse virkelig nyttige teknikker til at få mest muligt ud af og overvinde iboende WordPress-funktionalitet for at producere et virkelig effektivt responsivt websted. Hvis du overvejer at producere et responsivt websted med WordPress, skal du helt sikkert hente en kopi af hans artikel. Det er en must-read.
Efter at have for nylig genopbygget min personlige blog på WordPress ved hjælp af en lydhør, mobil-første tilgang var jeg bekendt med nogle af de teknikker, der er dækket af artiklen. Imidlertid var det eneste, der virkelig stod for mig, Jesse's tilgang til at muliggøre flydende billeder via jQuery.
Problemet med WordPress og "flydende billeder"
Som jeg er sikker på, at du alle er opmærksomme på, kræver 'flydende billeder' - som bruger maks. Bredde: 100% -, at billeder ikke har nogen fast bredde eller højde, så de kan skaleres til størrelsen på deres container. Desværre beregner WordPress automatisk dimensionerne på billeder genereret fra mediebiblioteket og tilføjer de tilsvarende bredde- og højdeattributter til alle img> tags.
Dette er fantastisk til gengivelse af sider, men det kaster en massiv skruenøgle, når det kommer til at skabe responsive layout, da billeddimensioner ikke længere er begrænset til størrelsen på deres container.
Det er et problem.
Ikke-jQuery-løsningen
I sin artikel foreslår Jesse at bruge jQuery til at fjerne bredde- og højdeattributterne fra alle img> tags på siden, når den er indlæst. Dette fungerer bestemt, men når jeg bygger mit websted, kunne jeg ikke lide tanken om at stole på JavaScript for at opnå dette, især hvis der var mange billeder på den pågældende side.
Det var her WordPress-filtre kom til undsætning.
WordPress codex definerer et filter som:
"... kroge, som WordPress lancerer for at ændre tekst af forskellige typer, før den føjes til databasen eller sendes til browserskærmen."
Som det viser sig, er dette nøjagtigt hvad vi har brug for. Ved at oprette et filter, der kører på alle billeder som den sidste handling, før de gengives på siden, kan vi bruge PHP til at fjerne bredde- og højdeattributterne og derved omgå behovet for (potentielt) dyr DOM-manipulation via JavaScript.
Koden
- /**
- * RESPONSIVE BILLEDE FUNKTIONER
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funktion remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (bredde
I koden ovenfor tilføjer vi to filtre ved hjælp af funktionen add_filter. Det første argument er det filter, vi vil tilslutte os, og det andet specificerer den funktion, vi vil køre, når filteret kaldes op.
I vores kode tilslutter vi os to uklare funktioner:
- post_thumbnail_html - billeder hentet med post-miniaturebillede ()
- image_send_to_editor - billeder tilføjet til redaktøren
Vi bruger derefter et regulært udtryk til at fjerne både bredde- og højdeattributterne fra billedkoderne. Nu når vores billeder sendes til browseren, kan de være helt 'flydende' ligesom hr. Marcotte fortalte os, at de skulle.
En tilståelse
Jeg må indrømme, at jeg havde haft ideen om at bruge tilføj_filter for at fjerne attributter, som jeg ikke hele livet kunne finde de rigtige WordPress-filtre, jeg kunne tilslutte mig.
Efter en masse søgninger stødte jeg endelig på dette yderst hjælpsomme indlæg på Wordpress Stack Exchange af Nathaniel Taintor, der gav oplysningerne om de to filtre, jeg havde brug for.
Advarsler
Så vidt jeg ved, er den eneste store ulempe ved denne tilgang, at den ikke fjerner bredde- og højdeattributterne fra alle billeder på dit websted. Jeg fandt dette at være et problem, specifikt med de Gravatar-billeder, WordPress bruger i kommentarer.
Hvis nogen har en løsning på dette problem, bedes du efterlade en kommentar, så vi alle kan drage fordel.
Jeg håber, dette har været nyttigt og demonstreret et alternativ til at stole på JavaScript for at implementere "flydende billeder" på WordPress-websteder.
Ord: David Smith
Dave Smith er frontend designer baseret i nærheden af den smukke by Bath, Storbritannien. Når han ikke arbejder på nye og spændende webprojekter, kan han findes at spille trompet i alt fra Big Band jazzgrupper til Symfoniorkestre. Du kan indhente Dave på Twitter som @get_dave.
