ওয়ার্ডপ্রেস কমেন্ট ফর্ম কাস্টমাইজেশন

ওয়ার্ডপ্রেসের কমেন্ট ফর্মের ইনপুট ফিল্ডগুলি লগ আউট অবস্থায় ইমেজ-১ এর মত করে সাজানো থাকে। লগইন অবস্থায় শুধুমাত্র কমেন্ট ইনপুট ফিল্ডটি দেখা যায়। ডিজাইনের কিংবা ক্লাইন্টের চাহিদা অনুযায়ী ইনপুট ফিল্ডগুলির এই ডিফল্ট পজিশন পরিবর্তন করার প্রয়োজন হতে পারে এবং হয়েও থাকে। আমারও প্রয়োজন হলো ইনপুট ফিল্ডগুলির ডিফল্ট পজিশন পরিবর্তন করার। আর এজন্যই আজকের লিখা।

obiPlabon WordPress Comment Form Default View
ইমেজ-১ঃ ওয়ার্ডপ্রেস কমেন্ট ফর্ম ডিফল্ট ভিউ

ফিল্ড কাস্টমাইজেশন (Field Customization)

আমরা ইনপুট ফিল্ডগুলির ডিফল্ট পজিশন পরিবর্তন করে ইমেজ-২ এর মত করে সাজাবো। যেখানে কমেন্টের ইনপুট ফিল্ডটি সবার নিচে থাকবে। ওয়ার্ডপ্রেস ভার্সন ৪.৪ এ comment_form_fields নামে একটি ফিল্টার হুক যুক্ত করেছে, যার মাধ্যমে খুব সহজেই ফর্ম ফিল্ডগুলির পজিশন পরিবর্তন করা যায়। ফিল্টার হুকটি একটি মাত্র আর্গুমেন্ট (এসোসিয়টিভ এ্যারে) পাস করে। যেখানে ফিল্ডের নাম থাকে কী-তে এবং ফিল্ডের HTML থাকে ভ্যালুতে।

obiPlabon WordPress Comment Form Custom View
ইমেজ-২ঃ ওয়ার্ডপ্রেস কমেন্ট ফর্ম কাস্টম ভিউ

উল্লেখিত হুকের মাধ্যমে আমরা সহজেই নিচের কোড ব্যবহার করে কমেন্ট ইনপুট ফিল্ডেকে নীচের দিকে নিয়ে আসতে পারি।

— ধন্যবাদ 🙂

সিম্যান্টিক মার্কাপ কি, কেন, কিভাবে?

সিম্যান্টিক মার্কাপ (Semantic Markup)

সিম্যান্টিক মার্কাপকে সহজভাবে সংজ্ঞায়িত করলে, বলতে হয় অর্থপূর্ণ মার্কাপ অর্থাৎ যে মার্কাপের নির্দিষ্ট অর্থ আছে

যেমন, আমরা যদি HTML এ লিখি <span>What is Semantic Markup?</span> তাহলে এই মার্কাপ কিন্তু কোন অর্থ বহন করেনা কারণ এই মার্কাপ দেখে বোঝা যাচ্ছে না এটি আসলে কী! এটি হেডিং, নাকি প্যারাগ্রাফ, নাকি লিংক, নাকি অন্যকিছু? কিন্তু আমরা যদি লিখি <h1>What is Semantic Markup?</h1>। তাহলে এটি দেখেই কিন্তু আমরা বুঝতে পারি যে এটি হচ্ছে লেভেল ওয়ান হেডিং যা মূলত একটি পেজের প্রাইমারী হেডিং হিসেবে ব্যবহার হয়।

