مواد
- علم کی ضرورت ہے: بنیادی پی ایچ پی اور سی ایس ایس
- ضروری ہے: ورڈپریس انسٹال ، انتخاب کے ٹیکسٹ ایڈیٹر
- پروجیکٹ کا وقت: 10 منٹ
اگر آپ. نیٹ میگزین (اگر نہیں تو ، کیوں نہیں!؟) کے پرنٹ ورژن کو سبسکرائب کرتے ہیں تو ، آپ نے دیکھا ہوگا کہ اس ماہ کے شمارے میں "ورڈپریس کے ساتھ قبول ڈیزائن" پر ایک بہترین مضمون پیش کیا گیا ہے۔
مضمون میں ، مصنف جیسی فریڈمین واقعی ایک موثر ذمہ دار ویب سائٹ تیار کرنے کے لئے موروثی ورڈپریس فعالیت کو زیادہ سے زیادہ بنانے اور قابو پانے کے لئے واقعی مفید تکنیکوں کی ایک خاکہ پیش کرتی ہے۔ اگر آپ ورڈپریس کے ساتھ جواب دہ سائٹ تیار کرنے کے بارے میں سوچ رہے ہیں تو آپ کو یقینی طور پر اس کے مضمون کی ایک کاپی چن لینی چاہئے۔ یہ ضرور پڑھنا ہے
حال ہی میں ورڈپریس پر اپنے ذاتی بلاگ کو ایک ذمہ دار ، موبائل اولین انداز کے ذریعے دوبارہ تعمیر کرنے کے بعد ، میں مضمون میں شامل کچھ تکنیکوں سے واقف تھا۔ تاہم ، ایک چیز جو واقعی میں میرے لئے کھڑی تھی وہ ہے جیسی کا jQuery کے ذریعہ فلوڈ امیجز کو قابل بنانا۔
ورڈپریس اور "سیال کی تصاویر" کے ساتھ مسئلہ
چونکہ مجھے یقین ہے کہ آپ سب واقف ’’ سیال تصاویر ‘‘ ہیں - جو زیادہ سے زیادہ چوڑائی کا استعمال کرتے ہیں: 100٪ - اس بات کی ضرورت ہوتی ہے کہ تصاویر کی کوئی مقررہ چوڑائی یا بلندی نہ ہو تاکہ وہ اپنے کنٹینر کے سائز کی پیمائش کرسکیں۔ بدقسمتی سے ، ورڈپریس خود بخود میڈیا لائبریری سے تیار کردہ تصاویر کے طول و عرض کا حساب لگاتا ہے اور کسی بھی img> ٹیگز میں اسی چوڑائی اور اونچائی کی خصوصیات کو جوڑتا ہے۔
یہ صفحہ پیش کرنے کی رفتار کے لئے بہت اچھا ہے لیکن یہ پھینک دیتا ہے بڑے پیمانے پر کاموں میں اسپینر جب ذمہ دار ترتیب پیدا کرنے کی بات آتی ہے کیونکہ تصویری طول و عرض اب ان کے کنٹینر کی جسامت تک محدود نہیں رہتے ہیں۔
یہ ایک مسئلہ ہے۔
غیر jQuery حل
جیسی نے اپنے مضمون میں صفحہ پر موجود تمام img> ٹیگز سے چوڑائی اور اونچائی کی خصوصیات کو دور کرنے کے لئے jQuery کا استعمال تجویز کیا ہے۔ یہ یقینی طور پر کام کرتا ہے لیکن اپنی سائٹ کی تعمیر کرتے وقت مجھے اس کے حصول کے لئے جاوا اسکرپٹ پر انحصار کرنے کا خیال پسند نہیں آیا ، خاص طور پر اگر اس صفحے پر بہت ساری تصاویر موجود ہوں۔
یہ وہ جگہ ہے جہاں ورڈپریس فلٹرز مددگار ثابت ہوئے۔
ورڈپریس کوڈیکس ایک فلٹر کی وضاحت اس طرح کرتا ہے:
"... ہکس جو ورڈپریس مختلف قسم کے متن کو ڈیٹا بیس میں شامل کرنے یا براؤزر اسکرین پر بھیجنے سے پہلے اس میں ترمیم کرنے کے لئے شروع کرتا ہے۔"
جیسا کہ یہ پتہ چلتا ہے بالکل وہی جو ہماری ضرورت ہے۔ اس صفحے پر پیش کیے جانے سے پہلے حتمی کارروائی کے طور پر تمام تصاویر پر چلانے کے لئے ایک فلٹر ترتیب دے کر ، ہم پی ایچ پی کا استعمال جاوا اسکرپٹ کے ذریعہ (ممکنہ طور پر) مہنگے DOM ہیرا پھیری کی ضرورت سے بچنے کے لئے چوڑائی اور اونچائی کی خصوصیات کو دور کرنے کے ل. کرسکتے ہیں۔
کوڈ
- /**
- * جوابی امیجنگ فنکشنز
- */
- add_filter (’پوسٹ_تھمب نیل_ ایچ ٹی ایم ایل‘ ، ’ہٹائیں_تھمبنےل_عامیات’ ، 10)؛
- add_filter (’شبیہ_سندر_ ٹو_اڈیٹر‘ ، ’ہٹائیں_تھمبنےل_عامیات’ ، 10)؛
- فنکشن ہٹائیں_تھمب نیل_یعاد (t HTML)
- t html = preg_replace (’/ (چوڑائی)
اوپر والے کوڈ میں ہم add_filter فنکشن کا استعمال کرکے دو فلٹرز شامل کر رہے ہیں۔ پہلی دلیل وہ فلٹر ہے جس میں ہم جھونکنا چاہتے ہیں اور دوسرا وہ فنکشن بتاتا ہے جس کو ہم فلٹر کے بلانے پر چلنا چاہتے ہیں۔
ہمارے کوڈ میں ہم نے دو غیر واضح افعال کو سمجھا۔
- post_thumbnail_html - کے ساتھ بازیافت کی تصاویر post_thumbnail ()
- امیج_سینڈ_ ٹو_ایڈیٹر - تصاویر ایڈیٹر میں شامل
اس کے بعد ہم تصویر والے ٹیگس سے چوڑائی اور اونچائی دونوں خصوصیات کو ختم کرنے کے لئے باقاعدہ اظہار کا استعمال کرتے ہیں۔ اب جب ہماری تصاویر براؤزر پر بھیجی جاتی ہیں تو وہ بالکل اسی طرح ’سیال‘ ہوسکتی ہیں جیسے مسٹر مارکوٹے نے ہمیں بتایا تھا کہ انہیں چاہئے۔
ایک اعتراف
مجھے اعتراف کرنا ہوگا کہ استعمال کرنے کا خیال آیا تھا add_filter ان صفات کو دور کرنے کے ل I جو میری زندگی میں نہیں ہوسکتے تھے تاکہ ورڈپریس کے صحیح فلٹرز کو ڈھونڈیں۔
بہت تلاش کرنے کے بعد بالآخر ناتھینیل ٹینٹر کے ذریعہ ورڈپریس اسٹیک ایکسچینج میں اس انتہائی مددگار پوسٹ کو پہنچا جس نے مجھے مطلوبہ دو فلٹرز کے بارے میں معلومات فراہم کیں۔
غار
جہاں تک میں جانتا ہوں کہ اس نقطہ نظر کی واحد بڑی واپسی یہ ہے کہ وہ آپ کی سائٹ پر موجود تمام تصاویر سے چوڑائی اور اونچائی کی خصوصیات کو نہیں ہٹاتا ہے۔ میں نے یہ خاص طور پر گروتوٹر امیجز کو ورڈپریس کے تبصروں میں استعمال کرنے والی باتوں کے ساتھ ایک مسئلہ قرار پایا۔
اگر کسی کے پاس بھی اس مسئلے کا حل ہے تو براہ کرم کوئی تبصرہ کریں تاکہ ہم سب کو فائدہ ہو سکے۔
مجھے امید ہے کہ یہ جاوا اسکرپٹ پر انحصار کرنے کا متبادل ثابت ہوا ہے جو ورڈپریس ویب سائٹوں پر "سیال شبیہیں" نافذ کرنے کے لئے ہے۔
الفاظ: ڈیوڈ اسمتھ
ڈیو اسمتھ برطانیہ کے خوبصورت شہر باتھ کے قریب مقیم فرنٹ اینڈ ڈیزائنر ہے۔ جب وہ نئے اور دلچسپ ویب پروجیکٹس پر کام نہیں کررہا ہے تو اسے بگ بینڈ جاز گروپس سے لے کر سمفنی آرکسٹرا تک ہر چیز میں ترہی بجاتے ہوئے پایا جاسکتا ہے۔ آپ ٹویٹر پر ڈیو کوget_dave کی طرح پکڑ سکتے ہیں۔
