విషయము
- జ్ఞానం అవసరం: ప్రాథమిక PHP మరియు CSS
- అవసరం: WordPress ఇన్‌స్టాల్, ఎంపిక టెక్స్ట్ ఎడిటర్
- ప్రాజెక్ట్ సమయం: 10 నిమిషాల
మీరు .net మ్యాగజైన్ యొక్క ముద్రణ సంస్కరణకు చందా పొందినట్లయితే (కాకపోతే, ఎందుకు కాదు!?), ఈ నెల సంచికలో “WordPress తో రెస్పాన్సివ్ డిజైన్” పై అద్భుతమైన కథనం ఉందని మీరు చూస్తారు.
వ్యాసంలో, రచయిత జెస్సీ ఫ్రైడ్మాన్ నిజంగా ప్రభావవంతమైన ప్రతిస్పందించే వెబ్‌సైట్‌ను రూపొందించడానికి స్వాభావిక WordPress కార్యాచరణను ఎక్కువగా ఉపయోగించుకోవటానికి మరియు అధిగమించడానికి నిజంగా ఉపయోగకరమైన పద్ధతుల గురించి వివరించాడు. మీరు WordPress తో ప్రతిస్పందించే సైట్‌ను రూపొందించాలని ఆలోచిస్తుంటే, మీరు ఖచ్చితంగా అతని వ్యాసం యొక్క కాపీని తీసుకోవాలి. ఇది తప్పక చదవాలి.
ప్రతిస్పందించే, మొబైల్-మొదటి విధానాన్ని ఉపయోగించి బ్లాగులో నా వ్యక్తిగత బ్లాగును ఇటీవల పునర్నిర్మించిన తరువాత, వ్యాసంలో ఉన్న కొన్ని పద్ధతుల గురించి నాకు బాగా తెలుసు. అయినప్పటికీ, j క్వెరీ ద్వారా ద్రవ చిత్రాలను ప్రారంభించడానికి జెస్సీ యొక్క విధానం నాకు నిజంగా ప్రత్యేకమైన అంశం.
WordPress మరియు “ద్రవ చిత్రాలు” తో సమస్య
గరిష్ట వెడల్పు: 100% ను ఉపయోగించుకునే మీ అందరికీ తెలిసిన ‘ద్రవ చిత్రాలు’ నాకు ఖచ్చితంగా తెలుసు - చిత్రాలకు వాటి కంటైనర్ పరిమాణానికి కొలవటానికి స్థిరమైన వెడల్పు లేదా ఎత్తు ఉండకూడదు. దురదృష్టవశాత్తు, WordPress స్వయంచాలకంగా మీడియా లైబ్రరీ నుండి ఉత్పత్తి చేయబడిన చిత్రాల కొలతలు లెక్కిస్తుంది మరియు ఏదైనా img> ట్యాగ్‌లకు సంబంధిత వెడల్పు మరియు ఎత్తు లక్షణాలను జోడిస్తుంది.
పేజీ రెండరింగ్ వేగం కోసం ఇది చాలా బాగుంది కాని ఇది విసురుతుంది భారీ ఇమేజ్ కొలతలు ఇకపై వాటి కంటైనర్ పరిమాణానికి పరిమితం కానందున ప్రతిస్పందించే లేఅవుట్‌లను సృష్టించేటప్పుడు పనిలో స్పేనర్.
ఇది ఒక సమస్య.
నాన్ j క్వెరీ పరిష్కారం
పేజీలో లోడ్ అయిన తర్వాత అన్ని img> ట్యాగ్‌ల నుండి వెడల్పు మరియు ఎత్తు లక్షణాలను తొలగించడానికి j క్వెరీని ఉపయోగించమని జెస్సీ తన వ్యాసంలో సూచించారు. ఇది ఖచ్చితంగా పనిచేస్తుంది కాని నా సైట్‌ను నిర్మించేటప్పుడు దీన్ని సాధించడానికి జావాస్క్రిప్ట్‌పై ఆధారపడే ఆలోచన నాకు నచ్చలేదు, ప్రత్యేకించి ప్రశ్న పేజీలో చాలా చిత్రాలు ఉంటే.
ఇక్కడే WordPress ఫిల్టర్లు రక్షించటానికి వచ్చాయి.
WordPress కోడెక్స్ ఫిల్టర్‌ను ఇలా నిర్వచిస్తుంది:
"... డేటాబేస్కు జోడించే ముందు లేదా బ్రౌజర్ స్క్రీన్‌కు పంపే ముందు వివిధ రకాల వచనాలను సవరించడానికి WordPress ప్రారంభించిన హుక్స్."
ఇది మారుతున్నప్పుడు ఇది మనకు అవసరం. పేజీలో అన్వయించబడటానికి ముందే అన్ని చిత్రాలను తుది చర్యగా అమలు చేయడానికి ఫిల్టర్‌ను సెటప్ చేయడం ద్వారా, వెడల్పు మరియు ఎత్తు లక్షణాలను తొలగించడానికి మేము PHP ని ఉపయోగించవచ్చు, తద్వారా జావాస్క్రిప్ట్ ద్వారా ఖరీదైన 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 ()
- image_send_to_editor - ఎడిటర్‌కు చిత్రాలు జోడించబడ్డాయి
ఇమేజ్ ట్యాగ్‌ల నుండి వెడల్పు మరియు ఎత్తు లక్షణాలను తొలగించడానికి మేము సాధారణ వ్యక్తీకరణను ఉపయోగిస్తాము. ఇప్పుడు మా చిత్రాలను బ్రౌజర్‌కు పంపినప్పుడు అవి పూర్తిగా ‘ద్రవం’ కావచ్చు, మిస్టర్ మార్కోట్ వారు చెప్పినట్లు మాకు చెప్పారు.
ఒప్పుకోలు
నేను ఉపయోగించాలనే ఆలోచన కలిగి ఉన్నాను add_filter నా జీవితానికి నేను చేయలేని లక్షణాలను తొలగించడానికి సరైన బ్లాగు ఫిల్టర్లను గుర్తించండి.
చాలా శోధించిన తరువాత నేను చివరికి నాథనియల్ టెయింటర్ రాసిన WordPress స్టాక్ ఎక్స్ఛేంజ్లో ఈ చాలా సహాయకారిగా ఉన్న పోస్ట్ను చూశాను, ఇది నాకు అవసరమైన రెండు ఫిల్టర్ల గురించి సమాచారాన్ని అందించింది.
కేవిట్స్
నాకు తెలిసినంతవరకు, ఈ విధానానికి ఉన్న ఏకైక ప్రధాన విషయం ఏమిటంటే, ఇది మీ సైట్‌లోని అన్ని చిత్రాల నుండి వెడల్పు మరియు ఎత్తు లక్షణాలను తొలగించదు. వ్యాఖ్యలలో బ్లాగు ఉపయోగించే గ్రావతార్ చిత్రాలతో ప్రత్యేకంగా ఇది ఒక సమస్యగా నేను గుర్తించాను.
ఈ సమస్యకు ఎవరికైనా పరిష్కారం ఉంటే దయచేసి వ్యాఖ్యానించండి, అందువల్ల మనమందరం ప్రయోజనం పొందవచ్చు.
WordPress వెబ్‌సైట్లలో “ద్రవ చిత్రాలను” అమలు చేయడానికి జావాస్క్రిప్ట్‌పై ఆధారపడటానికి ఇది ఉపయోగకరంగా ఉందని మరియు ప్రత్యామ్నాయాన్ని ప్రదర్శించానని నేను ఆశిస్తున్నాను.
పదాలు: డేవిడ్ స్మిత్
డేవ్ స్మిత్ UK లోని అందమైన నగరం బాత్ సమీపంలో ఉన్న ఫ్రంట్ ఎండ్ డిజైనర్. అతను క్రొత్త మరియు ఉత్తేజకరమైన వెబ్ ప్రాజెక్ట్‌లలో పని చేయనప్పుడు, బిగ్ బ్యాండ్ జాజ్ సమూహాల నుండి సింఫనీ ఆర్కెస్ట్రా వరకు ప్రతిదానిలో అతను బాకా వాయిస్తాడు. మీరు డేవ్‌ను ట్విట్టర్‌లో @get_dave గా తెలుసుకోవచ్చు.
