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

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

ওয়ার্ডপ্রেসের Walker ক্লাসের কাজ ও ধারনা

WordPress Walker Class

মেনু, সাব মেনু, বা ক্যাটাগরি, সাব ক্যাটাগরি স্ট্যাইলে ডাটা দেখানো কে আমরা ট্রি মত ডাটা দেখানো বলি, যেখানে প্যারেন্ট আইটেমের আন্ডারে সাব আইটেম,  এর আন্ডারে আবার সাব আইটেম এভাবে দেখানো যায়,

ওয়ার্ডপ্রেসে এই ধরনের কাজ গুলি সহজে করার জন্যে walker নামে একটা ক্লাস আছে। এটি একটি  এবসট্র্যাকট  ক্লাস,  মানে সরাসরি এই ক্লাসটা আপনি ব্যবহার করতে পারবেন না কিন্তু এই ক্লাসকে এক্সটেন্ড করে এর মেথড গুলি ব্যবহার করে খুব সহজেই আপনি ড্রপডাউন মেনু, বা ড্রপডাউন সিলেক্ট বক্স ইত্যাদি বানাতে পারবেন 🙂

সাধারণত এই ধরনের ডাটা স্ট্রাকচারে আইডি আর প্যারেন্ট আইডি অবশ্যই থাকে যাতে কোন আইটেম কোন আইটেমের আন্ডারে তা ডিফাইন করা যায়, আর কোন আইটেম যদি কোন আইটেম এর আন্ডারে না থাকে তবে তার প্যারেন্ট আইডি থাকে ০।

যেমন ধরুনঃ

  1. আইটেম ১, যার আইডি ১, আর প্যারেন্ট আইডি ০
    1. আইটেম ১ যার আইডি ৪ কিন্তু প্যারেন্ট আইডি ১, মানে এটা  আইটেম ১ এর চাইল্ড আইটেম
    2. আইটেম ২ যার আইডি ৫ কিন্তু প্যারেন্ট আইডি ১, মানে এটাও আইটেম ১ এর চাইল্ড আইটেম
  2. আইটেম ২, যার আইডি ২, আর প্যারেন্ট ০
  3. আইটেম ৩, যার আইডি ৩, আর প্যারেন্ট ০

ডাটাবেজ থেকে হোক বা আপনার কাস্টম এরে (array) থেকে হোক এই ধরনের ডাটা গুলি কে আপনি এই walker ক্লাস দিয়ে সহজেই ট্রি স্ট্রাকচার করে দেখাতে পারবেন,

এরে (array) দিয়ে করতে গেলে আপনার ডাটা স্ট্রাকচার অবশ্যই আইডি, প্যারেন্ট আইডি এভাবে সাজানো থাকতে হবে 🙂

উপরের উদাহরণের  walker এর আউটপুট হবে এমনঃ

চলুন আমরা একটা এরে (array) ব্যবহার করে দেখিঃ

এই walker ক্লাসটা কাজ করার জন্যে আপনার প্রতিটি আইটেম অবজেক্ট হিসেবে থাকতে হবে যেমনঃ

আপনাকে walker ক্লাসটা ব্যবহার করতে হবে এভাবেঃ

এখানে Walker_Simple_Example  ক্লাস টার প্যারেন্ট ক্লাস walker। আমরা শুধু  walker ক্লাসের মেথড গুলি ব্যবহার করেছি,

এখানে $db_fields  প্রপার্টিতে তে আমরা অবজেক্ট এর আইডি, আর প্যারেন্ট আইডি কোনটি তা বলে দিয়েছি, এটা আপনাকে অবশ্যই বলে দিতে হবে 🙂

আর আউটপুট দেখবেনঃ

পুরো কোডটি হবে এমনঃ

 

আপনি যদি কোন কাস্টম ট্যাক্সনমি নিয়ে কাজ করতে চান, ধরুন আমরা product_cat  এই কাস্টম ট্যাক্সনমির walker বানাব তাহলে আপনাকে $db_fields এর parent  কি এর ভ্যালু parent  আর id  কি এর ভ্যালু term_id  দিতে হবে, কারণ এখানে ট্যাক্সনমির লিস্ট টা নিতে আমরা get_categories()   ফাংশন টা ব্যাবহার করব, যেখানে id   নেম term_id  আর parent  হল parent

get_categories()   ফাংশনটার আউটপুট ডাম্পিং করলেই আপনি দেখবেন ব্যাপারটা, তো আমাদের ক্লাস টা আগের সবকিছু ঠিক রেখে দেখতে হবেঃ

আর আউটপুট দেখাবেনঃ

walker ক্লাসের যে মেথড দিয়ে আপনি আপনার html এর আউটপুট চেঞ্জ করতে পারেনঃ

start_lvl  মেথড দিয়ে ট্রি লেভেল শুরু করার সময়

