Задаволены
- Патрэбныя веды: Асноўныя PHP і CSS
- Патрабуецца: Усталёўка WordPress, тэкставы рэдактар на выбар
- Час праекта: 10 хвілін
Калі вы падпісаліся на друкаваную версію часопіса .net (калі не, то чаму б !?), вы ўбачылі, што ў гэтым месяцы выходзіць выдатны артыкул на тэму "Спагадны дызайн з WordPress".
У гэтым артыкуле аўтар Джэсі Фрыдман выкладае нагрузку сапраўды карысных метадаў для таго, каб максімальна выкарыстоўваць і пераадольваць уласцівыя WordPress функцыі, каб стварыць сапраўды эфектыўны гнуткі вэб-сайт. Калі вы думаеце стварыць адаптыўны сайт з WordPress, вам абавязкова трэба падабраць копію яго артыкула. Гэта неабходна прачытаць.
Нядаўна перабудаваўшы свой асабісты блог на WordPress, выкарыстоўваючы адаптыўны падыход, упершыню выкарыстаны для мабільных прылад, я быў знаёмы з некаторымі метадамі, разгляданымі ў артыкуле. Аднак адзіным пунктам, які сапраўды вылучаўся для мяне, быў падыход Джэсі да ўключэння цякучых малюнкаў праз jQuery.
Праблема з WordPress і "вадкімі малюнкамі"
Як я ўпэўнены, вам усім вядомыя "вадкія выявы" - якія выкарыстоўваюць максімальную шырыню: 100% - патрабуюць, каб выявы не мелі фіксаванай шырыні і вышыні, каб яны маглі маштабавацца да памеру кантэйнера. На жаль, WordPress аўтаматычна вылічвае памеры выяваў, створаных з медыя-бібліятэкі, і дадае адпаведныя атрыбуты шырыні і вышыні ў любыя тэгі img>.
Гэта выдатна падыходзіць для хуткасці рэндэрынгу старонкі, але гэта выклікае масіўны гаечны ключ у працы, калі гаворка ідзе пра стварэнне адаптыўных макетаў, паколькі памеры малюнкаў больш не абмяжоўваюцца памерам іх кантэйнера.
Гэта праблема.
Рашэнне не-jQuery
У сваім артыкуле Джэсі прапануе выкарыстоўваць jQuery для выдалення атрыбутаў шырыні і вышыні з усіх тэгаў img> на старонцы пасля загрузкі. Гэта, безумоўна, працуе, але пры стварэнні майго сайта мне не спадабалася ідэя спадзявацца на JavaScript, каб дасягнуць гэтага, асабліва калі на разгляданай старонцы было шмат малюнкаў.
Тут на дапамогу прыйшлі фільтры WordPress.
Кодэкс WordPress вызначае фільтр як:
"... хукі, якія WordPress запускае для мадыфікацыі тэксту розных тыпаў, перш чым дадаваць яго ў базу дадзеных альбо адпраўляць на экран аглядальніка."
Як высвятляецца, гэта менавіта тое, што нам трэба. Наладжваючы фільтр для запуску ўсіх малюнкаў у якасці канчатковага дзеяння перад тым, як яны будуць адлюстраваны на старонцы, мы можам выкарыстоўваць PHP для выдалення атрыбутаў шырыні і вышыні, тым самым абыходзячы неабходнасць (магчыма) дарагіх маніпуляцый DOM праз JavaScript.
Код
- /**
- * ФУНКЦЫІ АДКАЗНАГА ВЫЯЎЛЯ
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- функцыя remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (шырыня
У прыведзеным кодзе мы дадаем два фільтры з дапамогай функцыі add_filter. Першы аргумент - гэта фільтр, які мы хочам падключыць, а другі - функцыя, якую мы хочам запусціць пры выкліку фільтра.
У нашым кодзе мы падключаем дзве незразумелыя функцыі:
- post_thumbnail_html - выявы, атрыманыя з post_thumbnail ()
- image_send_to_editor - выявы дададзены ў рэдактар
Затым мы выкарыстоўваем рэгулярны выраз для выдалення атрыбутаў шырыні і вышыні з тэгаў выявы. Цяпер, калі нашы выявы адпраўляюцца ў браўзэр, яны могуць быць цалкам «вадкімі», як сказаў нам Маркат.
Прызнанне
Я павінен прызнацца, што меў ідэю выкарыстоўваць дадаць_фільтр каб выдаліць атрыбуты, я не мог за ўсё жыццё знайсці правільныя фільтры WordPress, якія трэба падключыць.
Пасля доўгіх пошукаў я, нарэшце, наткнуўся на гэты надзвычай карысны пост на Wordpress Stack Exchange Натаніэля Тайнтара, у якім была інфармацыя пра два патрэбныя мне фільтры.
Засцярогі
Наколькі я ведаю, адзіным істотным недахопам гэтага падыходу з'яўляецца тое, што ён не выдаляе атрыбуты шырыні і вышыні з усіх малюнкаў на вашым сайце. Я выявіў, што гэта праблема, у прыватнасці, з выявамі Gravatar, якія WordPress выкарыстоўвае ў каментарыях.
Калі хто-небудзь вырашыў гэтае пытанне, калі ласка, пакіньце каментар, каб мы маглі атрымаць выгаду.
Я спадзяюся, што гэта было карысна і прадэманстравала альтэрнатыву спадзяванню на JavaScript для рэалізацыі "цякучых малюнкаў" на сайтах WordPress.
Словы: Дэвід Сміт
Дэйв Сміт - дызайнер, які базуецца побач з выдатным горадам Бат, Вялікабрытанія. Калі ён не працуе над новымі і захапляльнымі вэб-праектамі, яго можна знайсці на трубе ва ўсім - ад джазавых груп Big Band да сімфанічных аркестраў. Вы можаце дагнаць Дэйва ў Twitter як @get_dave.
