Twitter Bootstrap#v4.0 ও WP Mix দিয়ে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট

কেমন আছেন সবাই? আমি ভাল, আজ প্রায় এক যুগ পর(!) আপনাদের জন্যে আবার ওয়ার্ডপ্রেস নিয়ে লিখতে বসলাম।

এ কদিনে দুনিয়া অনেক এগিয়ে গেছে, আমাদের আরও অলস করে তোলার জন্যে আরও নতুন নতুন অনেক টুলস বেরিয়েছে আবার ডাইনোসরের মতন হারিয়ে ও গেছে,

এই পোস্টের আগের পোস্ট ছিল লারাভেল এলিক্সার দিয়ে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট কিভাবে করবেন তার টোটকা,
কিন্তু সে গল্প এখন বাসী হয়ে গেছে, webpack এর এই যুগে এখন গাল্প ( gulp ) কজনেই বা ব্যবহার করে বলুন?

এখন ট্রেন্ডের সাথে গা ভাসিয়ে webpack, es2015, es2017 ব্যবহার না করলে কি থ্রিল আসে? কাজে কামে একটু ভাব দেখানোর জন্যে হলেও তো এই গুলি ব্যবহার করা চাই তাইনা?

তো চলুন দেখি প্রতিদিনের ভাঙ্গা রেকর্ড বার বা না চালিয়ে নতুন করে হাত নোংরা করি 😀

আমরা সব্বাই জানি যে টুইটার বুটস্ট্রাপ ভার্সন ৪ চলে এসেছে, আজ আমরা দেখব যে কিভাবে Twitter Bootstrap#v4.0wp-mix দিয়ে সহজে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করবেন,

হ্যাঁ আমি জানি যে wp-mix কি তা জানার জন্যে আপনাদের মন আঁকুপাঁকু করছে, wp-mix হল laravel-mix এর ফর্ক যেখানে laravel-mix টাকে মডিফাই করে wordpress এ ব্যবহার করার মতন উপযোগী করে দরকারি চেঞ্জ করা হয়েছে, wp-mix কে আপনি laravel-mix এর যমজ সৎ ভাই 😛 ও মনে করতে পারেন. কথা অনেক হল চলুন এবার কোডে যাই,

underscores.me  থেকে Advanced Options এ ক্লিক করে _sassify! অপশনে টিক [√] দিয়ে আপনার থিম টি জেনারেট করে ডাউনলোড করে নিন।

  • এইবার ডাউনলোড করা ফাইল টি কোন ইন্সটলড ওয়ার্ডপ্রেস থিম ডাইরেক্টরি তে এক্সট্রাক্ট করুন, এবং wp-config.php ফাইলে define('WP_DEBUG', true); করে দিন।
  • assets, src, fonts, images নামে ৪ টা ডিরেক্টরি করুন
  • sass ডিরেক্টরিটাকে ড্রাগ করে src ডিরেক্টরি তে ড্রপ করে দিন।
  • src ডিরেক্টরি তে js নামে একটা সাব ডিরেক্টরি করুন, আমাদের লিখা .js ফাইল গুলি সব এই ডিরেক্টরিতে থাকবে 🙂

এবার nodejs ইন্সটল করে নিন, windows ভায়াগণ Recommended For Most Users ভার্সনটা ইন্সটল করুন।

এবার টার্মিনাল খুলে cd দিয়ে আপনার প্রজেক্টের ডাইরেক্টরিতে গিয়ে npm init -y লিখে এন্টার দিতে ভুলবেন না 😛

এইবার টার্মিনালে npm i wp-mix babel-preset-es2015 babel-plugin-transform-es2015-modules-strip -D লিখে এন্টার দিন। শেষের ২ টা প্যাকেজ টুইটার বুটস্ট্রাপ ব্যবহার করে  এজন্যে এই প্যাকেজ ২ টি এড করা।

ইন্সটলের ফাঁকে চা বিঁড়ি খাইয়া আসেন,

এরপর টার্মিনালে npm i [email protected] popper.js লিখে এন্টার দিন।

আমাদের দরকারি প্যাকেজ ইন্সটলেশন শেষ এখন কনফিগারেশন করার পালাঃ

package.json ফাইল টি খুলুন scripts এ এড করুনঃ

যেমন দেখাবেঃ

 

এইবার webpack.mix.js নামে একটা ফাইল করুন, এই ফাইলে আমরা আমাদের কি কি স্ক্রিপ্ট কম্পাইল করব, ইত্যাদি লিখব, ফাইলর শুরুতে এড করে নিনঃ

এইবার আসুন আমরা wp mix এর যে যে API গুলি ব্যবহার করব তা নিয়ে আলোচনা করিঃ

mix.autoload({}, true | false: default) আপনি কোন স্ক্রিপ্ট অন্য যেকোন স্ক্রিপ্ট এ import ছাড়া ব্যবহার করতে চাইলে এই autoload ফাংশনটা ব্যবহার করতে পারেন। টুইটার বুটস্ট্রাপ এর কাস্টমাইজ বান্ডেল করে ব্যবহার করতে আমরা এই ফাংশনটা ব্যবহার করব। Twitter Bootstrap কে কিভাবে webpack দিয়ে কাস্টমাইজ করা যায় এই ডকুমেন্টেশন দেখলেই বুঝবেন।

তাহলে এবার webpack.mix.js ফাইলে এই কোড খানা পেস্ট করুনঃ

এর পর এড করুন

.pot ফাইল জেনারেট করতে চাইলেঃ এড করুনঃ

পুরো webpack.mix.js ফাইলটা দেখতে হবে এমনঃ

src/js/bootstrap.js নামে একটা ফাইল করে ওখানে রাখুনঃ আপনার প্রজেক্টের জন্যে দরকারি স্ক্রিপ্টটাই আপনি ব্যবহার করতে পারেন

রুট ডাইরেক্টরির style.css ফাইলের শুধু মেনিফেস্ট কন্টেন্ট গুলি রেখে বাকী css গুলি রিমুভ করে দিনঃ যেমন

এর পরে src/sass/style.scss ফাইলের উপরে এড করুনঃ

এর পর লিখুনঃ

এবার wp_enqueue_scripts হুকে এড করা ফাংশনটা এভাবে সাজিয়ে নিনঃ

এইবার টার্মিনালে npm run dev লিখে এন্টার দিন 🙂

ওয়াচ মুডে ওয়েবপ্যাক রান হবে এবং আপনার js বা scss ফাইল চেঞ্জ হবার সাথে সাথে তা রি কম্পাইল হবে,

আপনি যদি চান যে প্রোডাকশন মোডে আপনার ফাইল গুলি কম্পাইল করতে তাহলে npm run build লিখে এন্টার দিন।

কোন সমস্যায় পরলে কমেন্ট করুন আর WP Mix নিয়ে আরও জানতে ডকটি দেখুন 🙂

One thought on “Twitter Bootstrap#v4.0 ও WP Mix দিয়ে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট”

Leave a Reply

Your email address will not be published. Required fields are marked *