পারফেক্ট ওয়ার্ডপ্রেস থিম তৈরি করাঃ কিভাবে ভালো কোড করতে হয়

এই সিরিজের আগের পর্বে; আমরা ওয়ার্ডপ্রেস এর বিভিন্ন API নিয়ে কাজ করেছি যা আমাদের শেখার প্রয়োজন ছিল, একটি থিম অনুবাদযোগ্য করার গুরুত্ব সম্পর্কে কথা বলেছি (এর চেয়েও ভালো কিছু, তাদেরকে ইতিমধ্যে অন্যান্য ভাষায় অনুবাদ করে রিলিজ সম্পর্কে) এবং থিমগুলির লাইসেন্সিং কনসেপ্ট বোঝা এবং থিমে লাইসেন্স করা প্রোডাক্টগুলির ব্যবহার শিখেছি।

এই আর্টিকেল এ, আমরা কোডের উপর ফোকাস করতে যাচ্ছিঃ আমরা দেখবো কিভাবে ওয়ার্ডপ্রেস কোডিং স্ট্যান্ডার্ড মেনে কোড করতে হয়, কিভাবে যথাযথভাবে কমেন্ট ব্যবহার করতে হয় এবং কিভাবে ভ্যালিডেট ও থিম টেস্ট করতে হয়।

ওয়ার্ডপ্রেস কোডিং স্ট্যান্ডার্ড

হ্যাঁ, আমি জানি, কোড করার জন্য আপনার নিজের পছন্দসই স্টাইল আছেঃ আপনি একটি একক লাইনে একটি বড় ফাংশন কম্প্রেস করতে পছন্দ করেন, আপনি হোয়াইটস্পেস খুব একটা পছন্দ করেন না - আহ, আমি একসময় ঠিক এমনি ছিলাম।

কিন্ত যদি আপনি অন্যদের জন্য ডেভেলপ করতে যান এবং সোজাসুজিভাবে আপনার কোড সেল করতে চান, আপনাকে আপনার কোড বোধগম্য করে তুলতে হবে। এবং যদিও আপনার মনে হতে পারে যে আপনার কোড "যথেষ্ট স্বচ্ছ", কোডিং এর জন্য সার্বজনীন স্ট্যান্ডার্ড রয়েছে যা সবাইকে একই স্টাইলে কোড করতে সাহায্য করে,  এবং সকল গুরুতর থিম মার্কেটপ্লেস এবং ডাউনলোড সেন্টারগুলি (WordPress.org থেকে ThemeForest পর্যন্ত) আপনাকে কোড স্ট্যান্ডার্ড এর সাথে কোড করতে আদেশ করে।

ওয়ার্ডপ্রেস থিম ডেভেলপ করতে এখানে চারটি প্রধান প্রোগ্রামিং এবং মার্কাপ ল্যাংগুয়েজ প্রয়োজন হবেঃ HTML, CSS, JavaScript এবং অবশ্যই, PHP। চলুন প্রত্যেকটিকে দেখা যাকঃ

HTML স্ট্যান্ডার্ড

মান-অনুবর্তী HTML কোড লেখার জন্য অপেক্ষাকৃত সহজ নিয়ম আছেঃ

• আপনার কোড W3C এর মাধ্যমে ভ্যালিডেট করুন। সবসময়। আমরা পরবর্তীতে এটি দেখবো।
• self-closing এলিমেন্টগুলি নিয়ে সতর্ক থাকুনঃ আপনার এলিমেন্ট শেষ করতে হবে একটি স্পেস, একটি স্ল্যাশ এবং "গ্রেটার দেন" চিহ্ন দিয়ে।
• যখন এট্রিবিউট এর ভ্যালু টাইপ করবেন, তাদের সব ছোট হাতের অক্ষর ব্যবহার করে টাইপ করুন - যদি না এটা মানুষের জন্য হয়।
• সবসময় আপনার এট্রিবিউট ভ্যালু উদ্ধরণ চিহ্ন দিয়ে মোড়ান। সিঙ্গেল এবং ডাবল উদ্ধরণ চিহ্ন উভয়ই গ্রহণযোগ্য।
• ইনডেন্টেশন অবশ্যই লজিক্যাল এবং পাঠযোগ্য হতে হবে। PHP কোড HTML এর মধ্যে মিক্স হওয়ার ব্যতিক্রমী কিছু হওয়া উচিত নয়।

আরো তথ্যের জন্য মেক ওয়ার্ডপ্রেস এ ওয়ার্ডপ্রেস HTML স্ট্যান্ডার্ড পেইজ চেক করুন।

CSS স্ট্যান্ডার্ড

লিস্টটি একটু দীর্ঘ , কিন্তু আবারও, সঠিকভাবে CSS কোডিং এর জন্য সহজ নিয়ম রয়েছেঃ

