থিম কাস্টমাইজেশন: যে ভুলগুলো এক আপডেটেই সব মুছে দেয়

রাত সাড়ে এগারোটায় ক্লায়েন্টের ফোন — “ভাই, হেডারে আমাদের ফোন নম্বরের বদলে থিমের ডিফল্ট লেখা চলে এসেছে, ফুটারের ঠিকানাটাও নেই।” খোঁজ নিয়ে জানা গেল, সকালে ড্যাশবোর্ডে থিম আপডেটের নোটিফিকেশন এসেছিল আর উনি ভালো মনে করেই Update Now চেপে দিয়েছেন। ছয় মাসের কাজ — হেডার লেআউট, ব্র্যান্ড কালার, কাস্টম ফুটার — তিরিশ সেকেন্ডে মুছে গেছে।

এই গল্পটা আমরা বছরে অন্তত বিশবার শুনি, আর কারণ প্রায় প্রতিবারই এক। থিম কাস্টমাইজেশন এমন জায়গায় লেখা হয়েছিল যে জায়গাটার আসল মালিক থিম-ডেভেলপার, আপনি নন। আপডেট এলে থিম তার নিজের ফাইল নিজের মতো করে বসিয়ে দেয় — সেখানে আপনার কোড নিছক অতিথি। দোষটা WordPress-এর নয়; দোষটা হলো “কোন পরিবর্তন আসলে কোথায় জমা হয়” — এই ম্যাপটা কখনো শেখা হয়নি।

আপনার পরিবর্তন আসলে জমা হচ্ছে কোথায়

একটা বাটনের রঙ বদলাতে WordPress আপনাকে অন্তত ছয়টা দরজা খুলে দেয় — থিমের PHP ও CSS ফাইল, functions.php, Customizer, থিমের নিজস্ব অপশন প্যানেল, পেজ বিল্ডারের সেভ করা ডেটা, আর Additional CSS কিংবা আলাদা কোনো প্লাগিন। এর মধ্যে প্রথম দুটো থাকে wp-content/themes ফোল্ডারের ভেতরে, তাই আপডেটে ওভাররাইট হয়ে যায়। বাকিগুলো জমা হয় ডেটাবেসে — wp_options আর wp_postmeta টেবিলে — তাই আপডেটেও টিকে যায়। নিচের প্রতিটা ভুলের গোড়ায় আছে এই তালিকাটা মাথায় না রাখা।

থিমের ফাইলে সরাসরি হাত: সবচেয়ে দামি অভ্যাস

Appearance → Theme File Editor খুলে header.php-তে ফোন নম্বর বসিয়ে দেওয়া, কিংবা style.css-এর নিচে ব্র্যান্ড কালার লিখে দেওয়া — কাজটা দুই মিনিটে হয়ে যায় বলেই এত লোভনীয়। কিন্তু থিম-ডেভেলপার যখন পরের ভার্সনে একটা সিকিউরিটি প্যাচ ছাড়েন, WordPress পুরো ফোল্ডারটা মুছে নতুন করে বসায়। আপনার দুই মিনিটের কাজ তখন দুই দিনের রিকভারিতে পরিণত হয়।

সমাধানটা পুরনো এবং একঘেয়ে, কিন্তু কাজের: চাইল্ড থিম। দুটো ফাইলেই হয়ে যায় — style.css, যার হেডার কমেন্টে Template: প্যারেন্ট-ফোল্ডারের-নাম লেখা থাকবে, আর functions.php, যেখানে wp_enqueue_scripts হুক দিয়ে প্যারেন্টের স্টাইল লোড করাবেন। পাঁচ মিনিটের কাজ, আর এরপর প্যারেন্ট থিম যতবার খুশি আপডেট হোক, আপনার ফাইল অক্ষত থাকবে।

একটা বাজে অভ্যাস প্রায়ই চোখে পড়ে — চাইল্ড থিম বানানো হয়েছে, অথচ কাস্টম কোড লেখা হয়েছে প্যারেন্টের ফাইলেই। চাইল্ড থিম শুধু নামে থাকলে কোনো লাভ নেই। আপডেটের আগে wp-content/themes/parent ফোল্ডারটা থিমের তাজা কপির সঙ্গে মিলিয়ে দেখুন, কোনো ফাইল বদলানো আছে কি না।

