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

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

ওয়ার্ডপ্রেসের 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 এলিমেন্ট শুরু শেষ করার স্ট্যাইল বলে দিতে পারবেন।

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

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

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

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

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

এবার   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 লাইন ৮৮৮.

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

 

ওয়ার্ডপ্রেস ট্যাক্সনমিতে মেটাবক্স সুবিধা যোগ করা

ওয়ার্ডপ্রেস ট্যাক্সনমিতে মেটাবক্স সুবিধা যোগ করা

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

স্পেসিফিক অবজেক্ট গুলো তে মেটা যোগ করার জন্যে ওয়ার্ডপ্রেস এ add_metadata নামে একটা ফাংশন আছে আমরা ওটা দিয়ে কাজ করব 🙂

চলুন ফাংশনটা একবার দেখে নিই https://github.com/WordPress/WordPress/blob/master/wp-includes/meta.php#L29

এই পেজের ৩৬ নাম্বার লাইনে দেখুন যে _get_meta_table নামে একটা ফাংশন দিয়ে মেটা টেবিল টাও নেওয়া হয়েছে, ফাংশন টা ওই পেজের ১১০৭ নাম্বার লাইনে আছে।

এই ফাংশনে একটু খেয়াল করলে বুঝা যাবে যে মেটা টেবিল করার আগে টেবিল নেমের সাফিক্স অবশ্যই meta হতে হবে এবং ওটা $wpdb অবজেক্ট এর সাথে সেট করে দিতে হবে। আমাদের ট্যাক্সনমি মেটা টেবিলের নাম আমরা taxonomymeta ই দিচ্ছি।  তাহলে চলুন আমরা ছোট একটা প্লাগিন বালিয়ে ফেলি যেটা একটিভ করলে taxonomymeta টেবিল টা ওয়ার্ডপ্রেস ডাটাবেজে যোগ হয়ে যাবে আর  $wpdb অবজেক্টের সাথে taxonomymeta নাম টা পেজ ইনিশিয়েট এর সময় সেট হয়ে যাবে। taxonomymeta টেবিলের কলাম গুলো হবে অন্যান্য মেটা টেবিল ( পোস্ট, ইউজার, কমেন্ট ইত্যাদি )  কলাম গুলোর মতই, যেমন ঃ  meta_id, taxonomy_id, meta_key, meta_value.

প্লাগিন এক্টিভেশনের সময় আমরা টেবিল টা তৈরি করব আর init হুকে আমরা $wpdb তে ট্যাক্সনমি টেবিলের নাম টা বলে দিব।

এবার মেটাডাটা গুলা সেভ, আপডেট, ডিলিট করার জন্যে ফাংশন গুলা লিখে ফেলব।

এখন ট্যাক্সনমিতে আমরা মেটা ফর্ম ফিল্ড যোগ ও তা সেভ করব।  ট্যাক্সনমি মেটা ফর্ম  ফিল্ড যোগ ও সেভ  করার জন্যে ওয়ার্ডপ্রেসের একশন হুক আছে। ধরুন আমাদের ট্যাক্সনমি নাম txname তাহলেঃ

একটা উদাহরণ দিলে ব্যাপার টা আরও ক্লিয়ার হবে ঃ ধরুন আমরা নির্দিষ্ট নাম্বার এর একটা রেঞ্জ ফিল্ড দিব তাহলেঃ

ফর্ম ফিল্ড এড করা আর এডিট করার html ভিন্ন এইজন্যে আলাদা ফাংশন করতে হয়েছে কিন্তু সেভ বা আপডেট  করার জন্যে আমরা একটা ফাংশন ই ব্যাবহার করেছি 🙂

এখন আপনি চাইলে যেকোনো স্থানে ট্যাক্সনমির মেটা ডাটা ব্যবহার করতে পারেন, যেমন আমরা যদি রেঞ্জ ফিল্ড টার ডাটা ব্যবহার করতে চাই তাহলে get_term_meta(TERM_ID, ‘numrange’, TRUE); দিয়ে রেঞ্জ ফিল্ড এর ডাটা পাব।  তবে যেহেতু  get_term_meta আমাদের নিজেদের করা ফাংশন তাই ওটা ব্যবহারের আগে ফাংশন টা exists আছে কিনা তা চেক করে ব্যবহার উচিত 🙂

ব্রাউজারের ক্যাশিং বাড়িয়ে দিয়ে ওয়ার্ডপ্রেস সাইট দ্রুত লোড করুন

leverage-browser-cache

কোন ওয়েবসাইটের পেজ স্পিড গুগল পেজ স্পিড এনালাইজার দিয়ে চেক করলে “Leverage browser caching” বা ব্রাউজারে ক্যাশিং করে রাখার সুবিধার কথা বলে।

আজ আমরা দেখব কোন ওয়ার্ডপ্রেস সাইটের স্ট্যাটিক কন্টেন্ট যেমন ইমেজ, জাভাস্ক্রিপ্ট, সি, এস, এস ইত্যাদি  ব্রাউজারে ক্যাশিং করে রেখে কিভাবে কোন পেজের লোডিং স্পিড বাড়ানো যায় 🙂

