সিলেক্টেবল কাস্টম ইমেজ সাইজ

আজকে আমরা একটি দারুন জিনিস শিখব। আমিও অবশ্য সদ্যই শিখেছি, গতরাতের (২৫ মে, ২০১৮) পূর্বে জানতাম না 😀 সহজ এই বিষয়টি জেনে এবং শিখে বেশ মজা পেয়েছি তাই ভাবলাম লিখে ফেলি। লেখার শিরোনামটা দেখে হয়তো অনেক কঠিন মনে হচ্ছে কিন্তু বিশ্বাস করুন বিষয়টা মোটেও কঠিন নয় ভীষণ সহজ।

আমরা সবাই কাস্টম ইমেজ সাইজ রেজিস্টার করতে পারি, তাইনা? ওয়ার্ডপ্রেস ডিফল্টভাবে ৩-৪ টি ইমেজ সাইজ রেজিস্টার করে রাখে যেগুলি ওয়ার্ডপ্রেস ইন্টারনালি ব্যবহার করে এবং প্রয়োজনে আমরাও ইমেজ সাইজের নাম দিয়ে আমাদের প্রজেক্টে ব্যবহার করতে পারি। কিন্তু বেশিরভাগ সময়ই ৩-৪ সাইজ দিয়ে কাজ চালানো সম্ভব হয়না, তখন আমরা add_image_size() ফাংশনটি দিয়ে কাস্টম ইমেজ সাইজ রেজিস্টার করি।

আমরা যদি ওয়ার্ডপ্রেসের WYSIWYG (What You See Is What You Get) এডিটর থেকে কনটেন্টে ইমেজ যুক্ত করার জন্য Add Media বাটনে ক্লিক করে ইমেজ যুক্ত করতে যাই তখন ওয়ার্ডপ্রেস আমাদের ইমেজের সাইজ সিলেক্ট করার অপশন দেয়। আর এই অপশন লিস্টে ডিফল্টভাবে শুধুমাত্র ডিফল্ট রেজিস্টার করা ইমেজ সাইজগুলিই থাকে। আজকে আমরা যা শিখবো তা হলো এই অপশন লিস্টে আমাদের কাস্টম রেজিস্টার করা ইমেজের সাইজ এনলিস্ট করা বা যুক্ত করা।

ওয়ার্ডপ্রেস মিডিয়া প্যানেল

ইমেজ সাইজ সিলেক্টেবল করা

যেহুতু আমাদের ডিফল্ট সাইজগুলির সাথে আমাদের কাস্টম রেজিস্টার্ড সাইজ যুক্ত করতে হবে। সো ধরেই নেয়া যায় যে এটা একটি ফিল্টার হুক দিয়েই করতে হবে, আর ফিল্টার হুকটি হচ্ছে image_size_names_choose। এই হুকটি শুধুমাত্র ইমেজের সাইজগুলিই প্যারামেটার হিসেবে পাস করে এ্যাসোশিয়েটিভ এ্যারে হিসেবে। কী হিসেবে থাকে ইমেজের সাইজের নাম এবং ভ্যালুতে থাকে একটি হিউম্যান রিডেবল নাম।

ওয়ার্ডপ্রেসের ডিফল্ট টুয়েন্টিসেভনটিন থিমটিতে 'twentyseventeen-thumbnail-avatar' নামে একটি কাস্টম ইমেজ সাইজ আছে আমরা এটিকে সিলেক্টেবল করব। নিচের কোডটি কপি করে টুয়েন্টিসেভনটিন থিমের functions.php তে পেস্ট করুন।

এখন পোস্ট কিংবা পেজের WYSIWYG এডিটর থেকে ইমেজ যুক্ত করার সময় সাইজ ড্রপডাউনটি চেক করুন। দেখুন আমাদের কাস্টম ইমেজ সাইজটি লিস্টে দেখাচ্ছে।

অবশ্যই নিশ্চিত করুন আপনার টুয়েন্টিসেভনটিন থিমটি এক্টিভ অবস্থায় আছে কিনা।

— ধন্যবাদ 🙂

পোস্টের হায়ারারকিক্যাল ডেপথ কন্ট্রোল

আজকে আমরা দারুন একটি কাজ করবো। আর দারুন কাজটি হবে আমাদের কাল্পনিক ক্লায়েন্ট মিঃ খুতখুত এর জন্য। মিঃ খুতখুত বাংলাদেশ নিয়ে একটি তথ্য বহুল সাইট বানাতে চাচ্ছেন। যেখানে বাংলাদেশের ৬৪ টি জেলার বিস্তারিত বর্ণনা থাকবে। প্রতিটি জেলার ইতিহাস, ঐতিহ্য, দূর্লভ এবং চমৎকার দৃষ্টি নন্দন সব ছবি নিয়ে গ্যালারী, ভিডিও আর্কাইভ এসব থাকবে। আবার প্রতিটি বিভাগ (বর্তমানে ৮ টি) আলাদা করে গুরুত্ব পাবে। প্রতিটি বিভাগে গেলে সে বিভাগের আওতাভুক্ত জেলা গুলি দেখা যাবে এবং সেখানে থেকে আবার প্রতিটি জেলাতে ক্লিক করে সেসব জেলার ডিটেইলস দেখা করা যাবে। আবার মিঃ খুতখুত চাচ্ছেন জেলাগুলি যেনো হায়ারারকিক্যাল হয় মানে কোন বিভাগে কোন জেলার বা কোন জেলা কোন বিভাগের অন্তর্গত সেই রিলেশনটা যেনো মেনে চলা হয়।