আবার আমরা কিন্তু চাইলে <span>What is Semantic Markup?</span> এই অর্থহীন মার্কাপকেও অর্থপূর্ণ করতে পারি ক্লাস সিলেক্টর ব্যবহার করে। যেমন <span class="heading-level-1">What is Semantic Markup?</span> এবং তখন যে কেউ এই কোড পড়লে বুঝতে পারবে যে এটি হচ্ছে লেভেল ওয়ান হেডিং এবং সাথে আমরা কিন্তু .heading-level-1 এর জন্য যথাযথ CSS স্টাইল লিখে এর ভিজুয়াল পার্থক্যটাও দূর করতে পারি। তাহলে এ থেকে আমরা একটি বিষয় বুঝতে পারছি যে সিম্যান্টিক মার্কাপের সাথে ভিজুয়াল আউটপুটের কোন সম্পর্ক নেই! কারণ ভিজুয়াল বিষয়টি নিয়ন্ত্রণ করে CSS। তাই আমরা চাইলে প্যারাগ্রাফ কে হেডিং, হেডিংকে লিস্ট এবং লিস্ট কে লিংক হিসেবে দেখাতে পারি। যেমনঃ আমরা যদি বুটস্ট্রাপের বাটন লক্ষ্য করি, তাহলে শুধু মাত্র দেখে কিন্তু বোঝার উপায় নেই কোনটি form এর বাটন, কোনটি button আর কোনটি লিংক (Anchor tag)।

মার্কাপের ব্যবহারকারী (Markup User)

আমরা যে HTML মার্কাপ লিখি তার সর্বশেষ ব্যবহারকারী হল মানুষ! আর মানুষ সেটা ব্যবহার করে ব্রাউজার, স্ক্রিন রিডার, ফিড রিডার, সার্চ ইঞ্জিন বট এসবের মাধ্যমে (আলোচনার সুবিধার জন্য সবগুলিকে একসাথে User Agent হিসেবে ডাকি)। সব মানুষ যেহেতু HTML পারেননা এবং পারলেও সেটা সহজবোধ্য নয় তাই User Agent মার্কাপকে মানুষের কাছে সহজবোধ্য করে উপস্থাপন করে, এবং একেক User Agent উপস্থাপনার কাজটা একেকভাবে করে। যেমন- স্ক্রিন রিডার পড়ে শোনায়, ব্রাউজার CSS এর মাধুরী মিশিয়ে উপস্থাপন করে, আর সার্চ বট মার্কাপ পড়ে কন্টেটকে একটা স্ট্রাকচার্ড সিস্টেমে সাজিয়ে রাখে, যেনো সার্চ ইঞ্জিনে গিয়ে সার্চ দেয়া মাত্রই সেটা সার্চারের কাছে চলে যায়।

সিম্যান্টিক মার্কাপের গুরুত্ব (Importance of Semantic Markup)

আমরা পূর্বেই জেনেছি ভিজুয়াল আউটপুটের সাথে সিম্যান্টিক মার্কাপের কোন সম্পর্ক নেই। তাহলে কার সাথে আছে? মোটামুটি বাকি সবার সাথেই! চলুন তাহলে জেনে নেই যেসব কারণে সিম্যান্টিক মার্কাপ লিখবঃ

  • (Search Engine Friendly) সার্চ ইঞ্জিন ফ্রেন্ডলিঃ SEO (Search Engine Optimization) টার্মের সাথে আমরা কমবেশি সবাই পরিচিত। আর সার্চ ইঞ্জিন ফ্রেন্ডলি মার্কাপ SEO -র জন্য ভীষণ সহায়ক। আমরা কিন্তু সার্চ ইঞ্জিনকে আরও স্ট্রাকচার্ড কন্টেন্ট দিতে পারি মাইক্রোডাটা, মাইক্রোফরম্যাট (Micro Format), স্কিমা (Schema) এসব ব্যবহার করে।
  • (Accessible) এ্যাক্সেসিবলঃ আমাদের মার্কাপ ব্যবহারকারী সকল মানুষ কিন্তু সমান নয়। কেউ হয়তো চোখে দেখেন না, আবার কেউ হয়তো অস্পষ্ট দেখেন। এধণের ব্যবহারকারীরা মূলত স্ক্রিনরিডার ব্যবহার করে থাকেন। আর স্ক্রিন রিডার সিম্যান্টিক মার্কাপকে সঠিকভাবে পড়তে পারে। আমরা কিন্তু কন্টেন্টকে আরও এ্যাক্সেসিবল করতে পারি WAI-ARIA অনুসরণ করে। আপনি WAI-ARIA লিখে গুগল করলে পর্যাপ্ত পরিমাণ রিসোর্স পাবেন এ বিষয়ে জানার জন্য।
  • (Maintainable Codebase) মেইন্টেনেবল কোডবেজঃ এই বিষয়টির সাথে মোটামুটি সবাই পরিচিত। যেহেতু সিম্যান্টিক মার্কাপ দেখে সহজেই বোঝা যায় এর উদ্দেশ্য কি, তাই এটি সহজেই মেইন্টেইন করা যায়। যার ফলে অনেক পুরনো কোডবেজে কিংবা টিমে কাজ করতে সুবিধা হয়।

