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 নিয়ে আরও জানতে ডকটি দেখুন 🙂

ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে লারাভেল এর টাস্ক টুল এলিক্সিয়ার ( Elixir ) এর ব্যবহার

Gulp WordPress


লারাভেল এলিক্সিয়ার ( Elixir )
হল পি, এইচ, পি ফ্রেমওয়ার্ক লারাভেল এর টাস্ক অটোমেশন টুল, যা গাল্প ( gulp ) নির্ভর খুব মজার নোডজেএস এপ্লিকেশন যা দিয়ে আপনি আপনার প্রোজেক্টে ম্যানুয়েলি করা লাগে এমন কাজ গুলি টাস্ক লিখে করিয়ে নিতে পারবেন,

সাধারণত এইটুল টা লারাভেল ডেভেলপারগন তাঁদের প্রোজেক্টে বিভিন্ন অটোমেটেড টাস্ক যেমন less থেকে css এ কম্পাইল, css, js মিনিফিকেশন, ইমেজ অপটিমাইজেশন, বিভিন্ন ব্রাউজারে সাইট চেক সহ আরও অনেক ম্যানুয়েল কাজ অটোমেটিক ভাবে করার জন্যে ব্যবহার করে থাকেন, কিন্তু আমরা চাইলে ওয়ার্ডপ্রেস ডেভেলপমেন্ট এ বিশেষ করে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে ও এই টুলটা কাজে লাগাতে পারি, তো চলুন দেরী না করে শুরু করে দিইঃ

যেভাবে ইন্সটল করবেনঃ

  • প্রথমে নোডজেএস ইন্সটল করুন
  • এর পর NPM ( নোড প্যাকেজ ম্যানেজার ) ইন্সটল করুন 
  • এর পর গাল্প ( gulp ) টা গ্লোবালি ইন্সটল করে নিন, কারণ এলিক্সিয়ার গাল্প ডিপেনডেন্ট  sudo npm install --global gulp
  • এর পর ডিরেক্টরি চেঞ্জ করে আপনি যে থিম  ওয়ার্ডপ্রেস থিম  ডিরেক্টরিতে যান cd ~/Sites/YOUR WORDPRESS DIRECTORY/wp-content/themes/YOUR THEME
  • এখানে আপনাকে এই প্রজেক্টের জন্যে ব্যবহার করা নোডজেএস এর প্যাকেজ গুলির ডিপেন্ডেন্সি লিস্ট রাখার জন্যে package.json নামে একটা ফাইল তৈরি করে নিতে হবে, আপনি চাইলে ওটা ম্যানুয়েলি তৈরি করে নিতে পারেন অথবা npm init কমান্ডটা দিয়েও তৈরি করে নিতে পারেন।
  • গাল্প তো আমরা গ্লোবালি ইন্সটল করেছি কিন্তু এই প্রোজেক্টে লাগবে কিনা তা কিন্তু কোথাও বলিনি 🙂 আপনার এই প্রোজেক্টে যে গাল্পের ডিপেন্ডেন্সি আছে তা ওই package.json ফাইলে উল্লেখ থাকতে হবে, এজন্যে আপনি npm install --save-dev gulp কমান্ডটা দিয়ে কাজ টা করে নিতে পারেন।
  • গাল্প তো এড করা হয়ে গেল, এলিক্সিয়ার টাও এড করে নিন  sudo npm install laravel-elixir --save-dev দিয়ে।
  • ইন্সটলেশন মুটামুটি শেষ এবার আসুন –

টাস্ক গুলি যেভাবে লিখবেনঃ

  • এবার আমাদের প্রোজেক্টের জন্যে দরকারি টাস্ক গুলি লিখার জন্যে আমরা gulpfile.js নামে একটা ফাইল তৈরি করব যেখানে এই কোড গুলি এড করে নিতে হবে
  • ধরুন আমরা আমাদের থিমে less ব্যবহার করব তাহলে less ফাইল গুলি less/ নামের ডিরেক্টরি থাকবে আর কম্পাইলড css গুলি css/ নামের ডিরেক্টরি তে থাকবে, যেখানে আমরা কোড করব less ফাইলে কিন্তু তা অটোমেটিক কম্পাইল হয়ে css ডিরেক্টরিতে জমা হবে।
  • এবার আপনাকে elixir এর কিছু কনফিগারেশন চেঞ্জ করতে হবে কারণ এটা লারাভেল এর ডিরেক্টরি স্ট্রাকচারে কনফিগ করা কিন্তু আমাদের less ফাইল আর css পাথ তো ওই রকম না, এজন্যে আমরা

    এই দুটোই খালি রেখেছি কারণ ডিফল্ট এসেট পাথ resources/assets আর less পাথ less ডিরেক্টরি তার মানে ফুল less পাথ হল resources/assets/less কিন্তু আমরা less ডিরেক্টরি নাম চেঞ্জ করে শুধু asset পাথ খালি রেখেছি যার কারণে আমাদের less ডিরেক্টরি less/ ই ডিফল্ট থাকবে,
  • publicPath এর ক্ষেত্রে ও একই কথা,
  • আপনি এই ডিফল্ট কনফিগারেশন গুলি gulpfile.js ফাইল আছে ওখানে node_modules ডিরেক্টরি তে গিয়ে laravel-elixir/Config.js ফাইলে পাবেন।
  • এবার less থেকে css এ কম্পাইল করার টাস্ক লিখি এভাবে, ধরে নিলাম আপনার less ফাইলের নাম app.less
  • পুরা কোড দেখতে হবেঃ
  • এবার টার্মিনাল খুলে শুধু gulp কমান্ড দিয়ে এন্টার চাপুন, দেখবেন আপনার less/app.less  ফাইলটা সোর্সম্যাপ সহ css/app.css ফাইল নামে জেনারেট হয়ে গেছে, functions.php ফাইলে app.css টা enqueue করে নিন 🙂
  • আপনি যদি চান যে less ফাইল এক রকম আর css আউটপুট এক রকম হবে তাহলে আপনাকে

    এর জায়গায়

    ব্যবহার করতে পারেন,
  • elixir মেথড চেইনিং সাপোর্ট কে মানে আপনি কয়েকটা টাস্ক চাইলে এভাবেও লিখতে পারেনঃ
  • এলিক্সিয়ার এর ডকুমেন্টেশনটা দেখলেই আপনি সহজে বুঝে যাবেন, যে কিভাবে টাস্ক গুলি লিখতে হয়, আর কি কি ফিচার আছে 🙂