এনালাইসিস এবং ডিসিশন

খুবই সিম্পল রিকোয়ারমেন্ট, তাইনা? আমরা জানি পেজ একটি হায়ারারকিক্যাল পোস্টটাইপ, যেখানে একটি পেজকে আরেকটি পেজের প্যারেন্ট হিসেবে এ্যাসাইন করা যায়। সো, আমরা খুব সহজেই পেজ ব্যবহার করে হায়ারারকির কাজটি করে ফেলতে পারি। কিন্তু আমরা পেজ ব্যবহার করবো না! কারণ এ মিঃ খুতখুতের চাহিদা পূরণের জন্য আমাদের ডেডিকেটেড একটি পোস্টটাইপ দরকার। তাই আমরা পেজের মত (হায়ারারকিক্যাল) একটি কাস্টম পোস্টটাইপ রেজিস্টার করে নিব যার নাম হবে district

নোট: আমরা এখানে খুব সাধারণভাবে রিকোয়ারমেন্ট এনালাইসিস করেছি এবং একটি সিদ্ধান্তে পৌঁছেছি শুধুমাত্র মূল বিষয়টাকে সহজভাবে উপস্থাপনের জন্য।

District পোস্টটাইপ রেজিস্ট্রেশন

নিচের কোডটুকু কপি করে আমরা থিমের functions.php তে পেস্ট করি এবং এ্যাডমিন প্যানেলে গিয়ে রিফ্রেশ করি। চমৎকার, আমরা district কাস্টম পোস্টটাইপ রেজিস্টার করে ফেলেছি! 😀

মিঃ খুতখুত দেখলে খবর আছে!

এরপর আমরা কিছু District এ্যাড করবো। আপনি চাইলে নিচের গুলি এ্যাড করতে পারেন ডামি হিসেবে।

Rangpur
– Dinajpur
Rajshahi
– Bogora
Dhaka
– Narayongonj

এট্রিবিউট মেটাবক্স
কুইক এডিট প্যানেল

একি, আমরা যখন প্যারেন্ট হিসেবে ডিভিশন এ্যাসাইন করছি তখন অন্য জেলা গুলি লিস্টে চলে আসছে ক্যানো? ড্রপডাউন বোঝেনা ক্যানো যে আমরা শুধু ডিভিশন গুলি দেখতে চাচ্ছি, কোন জেলা নয়? আসলে এখানে ড্রপডাউনের কোন অপরাধ নেই। ড্রপডাউনকে এভাবেই ইন্সট্রাকশন দেয়া আছে। কিন্তু আমরা এই ইন্সট্রাকশন পরিবর্তন করতে পারি। আমরা যা চাই, যেভাবে চাই তা ড্রপডাউনকে বলে দিতে পারি, দারুন না? মিঃ খুতখুত দেখার আগেই আমাদের এটি সমাধান করে ফেলতে হবে নয়তো খবর আছে! চলুন তাহলে সমাধান করে ফেলি 😛

সমাধান

আমাদের খুব বেশি কিছু করতে হবেনা, শুধুমাত্র দুইটি ফিল্টার হুকের আর্গুমেন্ট পরিবর্তন করেই কাজটি করতে পারি। এট্রিবিউট মেটাবক্সের জন্য page_attributes_dropdown_pages_args এবং কুইক এডিট প্যানেলের জন্য quick_edit_dropdown_pages_args। এই ফিল্টার হুক দুটি কি কি আর্গুমেন্ট নিয়ে কাজ করে জানতে হলে আমাদের একটু ওয়ার্ডপ্রেসের কোর থেকে ঘুরে আসতে হবে।

ওয়ার্ডপ্রেস কোর দেখে আমরা জানতে পারলাম যে wp_dropdown_pages() ফাংশনটি ব্যবহার করে ড্রপডাউনটি বানানো হচ্ছে। এই ফাংশনটিতে depth নামের একটি আর্গুমেন্ট পাস করা হয় যা দিয়ে মূলত হায়ারারকির লেভেল কন্ট্রোল করা হয়। ডকুমেন্টেশন দেখে আমরা নিশ্চিত বলতে পারি যে আমরা যদি depth এর ভ্যালু 1 সেট করে দেই তাহলে আমরা আমাদের সমস্যাটি সমাধান হয়ে যাবে। আমরা শুধুমাত্র টপলেভেল ডিসট্রিক্ট বা ডিভিশন গুলি দেখতে পারবো।

চলুন নিচের কোডটুকু কপি করে আমাদের functions.php তে পেস্ট করি এবং ডিসট্রিক্টের লিস্ট পেজ অথবা এডিট পেজ রিফ্রেশ করি।

ফিল্টার হুক দুটি, post_type নামের একটি আর্গুমেন্ট পাস করে যার মাধ্যমে আমাদের নিশ্চিত করতে হবে যে আমরা শুধুমাত্র district কাস্টম পোস্টটাইপের হায়ারারকি লেভেল কন্ট্রোল করছি, নয়তো খবর আছে 😛 । চলুন এবার দেখে আসি আমাদের ফাইনাল রেজাল্ট কি হলো –

কুইক এডিট প্যানেল

দারুন আমরা সমস্যা সমাধান করে ফেলেছি 😎

 

মূল্যবান সময় ব্যয় করে মিঃ খুতখুতের রিকোয়ারমেন্ট পূরণের জন্য আপনাকে ধন্যবাদ 😀