সিম্যান্টিক মার্কাপের উদাহরণ (Example of Semantic Markup)

Sensible Code

টিমে কাজ করার জন্য এবং নিজের জন্যও সিম্যান্টিক মার্কাপ লেখার পাশাপাশি Sensible Markup / Sensible Code লেখাও জরুরী। Sensible দিয়ে বোঝানো হয় যে আমরা যা লিখছি তা যৌক্তিক কিনা। যেমন আমরা যে class বা id সিলেক্টর লিখছি তা যৌক্তিক কিনা। দেখা গেলো একটি বাটন লাল রঙয়ের হবে বিধায় আমরা ক্লাসের নাম দিলাম btn-red অথবা red-button। এটি কিন্তু Sensible হল না। আমাদের সবারই ধারনা আছে যে বাটন রেড হয় ডিলেট কিংবা এই জাতীয় বিষয় বুঝানোর জন্য। তাই নামটি হওয়া উচিৎ btn-delete / button-delete / delete-button এরকম। ক্লাসের নাম নির্বাচনের সময় দেখতে কি রকম হবে তা না ভেবে লজিক্যালি / ফাংশনালি কি করবে সেদিক থেকে চিন্তা করা উচিৎ

— ধন্যবাদ 🙂

Hope is a weapon, use it. Don’t get obsessed with it

Hope is a weapon, use it. Don’t get obsessed with it.

অসামাজিক মহাকবিতা – মার্চ ২০১৫

মৌনতার প্রাচীর পেরিয়ে গভীর নীরবতায়
মুমূর্ষ ভালোবাসা তুমি, মৃত পরিচয়
কাল রবেনা, জানিনা কী ভাবো আমায়!
– ১ মার্চ, ২০১৫

বাতাসের গুড়ো আমি
উড়ি ধুলোর সাথে
অনাদরে বসবাস
তাই চাঁদ নয়,
আলো আমার পাশে
– ২ মার্চ, ২০১৫

কিছু কথা হয়না বলা
কিছু কথা রয়না গোপন
কিছু স্বপ্ন আঁধারেও রঙিন
কিছু স্বপ্ন ভীষণ প্রবীণ
কিছু কিছু দূরেই সুন্দর
কিছু কিছু হতাশায় অমর
কিছু রাত্রি জোনাকি পূর্ণ
কিছু রাত্রি নিশ্চুপ স্তব্ধ
কিছু আশা পায় না ভাষা
কিছু আশা স্বপ্নে ঢাসা
কিছু আমি হারিয়ে যাই
কিছু আমি ঘুরে দাঁড়াই
– ৩ মার্চ, ২০১৫

এ শুধুই গলা ভাঙা চিৎতার
শুনবে না কোনো একাকী
পাড়িয়ে নানান পথের ধুলো
বিদ্ধস্ত, ক্ষত অবহেলিত
– ৮ মার্চ, ২০১৫

চাসনে বুঝি কথার কথা
সময়গুলো তাই ভীষণ বোকা
করলে একা, বুঝিনি সেটা
ছিলেনা, নাকি ছলনা?
– ১৪ মার্চ, ২০১৫

