Saturs
- Nepieciešamas zināšanas: Pamata PHP un CSS
- Nepieciešams: WordPress instalēšana, izvēlētais teksta redaktors
- Projekta laiks: 10 minūtes
Ja abonējat .net žurnāla drukāto versiju (ja nē, kāpēc ne !?), jūs redzēsit, ka šī mēneša numurā ir lielisks raksts par tematu “Reaģējošais dizains ar WordPress”.
Rakstā autors Džesijs Frīdmans ieskicē patiešām noderīgu paņēmienu klāstu, lai maksimāli izmantotu WordPress funkcionalitāti un pārvarētu to, lai izveidotu patiesi efektīvu atsaucīgu vietni. Ja jūs domājat izveidot atsaucīgu vietni ar WordPress, noteikti paņemiet viņa raksta kopiju. Tas ir obligāti jāizlasa.
Nesen pārbūvējis savu personīgo emuāru vietnē WordPress, izmantojot atsaucīgu, mobilajām ierīcēm pieejamu pieeju, es biju pazīstams ar dažām rakstā apskatītajām metodēm. Tomēr viens elements, kas man patiešām izcēlās, bija Džesijas pieeja plūstošu attēlu iespējošanai, izmantojot jQuery.
Problēma ar WordPress un “plūstošajiem attēliem”
Tā kā esmu pārliecināts, ka jūs visi zināt par “plūstošajiem attēliem”, kas izmanto maksimālo platumu: 100%, attēliem nav jābūt fiksētam platumam vai augstumam, lai tos varētu mērogot atbilstoši konteinera izmēram. Diemžēl WordPress automātiski aprēķina no Media bibliotēkas ģenerēto attēlu izmērus un visiem img> tagiem pievieno atbilstošos platuma un augstuma atribūtus.
Tas ir lieliski piemērots lapas renderēšanas ātrumam, taču tas rada masveida Atslēga darbos, kad jāizveido atsaucīgi izkārtojumi, jo attēla izmēri vairs nav ierobežoti ar to konteinera izmēru.
Tā ir problēma.
Risinājums, kas nav jQuery
Savā rakstā Džesijs ierosina izmantot jQuery, lai pēc lapas ielādes noņemtu platuma un augstuma atribūtus no visiem lapas img> tagiem. Tas noteikti darbojas, taču, veidojot savu vietni, man nepatika ideja paļauties uz JavaScript, lai to panāktu, it īpaši, ja attiecīgajā lapā bija daudz attēlu.
Šeit glābšanai nonāca WordPress filtri.
WordPress kodekss filtru definē kā:
“... āķi, kurus WordPress uzsāk, lai modificētu dažāda veida tekstu, pirms to pievieno datu bāzei vai nosūta pārlūkprogrammas ekrānam.”
Kā izrādās, tas ir tieši tas, kas mums vajadzīgs. Iestatot filtru, lai visi attēli darbotos kā pēdējā darbība, pirms tie tiek atveidoti lapā, mēs varam izmantot PHP, lai noņemtu platuma un augstuma atribūtus, tādējādi apejot nepieciešamību veikt (potenciāli) dārgas DOM manipulācijas, izmantojot JavaScript.
Kods
- /**
- * ATBILSTĪGO ATTĒLU FUNKCIJAS
- */
- 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 (’/ (platums
Iepriekš pievienotajā kodā mēs pievienojam divus filtrus, izmantojot funkciju add_filter. Pirmais arguments ir filtrs, kuru vēlamies piesaistīt, un otrais norāda funkciju, kuru vēlamies palaist, kad tiek izsaukts filtrs.
Mūsu kodā mēs izveidojam divas neskaidras funkcijas:
- post_thumbnail_html Attēli, kas iegūti ar post_thumbnail ()
- image_send_to_editor - redaktoram pievienoti attēli
Pēc tam mēs izmantojam regulāru izteiksmi, lai no attēla tagiem noņemtu gan platuma, gan augstuma atribūtus. Tagad, kad mūsu attēli tiek nosūtīti uz pārlūkprogrammu, tie var būt pilnīgi šķidri, tāpat kā Marcotte kungs mums teica.
Atzīšanās
Man jāatzīstas, ka man ir bijusi ideja izmantot pievienot_filtru Lai noņemtu atribūtus, es visu mūžu nevarēju atrast pareizos WordPress filtrus, kuros pieslēgties.
Pēc daudzām meklēšanas reizēm es beidzot saskāros ar šo ļoti noderīgo Nathaniel Taintor ziņojumu Wordpress Stack Exchange, kurā tika sniegta informācija par diviem man nepieciešamajiem filtriem.
Brīdinājumi
Cik es zinu, šīs pieejas vienīgais būtiskais trūkums ir tas, ka tā nenoņem platuma un augstuma atribūtus no visiem jūsu vietnes attēliem. Es atklāju, ka šī ir problēma, īpaši saistībā ar Gravatar attēliem, kurus WordPress izmanto komentāros.
Ja kādam ir risinājums šim jautājumam, lūdzu, atstājiet komentāru, lai mēs visi varētu gūt labumu.
Es ceru, ka tas ir bijis noderīgi un parādījis alternatīvu paļaušanās uz JavaScript, lai WordPress vietnēs ieviestu “šķidros attēlus”.
Vārdi: Deivids Smits
Deivs Smits ir dizaina priekšnieks, kurš atrodas netālu no skaistās Batas pilsētas, Lielbritānijā. Kad viņš nestrādā pie jauniem un aizraujošiem tīmekļa projektiem, viņš var atrast trompeti, sākot no Big Band džeza grupām līdz simfoniskajiem orķestriem. Jūs varat panākt Deivam čivināt kā @get_dave.