• প্রোপার্টিজ ট্যাব দ্বারা ইন্ডেন্টেড হতে হবে।
• আপনি সিলেক্টরগুলি গ্রুপ করতে পারেন কিন্তু পাঠযোগ্যতার জন্য প্রতিটা সিলেক্টরের অবশ্যই তার নিজস্ব লাইন থাকতে হবে।
• আপনার class এবং ID সিলেক্টরগুলি ছোট হাতের অক্ষরে নামকরণ করুন এবং শব্দ আলাদা করতে হাইফেন ব্যবহার করতে ভুলবেন না।
• পাঠযোগ্য সিলেক্টর ব্যবহার করুন। .c6 একটি ভালো নাম নয়- এটির নাম দিন .column-sixth !
• ওভার কোয়ালিফাইং এর প্রয়োজন নেই। যেখানে আপনি শুধু .column ব্যবহার করতে পারেন সেখানে div.column ব্যবহারের কোন মানে নেই।
• প্রোপার্টিজ এবং তাদের ভ্যালুও ছোট হাতের অক্ষরে হতে হবে, ফন্ট এর নাম এবং ভেন্ডর-নির্দিষ্ট প্রোপার্টিজ ছাড়া।
• প্রোপার্টিজ এর জন্য ক্রম যেমন হতে হবে "display, positioning, box model, colors, typography এবং অন্যান্য"।
• আপনার ভেন্ডর প্রিফিক্সগুলি দীর্ঘতম (-webkit-) থেকে নুন্যতম ((no prefix) অর্ডার করা উচিত।
• মিডিয়া কোয়েরিগুলি আপনার স্টাইলশিটের শেষে রাখুন।
• CSS কমেন্ট করুন যেমনটি আপনি আপনার PHP তে করেছেন। এ সম্পর্কে আরো পরর্তীতে।

মেক ওয়ার্ডপ্রেস এ ওয়ার্ডপ্রেস CSS স্ট্যান্ডার্ড পেইজটি দেখুন আরো বিস্তারিত ব্যাখ্যার জন্য।

JavaScript স্ট্যান্ডার্ড

আজকাল অনেক ওয়ার্ডপ্রেস থিমের জন্য JavaScript অত্যন্ত গুরুত্বপূর্ণ হয়ে উঠছে, আমাদের এটির জন্যও স্ট্যান্ডার্ড এবং রুলের প্রয়োজনঃ

• বন্ধনী একই লাইনে ওপেন এবং ক্লোজ হতে পারবে না।
• যদি একটি স্ট্রিং এ উদ্ধরণ চিহ্ন থাকে, সিঙ্গেল উদ্ধরণ চিহ্নের বাইরে ডাবল উদ্ধরণ চিহ্ন প্রেফার করুণ।
• আপনি স্বাধীনভাবে যেখানে খুশি আপনার কোডে হোয়াইটস্পেস ব্যবহার করতে পারেন - তাইবলে, ব্ল্যাংক লাইনে হোয়াইটস্পেস ব্যবহার করবেন না যেন। এবং ভুলে যাবেন না যে আপনি পাঠযোগ্যতার জন্য হোয়াইটস্পেস ব্যবহার করছেন - মজা করার জন্য নয়।
• আপনার ফাংশনগুলির এবং ভেরিয়েবলগুলির নাম camelCase ব্যবহার করে দিন, not_with_underscores । কন্সট্রাকশন TitleCase এ হতে হবে।
• আপনি একাধিক ভেরিয়েবল একটি সিঙ্গেল লাইনে ডিক্লেয়ার করতে পারেন; কিন্তু আপনি যদি ভ্যালু নির্দিষ্ট করতে চান, আপনাকে পৃথক লাইনে করতে হবে।
• new Array() এবং new Object() এর নোটেশন হচ্ছে "no-no"। সমতুল্য শর্টহ্যান্ড ([] এবং {}) ব্যবহার করুন।
• কন্ডিশনাল এবং লুপ গুলি খুবই ডেলিকেটলি ব্যবহার করুন - এরা ভুল ব্যাখ্যা দিতে ওস্তাদ। braces এবং হোয়াইটস্পেস এর ব্যবহার এটির মূল চাবি।
• আপনি যদি jQuery ব্যবহার করতে চান; একটি বেনামী ফাংশন সংজ্ঞায়িত করুন, এবং অন্য কিছু করার পূর্বে jQuery আর্গুমেন্ট হিসেবে পাস করুন। নিশ্চিত হতে উদাহরণটি দেখুন।

মেক ওয়ার্ডপ্রেস এর ওয়ার্ডপ্রেস JavaScript স্ট্যান্ডার্ড পেইজে আরো বেশি তথ্য রয়েছে, পেইজটি বুকমার্ক করুন এবং ব্যবহার শুরু করুন।

PHP স্ট্যান্ডার্ড

এটি আরো কঠিন অংশ।  বিবেচনার জন্য এখানে অসংখ্য রুল রয়েছেঃ

• কনভেনশনগুলির নামকরণ 
• সিঙ্গেল এবং ডাবল উদ্ধরণ চিহ্ন
• হোয়াইটস্পেস এর ব্যবহার
• রেগুলার এক্সপ্রেশন
• "Yoda কন্ডিশনস"
• বিশেষ অতিথি তারকা  SQL এবং ডাটাবেজ কোয়েরিগুলির ফরম্যাটিং

আপনি যদি না জানেন তারা কি, তবে সম্ভবত আপনার সর্বোত্তম পথ হল ধীরে ধীরে শিখে নেয়া।

এখানে এটি শেখার জন্য দুইটি অসাধারণ রিসোর্স রয়েছেঃ

1. মেক ওয়ার্ডপ্রেস এ ওয়ার্ডপ্রেস PHP স্ট্যান্ডার্ডগুলি
2. Tom McFarlin এর "The WordPress Coding Standards" নামের Wptuts+ সিরিজ

আপনার কোড সঠিকভাবে কমেন্ট করা

আপনার থিম আপনি কিভাবে তৈরি করেছেন তা অন্য ডেভেলপারদের বুঝতে দেওয়ার জন্য, আপনাকে আপনার থিমের কোড স্বচ্ছ এবং পাঠযোগ্য করতে হবে - এবং এর জন্য আপনার কোডে কমেন্ট করা প্রয়োজন।

PHP এর সর্বোত্তম ব্যবহারের জন্য PHPDoc ব্যবহার করুন, যা phpDocumentor এর ডকুমেন্টেশন স্টাইল। এটি ব্যাপকভাবে ওয়ার্ডপ্রেস ডেভেলপারদের মধ্যে ব্যবহৃত এবং মেক ওয়ার্ডপ্রেস এর PHP ডকুমেন্টেশন স্ট্যান্ডার্ড পেইজ কতৃক সুপারিশকৃত। এটি আপনার PHP কোডের জন্য একটি পরিষ্কার ডকুমেন্টেশন স্টাইল প্রদান করে।

CSS এর জন্য, মেক ওয়ার্ডপ্রেস এর ওয়ার্ডপ্রেস CSS স্ট্যান্ডার্ড পেইজটি আপনাকে এটি PHPDoc এর মত করে করতে রেকমেন্ড করে, পাশাপাশি অন্য কিছু সাজেশন ও দিয়ে থাকে।

আপনার HTML এবং JavaScript কোডের জন্য, দেখা যাচ্ছে যে আপনার কোড কমেন্ট করার জন্য কোন আবশ্যক বা সুপারিশকৃত পদ্ধতি নেই, কিন্তু এর মানে এই না যে আপনাকে কিছু করতে হবে নাঃ আপনার কোড যতটা সম্ভব স্বচ্ছ রাখুন এবং যেখানে প্রয়োজন মনে হবে কমেন্টের মাধ্যমে কিছু ইনফরমেশন দিয়ে রাখুন।

থিম ভ্যালিডেটিং এবং টেস্টিং

আপনার মাথায় থাকা ওয়েবসাইট টির মতই আপনার থিম টি হয়ত সুনির্মিত, কিন্তু হয়ত, শত শত লোকজন (হয়ত হাজার ও হতে পারে) যারা আপনার থিম ব্যবহার করবে এবং এমন ওয়েবসাইট বানানোর চেষ্ঠা করবে যা হয়ত আপনার চিন্তার বাইরে। সেইসাথে, মার্কেটপ্লেস এবং থিম ডিরেক্টরিগুলির আপনার থিম একসাথে করার জন্য তাদের আবশ্যিক কিছু শর্ত রয়েছে।

এই জন্যই আপনার থিম টেস্ট এবং কোড ভ্যালিডেট করতে হবে। আমার এই জন্য তিনটি আইডিয়া আছেঃ

W3C ভ্যালিডেটর এর সাহায্যে আপনার HTML এবং CSS ভ্যালিডেট করা

প্রথমে আপনার যা করা প্রয়োজন তা হল আপনার কোড W3C এর ভ্যালিডেশন সার্ভিস এর মাধ্যমে ভ্যালিডেট করতে হবে। HTML মার্কাপ ভ্যালিডেটর এবং CSS ভ্যালিডেটর উভয় সার্ভিস ই ব্যবহার এবং ডেভেলপ হয়ে আসছে বছরের পর বছর ধরে এবং তারাই ব্যবহারযোগ্য সর্বোত্তম সার্ভিস।

নিচের দুইটি কাজ করার পরে, এই দুইটি সার্ভিস ব্যবহার করে কেবল আপনার ডেমো পেইজ চেক করুন নিশ্চিত হতে যে সেখানে কোন ত্রুটি বা সতর্কবার্তা নেই। 

থিম সংশোধনের জন্য "Developer" প্লাগইন ব্যবহার করা

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

ডেভেলপার ১৬ টি ভিন্ন প্লাগইন সাজেস্ট করে। যেখান থেকে কিছু আপনার ডেভেলপমেন্ট কার্যধারা অনেক সহজ করে দেয় (যেমন User Switching এবং Theme Test Drive), আর কিছু আপনার থিমকে ডিবাগ করতে সাহায্য করে (যেমন Log Deprecated Notices এবং Theme Check)।

আমি যেগুলি সবচেয়ে কার্যকর হিসেবে পেয়েছি তারা হল থিম চেকার, থিম টেস্ট ড্রাইভ এবং ডিবাগ বার কিন্তু ১৬টা প্লাগইন এর সবকটির ই অসাধারণ ফিচার রয়েছে। আমি সাজেস্ট করব আপনার থিমের ত্রুটি দূর করার জন্য টেস্ট করতে এদের সবগুলো ইন্সটল করুন।

টেস্ট ডাটা দিয়ে আপনার থিম টেস্ট করা

আপনি শুধুমাত্র থিমের কোড কমপ্লিট করেই বলতে পারেন না যে এটি হয়ে গেছে - আপনাকে এটি কিছু কন্টেন্ট ব্যবহার করে টেস্ট করতে হবে। আপনি নিজের কন্টেন্ট তৈরি করে নিতে পারেন কিন্তু আপনার কিছু "test data" দিয়ে টেস্ট এর ব্যাপারটা কনসিডার করতে হবেঃ

• ওয়ার্ডপ্রেস সেম্পল ডাটা ব্যবহার করুন।  স্যাম্পল ডাটা সর্বাধিক ব্যবহৃত কিছু ধরনের কন্টেন্ট ধারন করে এবং আপনি আপনার বিষয়বস্তু বিবেচনা করতে ভুলে গেলে এটি আপনার থিম এর ভুলত্রুটি লক্ষ্য করতে সাহায্য করে।
• আরো সম্যক টেস্ট ডাটা ব্যবহার করুন।  WPTest.io একটি ছোট ওয়েবসাইট যাতে সেম্পল ওয়ার্ডপ্রেস কন্টেন্ট এর মারাত্মক  কালেকশন আছে। আমি মজা করছি নাঃ মেনু আইটেমগুলি ১০-লেভেল ডীপ এবং অ্যামাজন ষ্টোর এমবেড করা, এটি আমার দেখা এ পর্যন্ত সবচাইতে স্বয়ংসম্পূর্ণ টেস্ট ডাটা। আমি কখনো এই সেম্পল কন্টেন্ট ব্যবহার করে থিম চেক করিনি কিন্তু আপনি যদি আপনার থিমকে এই ডাটার সাথে সঠিকভাবে চালাতে পারেন, তবে সম্ভবত অন্য কোন সিনারিওতে আপনার থিম ফ্যাকাসে দেখানো নিয়ে চিন্তিত হতে হবে না।

এই দুইটি পরীক্ষার একমাত্র খারাপ দিক হলো  থিম ডেভেলপমেন্ট করার সময় আপনি আপনার কন্টেন্ট শর্টকোড দিয়ে অথবা কোন নির্দিষ্ট ধরনের কন্টেন্ট যা আপনার মাথায় আছে তা দিয়ে পরীক্ষা করতে পারবেন না। আমি পরামর্শ দিব আপনি আপনার থিম অন্তত ওয়ার্ডপ্রেসের স্যাম্পল ড্যাটা দিয়ে পরীক্ষা করুণ, তারপর নিজের কন্টেন্ট তৈরি করুণ। মোটের উপর, যখন আপনি আপনার থিমের ডেমো ওয়েবসাইট বানাবেন তখন আপনার আসল কন্টেন্ট প্রয়োজন হবে।

শেষ কথা

এই আর্টিকেল এ; আমরা একটি মান বজায় রেখে সঠিকভাবে কোড করার এবং কমেন্ট করার প্রক্রিয়ার ভেতর দিয়ে গিয়েছি এবং এর পড়ে আমরা দেখেছি কিভাবে আমাদের কোড ভ্যালিডেট করতে হয় এবং আমাদের থিম টেস্ট করেছি। এই সিরিজের পরবর্তী পর্বে, আমরা কিছু বাজে অভ্যাসের দিকে তাকাব। 

সাথেই থাকুন এবং আর্টিকেলটি যদি আপনার পছন্দ হয় তবে, শেয়ার করতে ভুলবেন না যেন!