আপনার সার্ভার যদি এপাচি সার্ভার হয় এবং “mod_expires” ডাইরেক্টিভ এনাবল করা থাকে তবে আপনি Expires HTTP header এর ম্যাক্সিমাম টাইম সেট করে দিয়ে কাজ টা সেরে ফেলতে পারেন।

এই টাইম টা আমরা .htaccess ফাইলে সেট করে দিব আমাদের সাইটে ব্যবহার করা বিভিন্ন কন্টেন্ট এর টাইপ অনুযায়ী এভাবেঃ

কিন্তু ধরুন কোন কারণে আপনি বা আপনার ক্লায়েন্ট যদি প্লাগিন থেকে ওয়ার্ডপ্রেসের রিরাইট রুল ফ্লাশ করে বা পারমালিঙ্ক সেটিং অফ করে দেয় থেকে তখন কিন্তু এই কন্টেন্ট মুছে যেতে পারে এই জন্যে আপনাকে এই সেটিংসটা ওয়ার্ডপ্রেসের .htaccess ফাইলের # BEGIN WordPress এবং # END WordPress এই comment wrapper এর বাইরে রাখতে হবে, তো ব্রাউজার ক্যাশ বাড়িয়ে নিন  🙂

ওয়ার্ডপ্রেস এডিটরে কাস্টম বাটন যোগ করা

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

আমরা শর্টকোড বানানো শিখে ফেললাম এখন আমরা শুধু [[RandomQuote]] লিখলেই  আমাদের র‍্যান্ডম কোটেশন প্রিন্ট করে দেখায়, এখন ধরুন আমরা যদি ওয়ার্ডপ্রেস এডিটরে র‍্যান্ডম কোটেশন প্রিন্ট করার একটা বাটন যোগ করি যাতে ক্লিক করলে এডিটরে [[RandomQuote]] শর্টকোডটি  বসে যাবে তাহলে কাজটা আরও মজার ও সহজ হবে 🙂

চলুন শুরু করা যাক ঃ

প্রথমে আমাদের থিমে editor-button নামে একটা ডাইরেক্টরি করি এবং একটা JavaScript ফাইল তৈরি করি, নাম দিই ধরুন my-editor-button.js এখন ওই ফাইলে একটা সেলফ ইনভোক ফাংশন লিখিঃ

এবার TinyMCE এর একটা প্লাগিন বানাই ও প্লাগিন ম্যানাজার এ আমাদের প্লাগিনটা যোগ করে দিই, ডিক্লারেশন হবে এই রকমঃ

প্লাগিনে আমরা ২ টা ফাংশন ব্যবহার করব একটা init আরেকটা getInfo।

init বা ইনিশিয়েট ফাংশন টা এই প্লাগিন টা লোড হবার সাথে সাথে রান করবে, এখানে আমরা ওই  RandomQuoteButton এর বাটন নাম, টাইটেল, ইত্যাদি ডিফাইন করব এবং ওই বাটনে ক্লিক করলে কি হবে তা বলে দিব, আর getInfo তে প্লাগিন ডেভেলপার এর ইনফরমেশন থাকবে 🙂

init ফাংশনটাতে ২ টা প্যারামিটার থাকবে যা দিয়ে আমরা এডিটরের কিছু ডাটা ব্যবহার করতে পারব, চলুন কোড টা দেখিঃ

এবার getInfo তে নিজের নাম সাইট এড্রেস দিয়ে দিন ঃ

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

এবার images নামে একটা ডাইরেক্টরি করে 20px বাই  20px  এর একটা ইমেজ বা আইকন রাখুন যা আমাদের এডিটরে দেখাবে, এই প্লাগিন এর জাভাস্ক্রিপ্ট ফাইলটা যে ডাইরেক্টরিতে থাকবে ওই ডাইরেক্টরির মধ্যে images ডাইরেক্টরি টা হবে। যেমন আমাদের এই জাভাস্ক্রিপ্ট ফাইল টা editor-button ডাইরেক্টরি তে আছে তো ইমেজ টা হবে editor-button/images এ

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

এবার বাটন টা যোগ করিঃ

এবার ওয়ার্ডপ্রেস init হুকে জাভাস্ক্রিপ্ট ও বাটন টা যোগকরে দিই ঃ

পুরা কোড হবে ঃ

স্যাম্পল ফাইল ডাউনলোড করে নিন

আর আপনি যদি প্লাগিন হিসেবে ব্যবহার  করতে চান তখন WordPress প্লাগিন ডেভেলপমেন্ট এর যেমনঃ

স্টেপ গুলো ফলো করে প্লাগিন বানিয়ে তৈরি করে ফেলতে পারেন শুধু মনে রাখতে হবে যে প্লাগিন ফাইল যোগ করার সময় get_template_directory_uri() এর স্থানে plugin_url ব্যবহার করতে হবে।

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