Inhalt
- Wëssen néideg: Basis PHP an CSS
- Verlaangt: WordPress installéieren, Text Editor vun der Wiel
- Projet Zäit: 10 Minutten
Wann Dir Iech op déi gedréckte Versioun vum .net Magazin abonnéiert (wann net, firwat net !?), hutt Dir gesi datt dës Emissioun vun dësem Mount en exzellenten Artikel iwwer "Responsive Design with WordPress" enthält.
Am Artikel skizzéiert den Autor Jesse Friedman eng Belaaschtung vun wierklech nëtzlechen Techniken fir déi meescht vun, an iwwerwannen, ugehéierte WordPress Funktionalitéit fir eng wierklech effektiv reaktiounsfäeg Websäit ze produzéieren. Wann Dir denkt un eng reaktiouns Säit mat WordPress ze produzéieren, sollt Dir definitiv eng Kopie vu sengem Artikel huelen. Et muss ee liesen.
Nodeems ech mäi perséinleche Blog op WordPress viru kuerzem ëmgebaut hunn mat enger reaktiounsfäeger, mobil-éischt Approche war ech mat e puer vun den Techniken, déi am Artikel behandelt goufen, vertraut. Wéi och ëmmer, deen eenzegen Element dee wierklech fir mech erausstoung war dem Jesse seng Approche fir fléissend Biller via jQuery z'erméiglechen.
De Problem mat WordPress a "flëssege Biller"
Wéi ech sécher sinn datt Dir all bewosst 'fléissend Biller' - déi d'Benotzung vun der Max-Breet: 100% maachen - erfuerderen datt d'Biller keng fix Breet oder Héicht hunn fir datt se op d'Gréisst vun hirem Container kënnen ofschalten. Leider rechent WordPress automatesch d'Dimensioune vu Biller aus der Mediabibliothéik generéiert an füügt déi entspriechend Breet- an Héichtattributer un all img> Tags bäi.
Dëst ass super fir d'Säit Rendering Geschwindegkeet awer et werft e massiv Spanner an de Wierker wann et drëm geet reaktiounsfäeg Layouten ze kreéieren well d'Bilddimensiounen net méi op d'Gréisst vun hirem Container beschränkt sinn.
Dat ass e Problem.
D'Net-jQuery Léisung
A sengem Artikel Jesse 'proposéiert d'JQuery ze benotzen fir d'Breet an d'Héichtattributer vun allen img> Tags op der Säit ewechzehuelen wann se gelueden ass. Dëst funktionnéiert sécher awer wann ech mäi Site bauen hunn ech d'Iddi net gär op JavaScript ze vertrauen fir dëst z'erreechen, besonnesch wann et vill Biller op der betreffender Säit waren.
Dëst ass wou WordPress Filteren zur Rettung koumen.
De WordPress Codex definéiert e Filter als:
"... Hooks déi WordPress lancéiert fir Text vu verschiddenen Typen z'änneren ier se se an d'Datebank bäifügen oder op de Browserbildschirm schécken."
Wéi et sech erausstellt ass dat genau dat wat mir brauchen. Duerch e Filter opzemaachen fir op all Biller als lescht Aktioun ze lafen ier se op der Säit geliwwert ginn, kënne mir PHP benotze fir d'Breet an d'Héichtattributer ze läschen an doduerch de Besoin fir (potenziell) deier DOM Manipulatioun iwwer JavaScript ze ëmgoen.
De Code
- /**
- * RESPONSIV BILDFUNKTIOUNEN
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- Funktioun remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (Breet
Am Code hei uewen addéiere mer zwee Filtere mat der add_filter Funktioun. Dat éischt Argument ass de Filter an deen mir wëllen uschléissen an deen zweete spezifizéiert d'Funktioun déi mir lafe wëllen wann de Filter ugeruff gëtt.
An eisem Code hänken mir an zwou obskur Funktiounen:
- post_thumbnail_html - Biller erëmfonnt mat der post_thumbnail ()
- image_send_to_editor - Biller an den Editeur bäigefüügt
Mir benotzen dann e regulären Ausdrock fir d'Breet an d'Héichtattributer aus de Image Tags ze läschen. Elo wann eis Biller an de Browser geschéckt ginn, kënne se voll 'fléissend' sinn, sou wéi den Här Marcotte eis gesot huet, si sollten.
Eng Beicht
Ech muss zouginn datt ech d'Iddi hat ze benotzen add_filter Attributer ze läschen, déi ech net fir d'Liewe vu mir déi richteg WordPress Filtere lokaliséiere fir an ze hänken.
No vill Sich sinn ech endlech op dësem extrem hëllefräiche Post op Wordpress Stack Exchange vum Nathaniel Taintor gestouss, deen d'Informatioun iwwer déi zwee Filtere geliwwert hunn, déi ech gebraucht hunn.
Opgepasst
Souwäit ech weess, ass deen eenzege grousse Réckzuch vun dëser Approche datt et d'Breet an d'Héichtattributer net vun alle Biller op Ärem Site erofhuelen. Ech hu fonnt datt dëst en Thema ass, speziell mat de Gravatar Biller déi WordPress a Kommentare benotzt.
Wann iergendeen eng Léisung fir dëst Thema huet, gitt weg e Kommentar fir datt mir all kënne profitéieren.
Ech hoffen dat war nëtzlech an huet eng Alternativ demonstréiert fir op JavaScript ze vertrauen fir "fléissend Biller" op WordPress Websäiten ëmzesetzen.
Wierder: David Smith
Den Dave Smith ass Frontend Designer baséiert an der schéiner Stad Bath, UK. Wann hien net u neien a spannende Webprojete schafft, da fënnt hien d'Trompett an alles vu Big Band Jazzgruppen zu Symphonieorchesteren. Dir kënnt den Dave op Twitter fänken als @get_dave.
