Sisältö
- Tarvittavaa tietoa: Perus PHP ja CSS
- Vaatii: WordPress-asennus, valitsema tekstieditori
- Projektin aika: 10 minuuttia
Jos tilaat .net-lehden painetun version (jos ei, niin miksi ei !?), olet huomannut, että tässä kuussa ilmestyy erinomainen artikkeli "Reagoiva suunnittelu WordPressin kanssa".
Artikkelissa kirjailija Jesse Friedman hahmottaa kuorman todella hyödyllisistä tekniikoista, joiden avulla WordPress-toiminnot voidaan hyödyntää parhaalla mahdollisella tavalla ja voittaa todella tehokas reagoiva verkkosivusto. Jos aiot tuottaa reagoivan sivuston WordPressin kanssa, sinun kannattaa ehdottomasti noutaa kopio hänen artikkelistaan. Se on pakko lukea.
Kun olen äskettäin rakentanut henkilökohtaisen blogini WordPressissä reagoivalla, ensin mobiililla -tekniikalla, olin perehtynyt joihinkin artikkelissa käsiteltyihin tekniikoihin. Yksi asia, joka todella erottui minusta, oli Jessen lähestymistapa nestemäisten kuvien mahdollistamiseen jQueryn kautta.
WordPressin ja "sujuvien kuvien" ongelma
Koska olen varma, että tiedät kaikki ”sujuvat kuvat” - jotka käyttävät enimmäisleveyttä: 100% - vaativat, että kuvilla ei ole kiinteää leveyttä tai korkeutta, jotta ne voidaan skaalata säiliön koon mukaan. Valitettavasti WordPress laskee automaattisesti mediakirjastosta tuotettujen kuvien mitat ja lisää vastaavat leveys- ja korkeusattribuutit kaikkiin img> -tunnisteisiin.
Tämä on hieno sivun renderointinopeudelle, mutta se heittää a massiivinen avain töissä, kun on kyse reagoivien asettelujen luomisesta, koska kuvan mitat eivät enää ole rajoitettuja niiden säiliön kokoon.
Se on ongelma.
Ei-jQuery-ratkaisu
Artikkelissa Jesse ehdottaa jQueryn avulla leveyden ja korkeuden määritteiden poistamista kaikista sivun img> -tageista, kun sivu on ladattu. Tämä varmasti toimii, mutta rakentaessani sivustoani en pitänyt ajatuksesta luottaa JavaScriptiin tämän saavuttamiseksi, varsinkin jos kyseisellä sivulla oli paljon kuvia.
Täällä WordPress-suodattimet tulivat apuun.
WordPress-koodeksi määrittelee suodattimen seuraavasti:
"... koukut, jotka WordPress käynnistää muokkaamaan erityyppistä tekstiä ennen sen lisäämistä tietokantaan tai lähettämistä selaimen näytölle."
Kuten käy ilmi, tarvitsemme juuri tätä. Asettamalla suodattimen suoritettavaksi kaikille kuville viimeisenä toimintona ennen kuin ne renderöidään sivulla, voimme poistaa PHP: n avulla leveys- ja korkeusattribuutit ja välttää siten (mahdollisesti) kalliin DOM-manipuloinnin tarpeen JavaScriptin avulla.
Koodi
- /**
- * VASTAAVAT KUVATOIMINNOT
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (leveys
Yllä olevaan koodiin lisätään kaksi suodatinta käyttämällä add_filter-toimintoa. Ensimmäinen argumentti on suodatin, johon haluamme kytkeä, ja toinen määrittää toiminnon, jonka haluamme suorittaa, kun suodatinta kutsutaan.
Koodissamme yhdistämme kaksi epäselvää toimintoa:
- post_thumbnail_html - kuvat, jotka on haettu post_thumbnail ()
- image_send_to_editor - kuvat lisätään editoriin
Sitten käytämme säännöllistä lauseketta poistaaksemme sekä leveys- että korkeusattribuutit kuvatunnisteista. Nyt kun kuvamme lähetetään selaimeen, ne voivat olla täysin ”juoksevia” aivan kuten herra Marcotte käski meille.
Tunnustus
Minun on tunnustettava, että minulla on ollut ajatus käyttää add_filter Jos haluat poistaa määritteitä, en voineet koko eliniän löytää oikeat WordPress-suodattimet, joihin voit liittää.
Paljon etsimisen jälkeen törmäsin vihdoin tähän erittäin hyödylliseen viestiin Nathaniel Taintorin Wordpress Stack Exchangessa, joka antoi tietoja kahdesta tarvitsemastani suodattimesta.
Varoitukset
Sikäli kuin tiedän, tämän lähestymistavan ainoa merkittävä haittapuoli on, että se ei poista leveys- ja korkeusattribuutteja kaikista sivustosi kuvista. Minusta tämä oli ongelma, erityisesti niiden Gravatar-kuvien kanssa, joita WordPress käyttää kommenteissa.
Jos jollakin on ratkaisu tähän ongelmaan, jätä kommentti, jotta voimme kaikki hyötyä.
Toivon, että tämä on ollut hyödyllistä ja osoittautunut vaihtoehdoksi JavaScriptin käyttämiselle "sujuvien kuvien" toteuttamiseksi WordPress-verkkosivustoilla.
Sanat: David Smith
Dave Smith on etupään suunnittelija, joka sijaitsee lähellä kaunista Bathin kaupunkia, Iso-Britannia. Kun hän ei työskentele uusien ja mielenkiintoisten verkkoprojektien parissa, hänet löytyy trumpettina kaikesta Big Band -jazzryhmistä Symphony-orkestereihin. Voit seurata Daveä Twitterissä nimellä @get_dave.
