Innehåll
- Kunskap behövs: Grundläggande PHP och CSS
- Kräver: WordPress-installation, val av textredigerare
- Projekttid: 10 minuter
Om du prenumererar på den tryckta versionen av .net-tidningen (om inte, varför inte !?), kommer du att ha sett att månadens nummer innehåller en utmärkt artikel om "Responsive Design with WordPress".
I artikeln beskriver författaren Jesse Friedman en massa riktigt användbara tekniker för att få ut det mesta av och övervinna de inneboende WordPress-funktionerna för att producera en verkligt effektiv responsiv webbplats. Om du funderar på att producera en responsiv webbplats med WordPress bör du definitivt hämta en kopia av hans artikel. Det är en måste-läsas.
Efter att ha byggt om min personliga blogg på WordPress nyligen med ett lyhörd, mobil-första tillvägagångssätt var jag bekant med några av de tekniker som tas upp i artikeln. Det som emellertid verkligen stod ut för mig var Jesses tillvägagångssätt för att möjliggöra flytande bilder via jQuery.
Problemet med WordPress och "flytande bilder"
Som jag är säker på att ni alla är medvetna om kräver "flytande bilder" - som använder max-bredd: 100% - att bilder inte har någon fast bredd eller höjd för att de ska kunna skala till storleken på sin behållare. Tyvärr beräknar WordPress automatiskt dimensionerna på bilder som genereras från mediebiblioteket och lägger till motsvarande bredd- och höjdattribut till alla img> -taggar.
Det här är utmärkt för sidåtergivningshastighet men det kastar en massiv skiftnyckel på gång när det gäller att skapa lyhörda layouter eftersom bilddimensioner inte längre är begränsade till storleken på deras behållare.
Det är ett problem.
Den icke-jQuery-lösningen
I sin artikel föreslår Jesse att man använder jQuery för att ta bort bredd- och höjdattributen från alla img> -taggar på sidan när den har laddats. Detta fungerar verkligen men när jag byggde min webbplats gillade jag inte idén att förlita mig på JavaScript för att uppnå detta, speciellt om det fanns många bilder på sidan i fråga.
Det var här WordPress-filter kom till undsättning.
WordPress codex definierar ett filter som:
"... krokar som WordPress startar för att ändra text av olika slag innan du lägger till den i databasen eller skickar den till webbläsarens skärm."
Som det visar sig är detta precis vad vi behöver. Genom att ställa in ett filter som ska köras på alla bilder som den sista åtgärden innan de återges på sidan kan vi använda PHP för att ta bort bredd- och höjdattributen och därmed kringgå behovet av (potentiellt) dyr DOM-manipulation via JavaScript.
Koden
- /**
- * SVARNA BILDFUNKTIONER
- */
- 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 (’/ (bredd
I koden ovan lägger vi till två filter med funktionen add_filter. Det första argumentet är det filter vi vill ansluta till och det andra anger vilken funktion vi vill köra när filtret anropas.
I vår kod kopplas vi in i två dunkla funktioner:
- post_miniatyrbild_html - bilder hämtade med post_miniatyrbild ()
- image_send_to_editor - bilder har lagts till redigeraren
Vi använder sedan ett reguljärt uttryck för att ta bort både bredd- och höjdattributen från bildtaggarna. Nu när våra bilder skickas till webbläsaren kan de vara helt flytande precis som Mr Marcotte sa att de borde.
En bekännelse
Jag måste erkänna att jag hade haft idén att använda add_filter för att ta bort attribut som jag inte kunde hitta på rätt WordPress-filter för livet.
Efter mycket sökning kom jag äntligen över detta extremt hjälpsamma inlägg på Wordpress Stack Exchange av Nathaniel Taintor som gav informationen om de två filter jag behövde.
Förbehåll
Såvitt jag vet är den enda stora nackdelen med detta tillvägagångssätt att den inte tar bort bredden och höjdattributen från alla bilder på din webbplats. Jag tyckte att detta var ett problem, specifikt med de Gravatar-bilder som WordPress använder i kommentarer.
Om någon har en lösning på denna fråga kan du lämna en kommentar så att vi alla kan dra nytta av det.
Jag hoppas att detta har varit användbart och visat ett alternativ till att förlita sig på JavaScript för att implementera "flytande bilder" på WordPress-webbplatser.
Ord: David Smith
Dave Smith är frontdesigner baserad i närheten av den vackra staden Bath, Storbritannien. När han inte jobbar med nya och spännande webbprojekt kan han hitta trumpet i allt från Big Band jazzgrupper till Symfoniorkestrar. Du kan komma ikapp Dave på Twitter som @get_dave.
