Բովանդակություն
- Գիտելիք է պետքՀիմնական PHP և CSS
- Պահանջում էWordPress- ի տեղադրում, ընտրության տեքստի խմբագիր
- Րագրի ժամանակը: 10 րոպե
Եթե բաժանորդագրվեք .net ամսագրի տպագիր տարբերակին (եթե ոչ, ինչու չէ !?), կտեսնեք, որ այս ամսվա համարում տպագրվում է հիանալի հոդված «Պատասխանատու դիզայն WordPress- ով» թեմայով:
Հոդվածում հեղինակ essեսի Ֆրիդմանը նախանշում է իսկապես օգտակար տեխնիկայի մեծ քանակ ՝ WordPress- ի բնորոշ ֆունկցիոնալությունն առավելագույնս օգտագործելու և հաղթահարելու համար ՝ իսկապես արդյունավետ արձագանքող կայք ստեղծելու համար: Եթե մտածում եք WordPress- ի հետ պատասխանատու կայք արտադրելու մասին, անպայման պետք է վերցնեք նրա հոդվածի պատճենը: Դա պետք է կարդալ:
Վերջերս վերակառուցելով իմ անձնական բլոգը WordPress- ում `օգտագործելով պատասխանատու, բջջայինի առաջին մոտեցում, ես ծանոթ էի հոդվածում տեղ գտած որոշ տեխնիկայի: Այնուամենայնիվ, այն իրը, որն ինձ համար իսկապես աչքի ընկավ, Jesse- ի մոտեցումն էր `jQuery- ի միջոցով հեղուկ պատկերները հնարավոր դարձնելու հարցում:
WordPress- ի և «հեղուկ պատկերների» հետ կապված խնդիր
Քանի որ համոզված եմ, որ բոլորդ տեղյակ եք «հեղուկ պատկերների» համար, որոնք օգտագործում են առավելագույն լայնությունը ՝ 100%, պահանջում են, որ պատկերները չունեն ֆիքսված լայնություն և բարձրություն, որպեսզի կարողանան մասշտաբով հասցնել իրենց տարայի չափը: Unfortunatelyավոք, WordPress- ը ավտոմատ կերպով հաշվարկում է Մեդիա գրադարանից գեներացված պատկերների չափերը և ցանկացած img> պիտակներին ավելացնում է համապատասխանության լայնության և բարձրության հատկանիշները:
Սա հիանալի է էջի մատուցման արագության համար, բայց նետում է ա զանգվածային պատասխանատու դասավորություն ստեղծելու հարցում գործը կատարում է, քանի որ պատկերի չափերն այլևս չեն սահմանափակվում իրենց տարայի չափով:
Դա խնդիր է:
Ոչ jQuery լուծումը
Իր հոդվածում Jesse ’առաջարկում է օգտագործել jQuery- ն` բեռնվելուց հետո էջի բոլոր img> պիտակներից հեռացնելու լայնության և բարձրության հատկությունները: Սա, իհարկե, աշխատում է, բայց իմ կայքը կառուցելիս ինձ դուր չեկավ դրան հասնելու JavaScript- ին ապավինելու գաղափարը, հատկապես եթե խնդրո առարկա էջում շատ պատկերներ կային:
Հենց այստեղ են օգնության հասել WordPress ֆիլտրերը:
WordPress- ի ծածկագիրը զտիչը սահմանում է հետևյալ կերպ.
«... որսալներ, որոնք WordPress- ը սկսում է տարբեր տեսակի տեքստերը փոփոխելու համար` նախքան այն տվյալների բազայում ավելացնելը կամ զննարկչի էկրանին ուղարկելը »:
Ինչպես պարզվեց, սա հենց այն է, ինչ մեզ պետք է: Ստեղծելով զտիչ ՝ բոլոր պատկերների վրա գործելու համար որպես վերջին գործողություն, մինչ դրանք կտարվեն էջում, մենք կարող ենք PHP- ով հեռացնել լայնության և բարձրության հատկությունները ՝ դրանով իսկ շրջանցելով JavaScript- ի միջոցով (պոտենցիալ) թանկարժեք DOM մանիպուլյացիայի անհրաժեշտությունը:
Կոդը
- /**
- * ՊԱՏԱՍԽԱՆԱՏՎԱ ՆԿԱՐԻ Ֆունկցիաներ
- */
- ավելացնել_ֆիլտր («post_thumbnail_html», «remove_thumbnail_dimensions», 10);
- ավելացնել_ֆիլտր ('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- ի այս ծայրաստիճան օգտակար գրառմանը, որը գրել էր Nathaniel Taintor- ը, որը տրամադրեց տեղեկատվություն ինձ անհրաժեշտ երկու ֆիլտրերի մասին:
Քարանձավներ
Որքան գիտեմ, որ այս մոտեցման միակ հիմնական հետադարձումը այն է, որ այն չի հեռացնում լայնության և բարձրության հատկանիշները ձեր կայքի բոլոր պատկերներից: Ես գտա, որ սա խնդիր է, մասնավորապես Gravatar պատկերների հետ, որոնք օգտագործում է WordPress- ը մեկնաբանություններում:
Եթե որևէ մեկը այս խնդրի լուծում ունի, թող մեկնաբանություն թողնի, որպեսզի մենք բոլորս օգուտ ստանանք:
Հուսով եմ, որ սա օգտակար էր և ցույց տվեց այլընտրանք `JavaScript- ին ապավինելու համար` WordPress կայքերում «հեղուկ պատկերներ» իրականացնելու համար:
Բառեր ՝ Դեյվիդ Սմիթ
Դեյվ Սմիթը ճակատային դիզայներ է, որը հիմնված է Միացյալ Թագավորության գեղեցիկ Բաթ քաղաքում: Երբ նա չի աշխատում նոր և հետաքրքիր վեբ նախագծերի վրա, նրան կարելի է գտնել շեփոր նվագելով ամեն ինչում ՝ Big Band ջազային խմբերից մինչև Սիմֆոնիկ նվագախմբեր: Դուք կարող եք հասնել Դեյվին Twitter- ում որպես @get_dave:
