কন্টেন্ট
- জ্ঞান দরকার: বেসিক পিএইচপি এবং সিএসএস
- প্রয়োজন: ওয়ার্ডপ্রেস ইনস্টল, পছন্দের পাঠ্য সম্পাদক
- প্রকল্পের সময়: 10 মিনিট
আপনি যদি নেট ম্যাগাজিনের প্রিন্ট সংস্করণে সাবস্ক্রাইব করেন (যদি তা না হয় তবে কেন !?), আপনি দেখতে পাবেন যে এই মাসের ইস্যুতে "ওয়ার্ডপ্রেস সহ প্রতিক্রিয়াশীল নকশা" শীর্ষক একটি নিবন্ধ রয়েছে
নিবন্ধে, লেখক জেসি ফ্রেডম্যান সত্যিকারের কার্যকর প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির জন্য সহজাত ওয়ার্ডপ্রেস কার্যকারিতা সর্বাধিক, এবং কাটিয়ে ওঠার জন্য সত্যিকারের দরকারী কৌশলগুলির একটি বোঝার রূপরেখা দিয়েছেন। আপনি যদি ওয়ার্ডপ্রেসের সাথে একটি প্রতিক্রিয়াশীল সাইট তৈরির কথা ভাবছেন তবে আপনার অবশ্যই তাঁর নিবন্ধটির একটি অনুলিপি নেওয়া উচিত। এটি অবশ্যই পড়তে হবে।
একটি প্রতিক্রিয়াশীল, মোবাইল-প্রথম পদ্ধতির ব্যবহার করে সম্প্রতি ওয়ার্ডপ্রেসে আমার ব্যক্তিগত ব্লগটি পুনর্নির্মাণ করাতে আমি নিবন্ধে আবদ্ধ কয়েকটি কৌশলগুলির সাথে পরিচিত ছিলাম। যাইহোক, আমার কাছে যে আইটেমটি সত্যিই দাঁড়িয়েছিল তা হ'ল জেসিউয়ের মাধ্যমে তরল চিত্রগুলি সক্ষম করার জন্য জেসির দৃষ্টিভঙ্গি।
ওয়ার্ডপ্রেস এবং "তরল চিত্র" নিয়ে সমস্যা
যেহেতু আমি নিশ্চিত যে আপনি সমস্ত সচেতন ‘তরল চিত্রগুলি’ - যা সর্বোচ্চ-প্রস্থের ব্যবহার করে: 100% - এই চিত্রগুলির কোনও নির্দিষ্ট প্রস্থ বা উচ্চতা না থাকে যাতে তারা তার ধারকটির আকার মাপতে পারে। দুর্ভাগ্যক্রমে, ওয়ার্ডপ্রেস স্বয়ংক্রিয়ভাবে মিডিয়া লাইব্রেরি থেকে প্রাপ্ত চিত্রগুলির মাত্রাগুলি গণনা করে এবং কোনও img> ট্যাগগুলিতে সংশ্লিষ্ট প্রস্থ এবং উচ্চতার বৈশিষ্ট্য যুক্ত করে।
এটি পৃষ্ঠা রেন্ডারিং গতির জন্য দুর্দান্ত তবে এটি নিক্ষেপ করে বিশাল কাজগুলিতে স্প্যানার যখন প্রতিক্রিয়াশীল লেআউটগুলি তৈরি করতে আসে তখন চিত্রের মাত্রা তাদের ধারক আকারে আর সীমাবদ্ধ থাকে না।
ঐটা একটা সমস্যা.
অ- jQuery সমাধান
জেসি তার নিবন্ধে পৃষ্ঠাটি একবার লোড হয়ে গেলে সমস্ত img> ট্যাগ থেকে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি সরিয়ে দিতে jQuery ব্যবহার করার পরামর্শ দেয়। এটি অবশ্যই কাজ করে তবে আমার সাইটটি তৈরি করার সময় আমি এটি অর্জনের জন্য জাভাস্ক্রিপ্টের উপর নির্ভর করার ধারণা পছন্দ করি না, বিশেষত যদি প্রশ্নে থাকা পৃষ্ঠায় অনেকগুলি চিত্র থাকে।
এখানেই ওয়ার্ডপ্রেস ফিল্টারগুলি উদ্ধার করতে আসে।
ওয়ার্ডপ্রেস কোডেক্স একটি ফিল্টারকে এই রূপে সংজ্ঞায়িত করে:
"... হুক্স যা ওয়ার্ডপ্রেস বিভিন্ন ধরণের পাঠ্যকে ডেটাবেজে যুক্ত করার আগে বা ব্রাউজারের স্ক্রিনে প্রেরণের আগে তা পরিবর্তন করতে চালু করে” "
দেখা যাচ্ছে এটি ঠিক আমাদের প্রয়োজন। সমস্ত চিত্রগুলিকে পৃষ্ঠায় রেন্ডার করার আগে চূড়ান্ত ক্রিয়া হিসাবে চালানোর জন্য একটি ফিল্টার স্থাপন করে আমরা পিএইচপি ব্যবহার করে জাভাস্ক্রিপ্টের মাধ্যমে ব্যয়বহুল ডিওএম ম্যানিপুলেশনের প্রয়োজনীয়তা রোধ করে এর প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি অপসারণ করতে পারি।
কোড
- /**
- * প্রতিক্রিয়াশীল চিত্র ফাংশন
- */
- অ্যাড_ফিল্টার (’পোস্ট_থম্বনেল_এইচটিএমএল’, ‘অপসারণ_পরিচয়_পরিমাণ’, 10);
- add_filter (’চিত্র_দ্বিতীয়_ টু_শিক্ষক’, ‘অপসারণ_ থাম্বনেইল_আদর্শন’, 10);
- ফাংশন সরান_থম্বনেল_আদর্শন (t এইচটিএমএল)
- t এইচটিএমএল = পূর্ববর্তী স্থান (’/ (প্রস্থ) (
উপরের কোডটিতে আমরা অ্যাড_ফিল্টার ফাংশনটি ব্যবহার করে দুটি ফিল্টার যুক্ত করছি। প্রথম যুক্তি হ'ল যে ফিল্টারটি আমরা toুকতে চাই তা হ'ল এবং দ্বিতীয়টি ফিল্টার কল করার সময় আমরা যে ফাংশনটি চালাতে চাই তা নির্দিষ্ট করে।
আমাদের কোডে আমরা দুটি অস্পষ্ট ফাংশন হুক করেছি:
- post_thumbnail_html - এর সাথে পুনরুদ্ধার করা চিত্র post_thumbnail ()
- ইমেজ_সেন্ড_টি_এডিটর - চিত্রগুলি সম্পাদক এ যুক্ত করা হয়েছে
এরপরে আমরা ইমেজ ট্যাগগুলি থেকে প্রস্থ এবং উচ্চতা উভয়ই বৈশিষ্ট্যগুলি সরাতে নিয়মিত অভিব্যক্তি ব্যবহার করি। এখন যখন আমাদের চিত্রগুলি ব্রাউজারে প্রেরণ করা হয় তখন তারা মিস্টার মার্কোটি যেমন আমাদের বলেছিলেন, ঠিক তেমনি তারা পুরোপুরি ‘তরল’ হতে পারে।
একটি স্বীকারোক্তি
আমি ব্যবহার করার ধারণা ছিল বলে স্বীকার করতে হবে add_filter বৈশিষ্ট্যগুলি অপসারণ করতে আমার জীবনের জন্য আমি যা করতে পারি নি তা সঠিকভাবে ওয়ার্ডপ্রেস ফিল্টারগুলিতে প্রবেশ করতে পারে।
অনেক অনুসন্ধানের পরে অবশেষে আমি নাথানিয়েল টেইন্টরের লেখা ওয়ার্ডপ্রেস স্ট্যাক এক্সচেঞ্জের এই অত্যন্ত সহায়ক পোস্টটি পেয়েছিলাম যা আমার প্রয়োজন দুটি ফিল্টার সম্পর্কিত তথ্য সরবরাহ করেছিল।
গুহা
যতদূর আমি জানি এই পদ্ধতির একমাত্র বড় ড্র-ব্যাক হ'ল এটি আপনার সাইটের সমস্ত চিত্র থেকে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি সরিয়ে দেয় না। আমি এটিকে একটি সমস্যা বলে মনে করেছি, স্পষ্টতই গ্রাভাটার চিত্রগুলির সাথে ওয়ার্ডপ্রেস মন্তব্যগুলিতে ব্যবহার করে।
কারও কাছে যদি এই সমস্যার সমাধান হয় তবে দয়া করে কোনও মন্তব্য করুন যাতে আমরা সকলেই উপকৃত হতে পারি।
আমি আশা করি ওয়ার্ডপ্রেস ওয়েবসাইটগুলিতে "তরল চিত্র" প্রয়োগ করতে জাভাস্ক্রিপ্টের উপর নির্ভর করার বিকল্পটি কার্যকর হয়েছে এবং এটি প্রদর্শিত হয়েছে।
শব্দ: ডেভিড স্মিথ
ডেভ স্মিথ হ'ল যুক্তরাজ্যের সুন্দর শহর বাথের নিকটবর্তী ফ্রন্ট এন্ড ডিজাইনার। যখন তিনি নতুন এবং উত্তেজনাপূর্ণ ওয়েব প্রকল্পগুলিতে কাজ করছেন না তখন তাকে দেখা যেতে পারে বিগ ব্যান্ড জাজ গ্রুপ থেকে সিম্ফনি অর্কেস্ট্রা পর্যন্ত সমস্ত কিছুতে শিঙা বাজানো। আপনি টুইটারে ডেভের সাথে @get_dave হিসাবে ধরতে পারবেন।
