ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে লারাভেল এর টাস্ক টুল এলিক্সিয়ার ( 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’ ) ); // এই টিপসের জন্য বাপ্পি কে ধন্যবাদ

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