end_lvl মেথড দিয়ে লেভেল শেষ করার সময়,

আর start_el, end_el  প্রতিটা আইটেমের html এলিমেন্ট শুরু শেষ করার স্ট্যাইল বলে দিতে পারবেন।

ওয়ার্ডপ্রেস গ্যালারীতে 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 লাইন ৮৮৮.

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

 

সূচীপত্র

১. ওয়ার্ডপ্রেস ডেভেলপমেন্ট শুরু করবেন কিভাবে
২. ওয়ার্ডপ্রেস টার্মিনোলজি
৩. ওয়ার্ডপ্রেস ডেভেলপমেন্ট শুরু করার জন্য প্রয়োজনীয় টুলস এবং সেটআপ
৪. ভার্চুয়াল হোস্টের অ আ ক খ
৫. ইনস্টলিং ওয়ার্ডপ্রেস
৬. ওয়ার্ডপ্রেস সিকিউরিটি অ আ ক খ – প্রাথমিক ধারনা
৭. ওয়ার্ডপ্রেস কনফিগারেশন ফাইলের দশটি টিপস এবং ট্রিকস
৮. কুইক টিপস ০১: ওয়ার্ডপ্রেসে ইমেজের ইউআরএল সিডিএনের ইউআরএল দিয়ে রিপ্লেস করা
৯. কিভাবে ওয়ার্ডপ্রেসে নিজের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করব?
১০. ওয়ার্ডপ্রেসে ফোনেটিক বাংলায় লেখার সুবিধা যোগ করব কিভাবে
১১. ওয়ার্ডপ্রেস শর্টকোড ১০১ – পর্ব এক
১২. ওয়ার্ডপ্রেস এডিটরে কাস্টম বাটন যোগ করা
১৩. ব্রাউজারের ক্যাশিং বাড়িয়ে দিয়ে ওয়ার্ডপ্রেস সাইট দ্রুত লোড করুন
১৪. ওয়ার্ডপ্রেস ট্যাক্সনমিতে মেটাবক্স সুবিধা যোগ করা
১৫. ওয়ার্ডপ্রেস লুপে সঠিকভাবে পোস্টের তারিখ দেখানো
১৬. ওয়ার্ডপ্রেস গ্যালারীতে HTML5 মার্কআপ সাপোর্ট
১৭. ওয়ার্ডপ্রেস দ্রুতগতি করণ-১
১৮. কোন প্রকার প্লাগিন ছাড়াই ওয়ার্ডপ্রেস কমেন্ট স্প্যাম থেকে বাঁচার খুবই সহজ উপায়
১৯. ওয়ার্ডপ্রেসের Walker ক্লাসের কাজ ও ধারনা
২০. ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে লারাভেল টাস্ক টুল এলিক্সিয়ার ( Elixir ) এর ব্যবহার
২১. Twitter Bootstrap#v4.0 ও WP Mix দিয়ে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট

ওয়ার্ডপ্রেসের কুকবুকে লেখা শুরু করার পর আমি দেখলাম নামে বেনামে অনেকেই এখানে ওখানে কপি পেস্ট করতেছে। প্রথম প্রথম একটু মন খারাপ হলেও পরে ভাবলাম যে আমি আসলে এই লেখা গুলো কেন লিখতেছি? – সবার জন্যই তো। সো কপি পেস্ট হলে আমার কোন সমস্যা নাই, বরং সেটা বেশী মানুষের মাঝেই ছড়িয়ে যাবে যেটা সবার জন্যই ভালো। নাম দিলেই কি, আর না দিলেই কি 🙂

আজ থেকে (এবং পূর্বেকার) ওয়ার্ডপ্রেস কুকবুকের সমস্ত লেখা ক্রিয়েটিভ কমন্স লাইসেন্সের (BY-NC-SA) অধীনে প্রকাশ করা হল।

BY-NC-SA শব্দটির মাঝে বেশ কয়েকটি গূরুত্বপূর্ন টার্ম রয়েছে।

“BY” অর্থ লেখকের ক্রেডিট উল্লেখ করতে হবে
“NC” অর্থ নন কমার্শিয়াল। অর্থাৎ এই লেখা গুলো কোনভাবেই কোন কমার্শিয়াল কাজে ব্যবহার করা যাবে না
“SA” অর্থ এই লেখাটি বা এই লেখার উপরে ভিত্তি করে কোন ডেরিভেটিভ কাজ করলে বা শেয়ার করলে সেটাও অবশ্যই ক্রিয়েটিভ কমন্স BY-NC-SA লাইসেন্সের অধীনেই প্রকাশ করা লাগবে

ক্রিয়েটিভ কমন্স লাইসেন্সের ব্যপারে বিস্তারিত জানতে এখানে ভিজিট করতে পারেন
http://en.wikipedia.org/wiki/Creative_Commons_license