Мазмұны
- Қажетті білімНегізгі PHP және CSS
- Талап етеді: WordPress орнату, таңдау бойынша мәтіндік редактор
- Жоба уақыты: 10 минут
Егер сіз .net журналының баспа нұсқасына жазылсаңыз (егер олай болмаса, неге жоқ !?), сіз бұл айда «WordPress-пен жауап беру дизайны» тақырыбында керемет мақала шыққанын көресіз.
Мақалада автор Джесси Фридман шынымен де тиімді веб-сайтты құру үшін WordPress функционалдығын мейлінше пайдалану және жеңу үшін шынымен де пайдалы техниканың жүктемесін атап өтті. Егер сіз WordPress-пен жауап беретін сайт жасағыңыз келсе, оның мақаласының көшірмесін алуыңыз керек. Бұл міндетті түрде оқу керек.
Жуырда WordPress-те жеке блогымды жедел, мобильді бірінші тәсілмен қалпына келтіріп, мақалада келтірілген кейбір әдістермен таныс болдым. Алайда мен үшін ерекше көзге түскен нәрсе - Джессидің jQuery арқылы сұйық кескіндерді қосуға деген көзқарасы.
WordPress және «сұйық кескіндер» проблемасы
Максималды енді қолданатын 100% сұйық кескіндерді білетіндігіңізге сенімдімін: суреттер олардың контейнерінің көлеміне дейін кеңейе алатындай етіп ені мен биіктігінің болмауын талап етеді. Өкінішке орай, WordPress медиа кітапханадан алынған кескіндердің өлшемдерін автоматты түрде есептейді және кез-келген img> тегтерге сәйкес ені мен биіктігі атрибуттарын қосады.
Бұл бетті көрсету жылдамдығы үшін өте жақсы, бірақ а жаппай суреттердің өлшемдері олардың контейнерінің өлшемімен шектелмейтіндіктен, жауап беретін макеттерді жасау туралы әңгіме болған кезде жұмыс істейді.
Бұл мәселе.
JQuery емес шешім
Джесси өз мақаласында ені мен биіктігі атрибуттарын жүктелгеннен кейін парақтың барлық img> тегтерінен жою үшін jQuery-ді қолдануды ұсынады. Бұл әрине жұмыс істейді, бірақ менің сайтымды құрған кезде маған 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);
- remove_thumbnail_dimensions функциясы ($ html)
- $ html = preg_replace (’/ (ені)
Жоғарыдағы кодта add_filter функциясы арқылы екі сүзгі қосылуда. Бірінші аргумент - біз қосқымыз келетін сүзгі, ал екіншісі - сүзгі шақырылған кезде іске қосылатын функцияны көрсетеді.
Біздің кодта біз екі түсініксіз функцияны қарастырамыз:
- post_thumbnail_html - кескіндер post_thumbnail ()
- редакторға сурет_жіберу - редакторға қосылған суреттер
Содан кейін біз сурет өрнектерінен ені мен биіктігі атрибуттарын алып тастау үшін тұрақты өрнекті қолданамыз. Енді біздің суреттер браузерге жіберілгенде, олар Маркотте мырзаның айтуы бойынша толықтай «сұйық» бола алады.
Айыптау
Мен пайдалану туралы ой болғанын мойындауым керек қосу_фильтрі атрибуттарды алып тастау үшін мен өмір бойы дұрыс WordPress сүзгілерін таба алмадым.
Көп ізденістен кейін мен Натаниэль Тайнтордың Wordpress Stack Exchange-де маған қажет екі сүзгі туралы ақпаратты берген өте пайдалы хабарламасына тап болдым.
Ескерту
Менің білуімше, бұл тәсілдің жалғыз кері әсері - бұл сіздің сайтыңыздағы барлық суреттерден ені мен биіктігі атрибуттарын алып тастамайды. Мен бұл мәселені, атап айтқанда, WordPress-тің түсініктемелерде қолданатын Gravatar суреттерімен анықтадым.
Егер кімде-кім бұл мәселені шеше алса, түсініктеме қалдырыңыз, сонда біз бәрімізге пайда әкелеміз.
Бұл пайдалы болды және WordPress веб-сайттарында «сұйық суреттерді» енгізу үшін JavaScript-ке сенім артудың альтернативасын көрсетті деп үміттенемін.
Сөздер: Дэвид Смит
Дэйв Смит - Ұлыбританиядағы Бат қаласының әдемі қаласының жанында орналасқан алдыңғы дизайнер. Ол жаңа және қызықты веб-жобаларда жұмыс істемейтін кезде оны Big Band джаз топтарынан бастап, симфониялық оркестрлерге дейін кернеймен ойнауға болады. Сіз Дэйвті Twitter-де @get_dave ретінде біле аласыз.