ব্লক থিমে নিয়ম বদলে গেছে, টিউটোরিয়াল বদলায়নি

২০২৬-এ এসে বড় বিভ্রান্তিটা এখানেই — Twenty Twenty-Five ধরনের ব্লক থিমে চাইল্ড থিমের দরকার সাধারণত পড়েই না। Site Editor-এ আপনি যা বদলান, তা থিম ফোল্ডারে যায় না; যায় ডেটাবেসে, wp_global_styles নামের একটা পোস্টে। ফলে আপডেটে কিছু হারায় না। উল্টো দিকে, ব্লক থিমে অকারণে চাইল্ড থিম বানিয়ে theme.json কপি করে ফেললে প্যারেন্টের নতুন ফিচারগুলো আর আপনার কাছে পৌঁছায় না। অর্থাৎ পুরনো অভ্যাস এখানে উল্টো ক্ষতি করে।

চেক করার সহজ উপায়: Appearance মেনুতে “Editor” অপশনটা আছে কি না দেখুন। থাকলে আপনার থিম ব্লক-ভিত্তিক; না থাকলে ক্লাসিক। এই এক লাইনের পরীক্ষা আপনাকে ভুল টিউটোরিয়াল ফলো করার অনেক ঘণ্টা থেকে বাঁচাবে।

যখন Additional CSS একটা ল্যান্ডফিল হয়ে যায়

একটা বাস্তব উদাহরণ দিই। চট্টগ্রামের একটা ফার্নিচার শপের সাইট আমাদের কাছে এসেছিল; ক্লায়েন্টের চাওয়া ছিল সামান্য — “কিনুন” বাটনটা সবুজ করা। থিম অপশনে গিয়ে রঙ বদলালাম, কিছুই হলো না। Customizer-এ বদলালাম, তাতেও না। শেষে Additional CSS বক্সে ৬৪০ লাইন CSS পাওয়া গেল, যার প্রায় প্রতিটা রুলের শেষে !important বসানো। বাটনের রঙ ওখানেই হার্ডকোড করা ছিল — ২০২২ সালে কেউ একজন বসিয়ে গিয়েছিলেন, কোনো কমেন্ট ছাড়াই।

!important দিয়ে যুদ্ধ জেতা যায়, কিন্তু একবারই। পরের বার মোবাইলে আলাদা রঙ লাগবে, তখন আরেকটা !important লাগবে; তার পরের বার আরও নির্দিষ্ট সিলেক্টর। এভাবেই স্টাইলশিটটা এমন এক জঞ্জালে পরিণত হয় যেখানে কেউ আর কিছু বদলাতে সাহস পায় না। নিয়মটা সহজ — আগে থিমের নিজস্ব অপশন খুঁজুন, না পেলে গ্লোবাল স্টাইল, তারও পরে CSS। আর CSS লিখলে ব্রাউজারের Inspect দিয়ে আসল সিলেক্টরটা বের করে লিখুন; অনুমান করে !important-এর আশ্রয় নেবেন না।

এক জিনিস তিন জায়গায় সেট করা

Elementor বা Bricks ব্যবহার করলে এই ফাঁদটা খুব চেনা লাগবে। প্রাইমারি কালার সেট করা আছে থিম অপশনে, আবার বিল্ডারের Global Colors-এ, আবার Additional CSS-এ। শেষ পর্যন্ত কোনটা জিতবে সেটা নির্ভর করে কোন স্টাইলশিট কখন লোড হচ্ছে তার উপর। ক্লায়েন্ট থিম অপশনে গিয়ে রঙ বদলান, সাইটে কিছুই হয় না, তারপর আপনাকে ফোন দেন। প্রতিটা ভিজ্যুয়াল সিদ্ধান্তের একটাই মালিক ঠিক করুন — এবং সেটা কোথাও লিখে রাখুন। এই একটামাত্র অভ্যাস ভবিষ্যতের অর্ধেক ঝামেলা কমিয়ে দেয়।

functions.php-কে স্নিপেট গোরস্তান বানাবেন না