যে পথ আমায় চেনে না
সে পথের ধুলো আমার পায়ে
– ২২ মার্চ, ২০১৫

স্বপ্ন গেছে বাড়ি
ঘুমের সাথে আড়ি
দেখছি তোমায় স্মৃতির মাঝে
মায়ার আহাজারি
– ২৭ মার্চ, ২০১৫

হে দ্বৈত স্বত্তা
কোন দিকে তোমার মন
কোন দিকেই বা আত্মা
দিন রাতের প্রহর গুনি
আমি দাঁড়হীন নৌকা
ভাসবো না ডুবে যাবো
নিয়তিই পাক্কা, আর
আমার ইচ্ছেটা জাটকা
– ২৮ মার্চ, ২০১৫

Photo Credit: Matthew Henry

অসামাজিক মহাকবিতা – ফেব্রুয়ারী ২০১৫

অস্পৃশ্য অতিথি তুমি
কথা বলো ফিস ফিস
আঁধারেতে মুখ লুকাও
ঘুম তাড়াও হিশ হিশ
– ৩ ফেব্রুয়ারী, ২০১৫

জানু আড়ি, ফেবু আড়ি
টুইটার আমার ছাড়াছাড়ি
কন্যা পাইছে সোনার খনি
টেম্পলরানে তার বাস
……………
– ৭ ফেব্রুয়ারী, ২০১৫

বিবর্ণ নয় সুবর্ণ তুমি
তুমি গাণিতিক সরল
বুঝতে চেয়েছি সহ্রসবার
পাইনি খুঁজে সমাধান কি হবে!
আছো তুমি আদি থেকে অন্তে
…………………………(তারপর?)
– ১৫ ফেব্রুয়ারী, ২০১৫

—অপ্রাপ্ত অধিকার
জাগ্রত স্বপ্নে বৃথাই বিচরণ
নির্বোধ প্রতিক্ষা, নীরব অশ্রু ক্ষরণ
বুঝিনা সত্যি, বুঝিনা সত্য
নির্ঘুম চোখ, নেই আলস্য
কল্পনায় নয়, বাস্তবিক ভয়
কেন অসম, কেন বাসনা ক্ষয়?
– ১৬ ফেব্রুয়ারী, ২০১৫

নীলচে ভালোবাসায় সবুজ আমি
দূষিত মায়ায় হৃদয় কালো
কখনো চাইনি এমন
ছিলাম যেমন, তেমনি ভালো
– ১৯ ফেব্রুয়ারী, ২০১৫

ভাবছো একা ভাবনা গুলো
বসে নইতো আমিও একা
আলোর মেলায় আঁধার ঘুড়ি
উড়াই আমি নইতো একা
– ২০ ফেব্রুয়ারী, ২০১৫

বেসেছি নাহয় কিছুটা
প্রতিদান দিলে এতটা!
সেটা কি ছিল বলনা?
যেখানে পাইনি ছলনা
– ২০ ফেব্রুয়ারী, ২০১৫

বাবা তোমার কি ভাব!
নারী তুমি, নাই রঙের অভাব
তোমার স্ব ভাবের অভাবে,
স্বভাবে বিস্বর্গীয় প্রভাব
– ২১ ফেব্রুয়ারী, ২০১৫

সংস্কৃত ভালোবাসা তুমি
ঘুরে ফিরে সেই কাঁদালে
বিবর্তিত ছলনা তুমি
ঘুরে ফিরে সেই ভোলালে
মায়াবী চোরাবালি তুমি
নিঃশব্দে মোরে ডোবালে
– ২১ ফেব্রুয়ারী, ২০১৫

সবশেষে শূণ্য, মায়া তবে কার?
কেন তবে বাঁধনে?
যখন সবাই সিঙ্গুলার
– ২৬ ফেব্রুয়ারী, ২০১৫

ক্লান্তি আমায় মুক্তি দাও
দেখতে চাইনা আর দুঃস্বপ্ন
– ২৭ ফেব্রুয়ারী, ২০১৫

Photo Credit: Matthew Henry