Мазмун
- Билим керек: Негизги PHP жана CSS
- Талап кылат: WordPress орнотуу, тандалган текст редактору
- Долбоордун убактысы: 10 мүнөт
Эгерде сиз .net журналынын басылып чыккан нускасына жазылсаңыз (эгер андай болбосо, анда эмне үчүн болбосун !?), ушул айда чыккан санда "WordPress менен жооп берүүчү дизайн" деген мыкты макала бар экендигин көрдүңүз.
Макалада автор Джесси Фридман чындыгында эффективдүү веб-сайтты түзүү үчүн WordPress функционалдуулугун максималдуу пайдалануу жана жеңүү үчүн чындыгында пайдалуу ыкмалардын жүгүртүмүн белгилейт. Эгер сиз WordPress менен жооптуу сайтты чыгарууну ойлонуп жатсаңыз, анда анын макаласынын көчүрмөсүн сөзсүз алышыңыз керек. Бул сөзсүз окулушу керек.
Жакында мобилдик биринчи ыкманы колдонуп, WordPressте жеке блогумду калыбына келтирип, макалада камтылган айрым ыкмаларды жакшы билчүмүн. Бирок, мен үчүн чындыгында эле көзгө урунган нерсе - Джесси jQuery аркылуу суюктук сүрөттөрдү иштетүүгө болгон мамилеси.
WordPress жана "суюк сүрөттөр" көйгөйү
Максимумдун кеңдигин колдонуучу 100% суюк сүрөттөрдү жакшы билесиз деп ишенем, анткени алар сүрөттөрдүн кеңдиги же бийиктиги болбошу керек, себеби алар контейнердин көлөмүнө чейин чоңойушу мүмкүн. Тилекке каршы, WordPress Медиа китепканасынан алынган сүрөттөрдүн өлчөмдөрүн автоматтык түрдө эсептеп чыгып, каалаган img> тегдерге туурасы жана бийиктиги атрибуттарын кошот.
Бул баракты көрсөтүү ылдамдыгы үчүн абдан сонун, бирок а массалык Сүрөттүн өлчөмдөрү алардын идишинин көлөмү менен чектелбей калгандыктан, жооптуу макеттерди түзүү жөнүндө сөз болгондо, ал иштин ачкычына ээ.
Бул көйгөй.
JQuery эмес чечим
Джесси өзүнүн макаласында jQuery жүктөлгөндөн кийин барактын бардык img> тегдеринен туурасы жана бийиктиги атрибуттарын алып салуу үчүн колдонууну сунуш кылат. Бул, албетте, иштейт, бирок менин сайтымды курганда, JavaScriptке таянуу идеясын жактырган жокмун, айрыкча сөз болуп жаткан бетте көптөгөн сүрөттөр болсо.
Бул жерде WordPress чыпкалары жардамга келген.
WordPress кодекси чыпканы төмөнкүчө аныктайт:
"... WordPress маалымат базасына кошуудан же браузердин экранына жөнөтүүдөн мурун, ар кандай типтеги текстти өзгөртүү үчүн баштайт."
Көрсө, дал ушул нерсе бизге керек. Бардык сүрөттөрдүн бетинде көрсөтүлө электе акыркы аракет катары иштей турган чыпканы орнотуп, PHP аркылуу туурасы жана бийиктиги атрибуттарын алып салабыз, ошону менен JavaScript аркылуу (мүмкүн) кымбат баалуу DOM манипуляциясын талап кылбайбыз.
Код
- /**
- * ЖООПТУУ ИМИЖ ФУНКЦИЯЛАРЫ
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- function_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (туурасы.)
Жогорудагы кодго add_filter функциясын колдонуп эки чыпканы кошуп жатабыз. Биринчи аргумент - бул биз чыпкалоочу чыпка, экинчиси - чыпка чакырылганда иштей турган функцияны көрсөтөт.
Биздин коддо эки көмүскө функцияга көңүл бурабыз:
- post_thumbnail_html - менен алынган сүрөттөр post_thumbnail ()
- image_send_to_editor - редакторго кошулган сүрөттөр
Андан кийин кадимки сөз айкашын колдонуп, сүрөттүн тегдеринен туурасы жана бийиктиги атрибуттарын алып салабыз. Эми биздин сүрөттөр браузерге жөнөтүлгөндө, алар Маркотт мырза айткандай, толугу менен "суюк" болуп калышы мүмкүн.
Айыптоо
Мен колдонуу идеясы болгонун мойнума алышым керек add_filter Атрибуттарды алып салуу үчүн, мен жашоомдо туура WordPress чыпкаларын таба албай койдум.
Көп издеп жүрүп, акыры, мага керек болгон эки чыпка жөнүндө маалымат берген Натаниэль Тайнтордун Wordpress Stack Exchange сайтындагы бул өтө пайдалуу билдирүүгө тап болдум.
Эскертүү
Менин билишимче, бул ыкманын бирден-бир олуттуу кемчиликтери - бул сиздин сайттагы бардык сүрөттөрдөн туурасы жана бийиктиги атрибуттарын алып салбайт. Мен бул көйгөй деп таптым, айрыкча WordPressтин комментарийлерде колдонуучу Gravatar сүрөттөрү менен.
Эгерде кимде-ким бул маселени чече алса, сураныч, комментарий калтырыңыз, ошондо баарыбызга пайдалуу болот.
Бул пайдалуу болду жана WordPress веб-сайттарында "суюк сүрөттөрдү" ишке ашыруу үчүн JavaScriptке таянуунун альтернативасын көрсөттү деп ишенем.
Сөздөр: Дэвид Смит
Дэйв Смит - Улуу Британиянын Бат шаарына жакын жерде жайгашкан алдыңкы дизайнер. Ал жаңы жана кызыктуу веб-долбоорлордун үстүндө иштебей жүргөндө, Big Band джаз топторунан баштап, Симфониялык оркестрлерге чейин сурнай тартса болот. Дейвди Twitterден @get_dave деп билип алсаңыз болот.
