ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে লারাভেল এর টাস্ক টুল এলিক্সিয়ার ( 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 দিয়ে কেউ যদি কমেন্ট স্প্যামিং করার চেষ্টা করে তবে তা রোধ হবে 🙂

ওয়ার্ডপ্রেসে ফোনেটিক বাংলায় লেখার সুবিধা যোগ করব কিভাবে

Screen Shot 2014-07-17 at 4.03.12 AM

ওয়ার্ডপ্রেসে ফোনেটিক বাংলায় লেখার সুবিধা যোগ করা এখন খুবই সহজ। এজন্য প্রথমেই নিচের ইউআরএল থেকে bnkb.phonetic.min.js ফাইলটি নামিয়ে আপনার থিমের js ফোল্ডারে রাখুন।

http://scripts.ofhas.in/bangla/bnkb.phonetic.min.js

এবার আপনার থিমের functions.php ফাইলে নিচের কোডটুকু যোগ করে দিন।

ব্যাস, হয়ে গেল ফোনেটিক বাংলায় লেখার সুবিধা। এবার ওয়ার্ডপ্রেস পোস্ট বা পেজের টেক্সট এডিটরে গিয়ে Text মোডে “বাংলা” বাটনের উপরে ক্লিক করলেই সরাসরি ওয়ার্ডপ্রেস এডিটরেই ফোনেটিক বাংলায় লিখতে পারবেন 🙂

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