Turinys
- Reikalingos žinios: Pagrindinis PHP ir CSS
- Reikalauja: „WordPress“ diegimas, pasirinktas teksto redaktorius
- Projekto laikas: 10 minučių
Jei užsiprenumeruosite spausdintą „.net“ žurnalo versiją (jei ne, kodėl ne !?), pamatysite, kad šio mėnesio numeryje yra puikus straipsnis „Reaguojantis dizainas naudojant„ WordPress ““.
Straipsnyje autorius Jesse Friedmanas apibūdina tikrai daug naudingų metodų, kaip maksimaliai išnaudoti ir įveikti būdingas „WordPress“ funkcijas, kad būtų sukurta tikrai efektyvi interneto svetainė. Jei ketinate sukurti interaktyvią svetainę naudodami „WordPress“, turėtumėte pasiimti jo straipsnio kopiją. Tai būtina perskaityti.
Neseniai atstatęs savo asmeninį tinklaraštį „WordPress“, naudodamas reaguojantį, pirmiausia mobiliesiems skirtą metodą, buvau susipažinęs su kai kuriomis straipsnyje aprašytomis technikomis. Tačiau vienas dalykas, kuris man tikrai išsiskyrė, buvo Jesse požiūris į sklandų vaizdų įgalinimą per „jQuery“.
„WordPress“ ir „sklandžių vaizdų“ problema
Kadangi esu tikras, kad visi žinote „sklandžius vaizdus“, kurių maksimalus plotis: 100%, reikalaujama, kad vaizdai nebūtų fiksuoto pločio ar aukščio, kad juos būtų galima keisti pagal savo talpyklos dydį. Deja, „WordPress“ automatiškai apskaičiuoja vaizdų, sugeneruotų iš medijos bibliotekos, matmenis ir prie visų „img>“ žymų prideda atitinkamus pločio ir aukščio atributus.
Tai puikiai tinka puslapio atvaizdavimo greičiui, tačiau išmeta a masinis veržliaraktis, kai reikia kurti reaguojančius maketus, nes vaizdo matmenys nebėra apriboti jų talpyklos dydžiu.
Tai problema.
Ne „jQuery“ sprendimas
Savo straipsnyje Jesse'as siūlo naudoti „jQuery“, kad pašalintumėte pločio ir aukščio atributus iš visų puslapio žymų img>, kai tik jis bus įkeltas. Tai tikrai veikia, bet kuriant savo svetainę man nepatiko mintis pasikliauti „JavaScript“, kad tai pasiektų, ypač jei aptariamame puslapyje buvo daug vaizdų.
Čia į pagalbą atėjo „WordPress“ filtrai.
„WordPress“ kodekse filtras apibrėžiamas taip:
„... kabliai, kuriuos paleidžia„ WordPress “, kad modifikuotų įvairaus tipo tekstus prieš įtraukiant juos į duomenų bazę ar siunčiant į naršyklės ekraną.“
Kaip paaiškėja, mums būtent to ir reikia. Nustatydami filtrą, kad visi vaizdai būtų rodomi kaip paskutinis veiksmas, kol jie daromi puslapyje, mes galime naudoti PHP, kad pašalintume pločio ir aukščio atributus, taip apeinant poreikį (potencialiai) brangiai kainuojančiam DOM naudojant „JavaScript“.
Kodas
- /**
- * ATSAKINGOS VAIZDO FUNKCIJOS
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- funkcija remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (plotis
Viršuje esančiame kode pridedame du filtrus naudodami funkciją „add_filter“. Pirmasis argumentas yra filtras, prie kurio norime prisijungti, o antrasis nurodo funkciją, kurią norime paleisti, kai iškviečiamas filtras.
Savo kode mes sujungiame dvi neaiškias funkcijas:
- post_thumbnail_html Vaizdai, gauti su post_thumbnail ()
- image_send_to_editor - vaizdai pridėti prie redaktoriaus
Tada mes naudojame įprastą išraišką, kad pašalintume pločio ir aukščio atributus iš vaizdo žymių. Dabar, kai mūsų vaizdai siunčiami į naršyklę, jie gali būti visiškai „sklandūs“, kaip mums pasakė p. Marcotte.
Prisipažinimas
Turiu prisipažinti, kad kilo mintis naudoti pridėti_filtrą Norėdami pašalinti atributus, negalėjau visą gyvenimą surasti tinkamų „WordPress“ filtrų, kuriuos galite prijungti.
Po daugybės paieškų galų gale aptikau šį itin naudingą Nathanielio Taintoro įrašą „Wordpress Stack Exchange“, kuriame buvo pateikta informacija apie du man reikalingus filtrus.
Įspėjimai
Kiek žinau, vienintelis šio požiūrio trūkumas yra tai, kad jis nepašalina visų jūsų svetainės vaizdų pločio ir aukščio atributų. Manau, kad tai yra problema, konkrečiai kalbant apie „Gravatar“ vaizdus, kuriuos „WordPress“ naudoja komentaruose.
Jei kas nors išspręs šią problemą, palikite komentarą, kad visi galėtume pasinaudoti.
Tikiuosi, kad tai buvo naudinga ir pademonstravo alternatyvą pasikliauti „JavaScript“ diegiant „sklandžius vaizdus“ „WordPress“ svetainėse.
Žodžiai: Davidas Smithas
Dave'as Smithas yra priekinio dizaino dizaineris, įsikūręs netoli gražaus Bato miesto, JK. Kai jis nedirba prie naujų ir įdomių internetinių projektų, jį galima rasti grojantį trimitu, pradedant „Big Band“ džiazo grupėmis ir baigiant simfoniniais orkestrais. Galite pasivyti Dave'ą „Twitter“ kaip @get_dave.