আজ এই পর্যন্তই…

কোন প্রকার প্লাগিন ছাড়াই ওয়ার্ডপ্রেস কমেন্ট স্প্যাম থেকে বাঁচার খুবই সহজ উপায়

ওয়ার্ডপ্রেস কমেন্ট স্প্যাম রোধে অনেক প্লাগিন আছে যা থেকে কমেন্টে স্প্যামিং রোধ করা যায়, কিন্তু আমরা চাইলে খুব সহজেই কোন প্রকার প্লাগিন ব্যবহার ছাড়াই ওয়ার্ডপ্রেস কমেন্ট স্প্যামিং রোধ করতে পারি 🙂

সাধারণত কমেন্ট স্প্যামিং টুল গুলো কোন একটা সাইট টার্গেট করে / কোন প্রকার টার্গেট ছাড়াই ওয়ার্ডপ্রেস কমেন্ট ফিল্ড গুলো পূরণ করে পাঠিয়ে দেয়, এমন কি সার্ভার সাইডে কমেন্ট প্রটেকশনের জন্যে কোন ফিল্ড দেওয়া থাকলে ও কমেন্ট বট গুলো ওই ফিল্ডে বুঝে ডাটা পূরণ করে পাঠিয়ে দিতে পারে ।

এই জন্যে কমেন্ট স্প্যামিং রোধক ফরম ফিল্ড ব্যবহারের জন্যে আমরা জাভাস্ক্রিপ্ট ব্যবহার করব 🙂 চলুন কোডে চলে যাই।

প্রথমে আপনার ওয়ার্ডপ্রেস থিমের জাভাস্ক্রিপ্ট ফাইলে এই কোড  টা ব্যবহার করুন যাতে কমেন্ট ফরম সাবমিটের সাথে সাথে কমেন্ট ফরমে একটা ইনপুট ফিল্ড যোগ হয়ে যায়ঃ

এবার   functions.php ফাইলে preprocess_comment  ফিল্টারে আমাদের দেওয়া ইনপুট ফিল্ডের ডাটা আছে কিনা চেক করে নিব

ব্যাপারটা খুবই সাধারণ, কিন্তু যাদের জাভাস্ক্রিপ্ট ডিজেবল করা থাকে বা থিমে জাভাস্ক্রিপ্টে এরর এর জন্যে কমেন্ট ফরমে ইনপুট এপেন্ড হবে না যার কারণে কমেন্ট সাবমিট হবে না এবং এরর দেখতে পাবে।

স্প্যামিং বট বা cURL দিয়ে কেউ যদি কমেন্ট স্প্যামিং করার চেষ্টা করে তবে তা রোধ হবে 🙂

ওয়ার্ডপ্রেস গ্যালারীতে HTML5 মার্কআপ সাপোর্ট

সাধারণত ওয়ার্ডপ্রেস গ্যালারীর html স্ট্রাকচার টা dl, dt, dd মানে ডেফিনেশন লিস্ট দিয়ে করা থাকে সাথে গ্যালারীর ডিফল্ট স্টাইল ও করা থাকে, আমরা গ্যালারীতে নিজেদের স্টাইল এপ্লাই করার জন্যে  use_default_gallery_style ফিল্টারে false রিটার্ন করি, এবং নিজেদের css লিখে থাকি কিন্তু ওয়ার্ডপ্রেসের ৩.৯ ভার্সন থেকে html5 মার্কআপ সাপোর্ট দেওয়া হয়েছে figure, div, ও figcaption দিয়ে  🙂

এজন্যে থিম সাপোর্টে html5 এ  gallery যোগ করে দিতে হবে।

মজার ব্যাপার হল আপনার থিমে html5 এ গ্যালারী সাপোর্ট দিলে আপনাকে আবার use_default_gallery_style ফিল্টারে false রিটার্ন করতে হবে না, মানে গ্যালারীর জন্যে ওয়ার্ডপ্রেস যে ডিফল্ট স্টাইল যোগ করে html5 গ্যালারী সাপোর্টে ওটা করে না।

এই চেঞ্জলগটা দেখলে অনেকটা ক্লিয়ার হবে https://core.trac.wordpress.org/changeset/27396 লাইন ৮৮৮.

আশা করি টিপস টা সবার কাজে লাগবে  🙂

 

ওয়ার্ডপ্রেস লুপে সঠিকভাবে পোস্টের তারিখ দেখানো

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

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

এবার আপনি দেখবেন যে সব পোস্টেই ঠিক মত তারিখ দেখাচ্ছে, সেটা একই তারিখের অনেকগুলো পোস্ট হোক বা না হোক।

আপনি যদি চান যে ডেট ফরম্যাটে “F j, Y” এর বদলে ইউজারের নিজের দেয়া ডেট ফরম্যাট সেটিংস ব্যবহার করা হবে তাহলে আপনি লিখতে পারেন নিচের মত

the_time( get_option( ‘date_format’ ) ); // এই টিপসের জন্য বাপ্পি কে ধন্যবাদ

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