ব্লগ থেকে কপি করা “Disable Gutenberg”, “Remove WooCommerce styles”, “Add SVG upload support” — এরকম চল্লিশটা স্নিপেট জমে functions.php তিনশো লাইনের একটা অচেনা প্রাণী হয়ে ওঠে। একটা সেমিকোলন ভুল হলেই সাদা স্ক্রিন, আর তখন ড্যাশবোর্ডেও ঢোকা যায় না। এই কোডগুলোর সঠিক ঠিকানা হলো wp-content/mu-plugins ফোল্ডারে আপনার নিজের একটা ছোট প্লাগিন ফাইল, অথবা Code Snippets প্লাগিন — যেখানে একটা স্নিপেট বন্ধ করলেই সাইট ফিরে আসে।

আর কোড এডিট করার আগে নিশ্চিত হোন, cPanel File Manager বা FTP-তে আপনার ঢোকার ব্যবস্থা আছে এবং সেটা সত্যিই কাজ করে। সাদা স্ক্রিন দেখার পর পাসওয়ার্ড খোঁজা শুরু করলে বিকেলটা এমনিতেই নষ্ট।

ডেমো ইমপোর্ট যেখানে ফাঁদ হয়ে দাঁড়ায়

ThemeForest থেকে কেনা থিমের ডেমো ইমপোর্ট করলে ৪০টা পেজ, তিনশো ডামি ইমেজ আর ছয়টা বান্ডেল প্লাগিন একসঙ্গে ঢুকে পড়ে। বেশিরভাগ ফ্রিল্যান্সার সেই ডেমোর উপরেই সাইট দাঁড় করান — যা লাগবে না, সেটা কখনো মোছেন না। ফলে ডেটাবেস ফুলে ওঠে, আর পেজের কনটেন্ট আটকে যায় বিল্ডারের শর্টকোডে। পরে থিম বদলাতে গেলে পেজে দেখা যায় কাঁচা [vc_row] কিংবা আধা-রেন্ডার হওয়া মার্কআপ।

মনে রাখার মতো একটা লাইন: কনটেন্ট থাকবে কনটেন্টে, ডিজাইন থাকবে থিমে। প্রোডাক্টের বর্ণনা, দাম, ব্লগ পোস্ট — এগুলো যদি বিল্ডারের JSON-এ বন্দি হয়ে যায়, তাহলে আপনি আসলে থিম কেনেননি, একটা খাঁচা কিনেছেন।

কাস্টমাইজেশনের ওজন আছে, দামও আছে

প্রতিটা কাস্টমাইজেশনের একটা পারফরম্যান্স খরচ আছে। Google Fonts থেকে পাঁচটা ওয়েট লোড করলে ২৫০–৩০০KB যোগ হয়। একটা স্লাইডার প্লাগিন সব পেজে ৪০০KB JavaScript ঢেলে দেয়। বাংলাদেশে বেশিরভাগ ভিজিটর আসেন মোবাইল ডেটায়, প্রায়ই ফেসবুকের ইন-অ্যাপ ব্রাউজার থেকে। ৯০০KB-র হোমপেজ যখন কাস্টমাইজেশনের চাপে ৩.২MB হয়ে যায়, তখন আপনার সুন্দর ডিজাইনটা আর কেউ দেখতেই পায় না — তার আগেই ট্যাব বন্ধ হয়ে যায়।

ওজন কমানোর তিনটা সহজ উপায় — ফন্ট লোকালি হোস্ট করুন এবং সর্বোচ্চ দুটো ওয়েট রাখুন; বিল্ডার বা স্লাইডারের অ্যাসেট শুধু যে পেজে দরকার সেখানেই লোড করুন (Perfmatters বা Asset CleanUp দিয়ে সহজেই হয়); আর প্রতিটা বড় পরিবর্তনের পর PageSpeed Insights-এ মোবাইল স্কোরটা একবার দেখে নিন, LCP আড়াই সেকেন্ডের নিচে রাখার চেষ্টা করুন।

লাইভ সাইটে পরীক্ষা মানে রোগীর সামনে অস্ত্রোপচার

দেশি অনেক হোস্টিং প্রোভাইডারের cPanel-এ WordPress Toolkit থাকে, যেখানে এক ক্লিকে স্টেজিং কপি বানানো যায় — বাড়তি খরচ শূন্য। না থাকলে LocalWP দিয়ে সাইটটা নিজের ল্যাপটপে নামিয়ে নিন, সেটাও ফ্রি। থিম আপডেট, বিল্ডার আপডেট, নতুন CSS — সব আগে ওখানে চালান। লাইভ সাইট আপনার পরীক্ষাগার নয়, ক্লায়েন্টের দোকান।

