Садржај
- Потребно знање: Основни ПХП и ЦСС
- Захтева: ВордПресс инсталација, уређивач текста по избору
- Време пројекта: 10 минута
Ако се претплатите на штампану верзију часописа .нет (ако не, зашто не !?), видећете да овомесечно издање садржи одличан чланак о „Респонсиве Десигн витх ВордПресс“.
У чланку аутор Јессе Фриедман износи хрпу заиста корисних техника за искоришћавање и превазилажење инхерентне ВордПресс функционалности како би се створио заиста ефикасан одзивни веб сајт. Ако размишљате о томе да направите прилагодљиву веб локацију са ВордПрессом, дефинитивно бисте требали узети копију његовог чланка. То је обавезно читање.
Пошто сам недавно обновио свој лични блог на ВордПресс-у, користећи одговарајући приступ који је био први за мобилне уређаје, упознао сам неке од техника обрађених у чланку. Међутим, оно што ми се заиста истакло је Јессејев приступ омогућавању флуидних слика путем јКуери-а.
Проблем са ВордПресс-ом и „флуидним сликама“
Као што сам сигуран да сви знате да „флуидне слике“ - које користе максималну ширину: 100% - захтевају да слике немају фиксну ширину или висину како би могле да се прилагоде величини контејнера. Нажалост, ВордПресс аутоматски израчунава димензије слика генерисаних из библиотеке медија и додаје одговарајуће атрибуте ширине и висине било којим имг> ознакама.
Ово је сјајно за брзину приказивања странице, али баца а масиван кључ у раду када је у питању стварање одзивних изгледа, јер димензије слике више нису ограничене на величину њиховог контејнера.
То је проблем.
Решење које није јКуери
У свом чланку Јессе ’предлаже коришћење јКуери за уклањање атрибута ширине и висине са свих ознака имг> на страници након што се учита. Ово сигурно функционише, али приликом израде моје веб странице није ми се свидела идеја да се за постизање тога ослањам на ЈаваСцрипт, посебно ако је на дотичној страници било пуно слика.
Овде су у помоћ притекли ВордПресс филтри.
ВордПресс кодекс дефинише филтер као:
„... куке које ВордПресс покреће за модификовање текста различитих врста пре него што га дода у базу података или пошаље на екран прегледача.“
Испоставило се да је то управо оно што нам треба. Постављањем филтера који ће се изводити на свим сликама као завршној радњи пре него што се прикажу на страници, можемо да користимо ПХП за уклањање атрибута ширине и висине, заобилазећи тако потребу за (потенцијално) скупом ДОМ манипулацијом путем ЈаваСцрипт-а.
Код
- /**
- * ФУНКЦИЈЕ ОДГОВОРНЕ СЛИКЕ
- */
- адд_филтер ('пост_тхумбнаил_хтмл', 'ремове_тхумбнаил_дименсионс', 10);
- адд_филтер ('имаге_сенд_то_едитор', 'ремове_тхумбнаил_дименсионс', 10);
- функција ремове_тхумбнаил_дименсионс ($ хтмл)
- $ хтмл = прег_реплаце (’/ (ширина
У горњи код додајемо два филтера помоћу функције адд_филтер. Први аргумент је филтер на који желимо да се прикључимо, а други одређује функцију коју желимо да покренемо када се филтер позове.
У нашем коду спојимо две нејасне функције:
- пост_тхумбнаил_хтмл - слике преузете помоћу пост_тхумбнаил ()
- имаге_сенд_то_едитор - слике додане у едитор
Затим користимо регуларни израз за уклањање атрибута ширине и висине са ознака слике. Сада када се наше слике шаљу у прегледач, могу бити потпуно „течне“ баш онако како нам је рекао господин Марцотте.
Исповест
Морам да признам да сам имао идеју да користим адд_филтер да бих уклонио атрибуте, за свог живота нисам могао да пронађем исправне ВордПресс филтере за које се могу повезати.
После пуно претраживања, коначно сам наишао на овај изузетно користан пост на Вордпресс Стацк Екцханге-у Натханиела Таинтора који је пружио информације о два потребна филтера.
Упозорења
Колико знам, једина велика мана овог приступа је та што он не уклања атрибуте ширине и висине са свих слика на вашој веб локацији. Открио сам да је ово проблем, посебно са Граватар сликама које ВордПресс користи у коментарима.
Ако неко има решење за овај проблем, оставите коментар да бисмо сви могли имати користи.
Надам се да је ово било корисно и да је показао алтернативу ослањању на ЈаваСцрипт за примену „флуидних слика“ на ВордПресс веб локацијама.
Речи: Давид Смитх
Даве Смитх је дизајнер фронта са седиштем у близини прелепог града Батх у Великој Британији. Када не ради на новим и узбудљивим веб пројектима, може се наћи како свира на труби у свему, од џез група Биг Банда до Симфонијских оркестара. Можете сустићи Даве-а на Твиттер-у као @гет_даве.