গুছিয়ে নেওয়ার ধাপগুলো

• ব্যাকআপ নিন — ফাইল আর ডেটাবেস, দুটোই। UpdraftPlus-এর ফ্রি ভার্সন বা হোস্টিংয়ের snapshot, যেটা হাতের কাছে আছে।
• একটা স্টেজিং কপি বানান, এবং পরের সব কাজ ওখানেই করুন।
• অডিট করুন: প্যারেন্ট থিমের ফোল্ডার তাজা কপির সঙ্গে মিলিয়ে দেখুন কোন ফাইল বদলানো, Additional CSS কত লাইন, functions.php-তে কী কী স্নিপেট বসানো আছে।
• চাইল্ড থিম (ক্লাসিক থিম হলে) নাকি Global Styles (ব্লক থিম হলে) — আপনার থিম অনুযায়ী একটা পথ বেছে নিন, দুটোই একসঙ্গে নয়।
• ছড়িয়ে থাকা CSS এক জায়গায় আনুন, ডুপ্লিকেট রুল মুছুন, আর !important গুলো একটা একটা করে সরিয়ে দেখুন কোনটা সত্যিই দরকার ছিল।
• functions.php-র স্নিপেটগুলো mu-plugin বা Code Snippets-এ সরিয়ে নিন।
• স্টেজিংয়ে থিম আপডেট চালান, প্রতিটা টেমপ্লেট চোখ বুলিয়ে দেখুন, তারপর লাইভে ছাড়ুন।

হ্যান্ডওভারের সময় ক্লায়েন্টকে এক পাতার একটা ডকুমেন্ট দিন — কোন রঙ কোথায় বদলাতে হয়, লোগো কোথায়, ফোন নম্বর কোথায়, আর কোন বোতামটা কখনো চাপা যাবে না। এই এক পাতাই আপনার রাত সাড়ে এগারোটার ফোনকলগুলো বন্ধ করে দেবে।

সচরাচর জিজ্ঞাসা

চাইল্ড থিম কি সবসময় লাগবে? না। ক্লাসিক থিমে যদি টেমপ্লেট ফাইল বদলাতে হয় বা PHP হুক লিখতে হয়, তবেই লাগবে। শুধু রঙ, ফন্ট আর কিছু CSS বদলালে থিম অপশন আর Additional CSS-ই যথেষ্ট। ব্লক থিমে সাধারণত লাগেই না — Site Editor আর Global Styles দিয়েই কাজ চলে যায়।

থিম আপডেট না দিলে কি নিরাপদ থাকব? ঠিক উল্টো। থিমের আপডেটে বেশিরভাগ সময় সিকিউরিটি ফিক্স থাকে; পুরনো ভার্সনে বসে থাকা মানে জানা দুর্বলতা নিয়েই বসে থাকা। আপডেট বন্ধ না করে স্টেজিংয়ে টেস্ট করার অভ্যাস গড়ুন — সময় লাগে দশ মিনিট।

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

পুরনো সাইট, কে কোড লিখেছে জানি না — শুরু করব কোথা থেকে? ব্যাকআপ, তারপর স্টেজিং, তারপর অডিট। Query Monitor প্লাগিন দিয়ে দেখুন কোন হুক কোথা থেকে আসছে, আর প্যারেন্ট থিমের ফোল্ডারটা তাজা কপির সঙ্গে diff করুন। তিন ঘণ্টার অডিট তিন দিনের অনুমান-খেলা বাঁচিয়ে দেয়।

থিম কাস্টমাইজেশন হাতের বাইরে চলে গেছে, নাকি নতুন করে সবটা গুছিয়ে নিতে চান? Stack Alix-এ আমরা প্রতিদিন এই কাজটাই করি — WordPress অডিট, চাইল্ড থিম সেটআপ, কিংবা পরিষ্কার একটা টেমপ্লেট থেকে নতুন শুরু। কী দরকার সেটা বলুন, বাকিটা আমরা দেখছি।