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

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

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

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

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

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

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

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

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

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

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

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

স্পেসিফিক অবজেক্ট গুলো তে মেটা যোগ করার জন্যে ওয়ার্ডপ্রেস এ 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 আছে কিনা তা চেক করে ব্যবহার উচিত 🙂

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

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

আমরা শর্টকোড বানানো শিখে ফেললাম এখন আমরা শুধু [[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 ফাইলে বাটন টা পুশ করে দিলেই কেল্লাফতে  🙂

ওয়ার্ডপ্রেস শর্টকোড ১০১ – পর্ব এক

Blue_binary_code_1600_1200

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

ওয়ার্ডপ্রেসের শর্টকোড মূলত একধরনের মিনি প্লাগইন যেটা দিয়ে থিম/প্লাগইন ডেভেলপার রা সহজেই লেখককে তার আর্টিকেলে বিভিন্ন ধরনের কনটেন্ট যোগ করার সুযোগ করে দেন। শর্টকোড তৈরী করা এবং ব্যবহার করা সহজ বলে ওয়ার্ডপ্রেস কমিউনিটিতে শর্টকোড ব্যপক জনপ্রিয়। শর্টকোড মূলত কয়েকভাবে ভাবে লেখা যায়। ধরুন আপনার শর্টকোডের নাম MyShortcode

১. শুধু প্যারামিটার সহ বা কোন প্যারামিটার ছাড়া শর্টকোড, যেমন

[MyShortcode/] – কোন প্যারামিটার ছাড়া শর্টকোড
[MyShortcode param1 = “Some Data” param2 = “Other Data” /] – প্যারামিটার সহ শর্টকোড

২. কনটেন্ট সহ শর্টকোড, এখানে কনটেন্ট দুই ধরনের হতে পারে যেমন, টেক্সট কনটেন্ট সহ শর্টকোড

অথবা নেস্টেড শর্টকোড (Nested Shortcode) – অর্থাৎ একটি শর্টকোডের মাঝে আরেকটি শর্টকোড

চলুন এখন আমরা দেখি কিভাবে ডেভেলপার হিসেবে আমরা ওয়ার্ডপ্রেস ব্যবহারকারীদের জন্য এসব শর্টকোড ডেভেলপ করব।

প্যারামিটার ছাড়া শর্টকোড তৈরী করা

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

উপরের কোডে খেয়াল করলে দেখবেন যে একটা শর্টকোড লিখতে হলে দুইটি কাজ করতে হয়, প্রথমে একটি ফাংশন লেখা লাগে যেটা শর্টকোডের কলব্যাক ফাংশন হিসেবে কাজ করবে। এই ফাংশনটিই শর্টকোডের প্রান। কেউ তার কনটেন্টে শর্টকোড লিখলে ওয়ার্ডপ্রেস ভিতরে ভিতরে এই ফাংশনটি কল করবে। এর পরে এই ফাংশনটিকে শর্টকোডের সাথে রেজিস্টার করে দেয়া লাগে, যা আমরা করেছি add_shortcode() এর সাহায্যে। add_shortcode() এর প্রথম প্যারামিটার হল আমাদের শর্টকোডের নাম, আর দ্বিতীয় প্যারামিটার হল আগে লেখা শর্টকোডের ফাংশনটির নাম। এই শর্টকোড ব্যবহার করতে হলে আমাদের ওয়ার্ডপ্রেস এডিটরে [MyBlogTitle] লিখলেই হবে – আউটপুট হিসেবে আপনার ব্লগ পোস্টের কনটেন্টে আপনি দেখতে পারবেন আপনার ওয়ার্ডপ্রেস সাইটের টাইটেল।

শর্টকোড থেকে লাইভ আউটপুট – এই ব্লগের টাইটেল হল [MyBlogTitle]

চলুন আমরা যা শিখলাম সেটা ব্যবহার করে আমরা আরেকটা চমৎকার শর্টকোড লিখে ফেলি। এই শর্টকোডের কাজ হবে “পল গ্রাহাম” এর বা “জোয়েল অন সফটওয়্যার” থেকে একটা র‍্যান্ডম কোটেশন প্রিন্ট করা। এজন্য আমরা iheartquotes.com এর কোটেশন এপিআই ব্যবহার করবো, wp_remote_get() ফাংশনের সাহায্যে । আমাদের শর্টকোডের নাম হবে [RandomQuote]। এর জন্য আগের মতই আপনার থিমের functions.php ফাইলে নিচের কোডটুকু পেস্ট করুন

চলুন লাইভ আউটপুট দেখি আমাদের এই শর্টকোডের 🙂

[RandomQuote]

উপরে দেখতে পাচ্ছেন যে “পল গ্রাহাম” এর বা “জোয়েল অন সফটওয়্যার” থেকে একটা র‍্যান্ডম কোটেশন প্রিন্ট হয়েছে।

প্যারামিটার ওয়ালা শর্টকোড তৈরী করা

চলুন এবার আমরা দেখি কিভাবে প্যারামিটার সহ শর্টকোড লিখতে হয়। এরজন্য আমরা নতুন একটা শর্টকোড লিখবো যার কাজ হবে ইনপুট হিসেবে কোন স্থানের ল্যাটিচিউড এবং লঙ্গিচিউড নেয়া এবং গুগল ম্যাপে সেটা দেখানো। আমাদের শর্টকোডের নামে হবে [GoogleMap]। এজন্য নিচের কোড functions.php ফাইলে পেস্ট করুন

উপরের কোডে খেয়াল করুন কিভাবে আমরা আমাদের শর্টকোড ফাংশনে আমরা extract() ফাংশনটি ব্যবহার করেছি। এই ফাংশনের কাজ হল কোন অ্যারের কী গুলো কে সেই নামের ভ্যারিয়েবলে এক্সট্রাক্ট করা। এছাড়া shortcode_atts() ফাংশনে যেই অ্যারে টি আমরা পাঠিয়েছি, আমাদের শর্টকোডেও সেই অ্যারের কি গুলোর নামে প্যারামিটার পাঠানো যাবে। যেমন উপরের উদাহরণে এই কি গুলো হল lat, lon, zoom, width এবং height। আর কেউ যদি এই প্যারামিটারের কোনটি বাদ দেয় বা কোনটাই না দেয় তাহলে তাদের ডিফল্ট ভ্যালু ব্যবহার হবে। আমাদের এই অ্যারেতে বলা হয়েছে যে ডিফল্ট হিসেবে ল্যাটিচিউড ২৩.৭ এবং লঙ্গিচিউড ৯০.৩৭৫০, যা আসলে ঢাকার কো-অর্ডিনেট – পাশাপাশি আরও কিছু ভ্যারিয়েবলের ডিফল্ট ভ্যালু দেয়া আছে, যেমন zoom=12, width=600 এবং height=400। এখন কেউ যদি তার পোস্ট বা পেজের কনটেন্টে লেখে শুধু [GoogleCode] তাহলে তার আউটপুট আসবে নিচের মত

ডিফল্ট শর্টকোড [GoogleCode] এর আউটপুট
[GoogleMap]

আমরা যদি অন্যকোন স্থানের, যেমন ধরুন এরিয়া ৫১ এর ম্যাপ দেখতে চাই, তাহলে আমরা লিখতে পারি [GoogleMap lat= “37.2350” lon= “-115.8111” /]

এরিয়া ৫১ এর গুগল ম্যাপ
[GoogleMap lat= ‘37.2350’ lon= ‘-115.8111’ /]

মজা না? আজ এ পর্যন্তই থাকুক। এর পরের পর্বে আমরা আলোচনা করব কিভাবে শর্টকোডের কনটেন্ট এবং নেস্টেড শর্টকোড ব্যবহার করা যায়। আশাকরি মন্তব্যে জানাবেন কেমন লাগলো আজকের এই আর্টিকেলটি 🙂

ইনস্টলিং ওয়ার্ডপ্রেস

ওয়ার্ডপ্রেস বিখ্যাত তার ৫ মিনিটের ইনস্টলেশন সিস্টেমের জন্য, তবে সত্যি কথা বলতে ওয়ার্ডপ্রেস ইনস্টল করতে এক মিনিটের বেশি লাগে না। নিজের মেশিন বা ক্লাউড/ভিপিএস/শেয়ার্ড/ডেডিকেটেড সার্ভার ছাড়াও অনেক ফ্রি ওয়ার্ডপ্রেস হোস্টিং সার্ভিস আছে। শুধু একটি ব্লগ চালানোই যদি আপনার টার্গেট হয় তাহলে ওয়ার্ডপ্রেস ডট কম (wordpress.com) ব্যবহার করে দেখতে পারেন, সহজে এবং বিনামূল্যে যদি ওয়ার্ডপ্রেসের ডেভেলপমেন্ট করতে চান তাহলে প্যাগোডাবক্স (pagodabox.com), ফোর্টর‍্য্যাবিট (fortrabbit.com) বা ওপেনশিফট (openshift.com) ব্যবহার করে দেখতে পারেন।

নিজের মেশিনে বা ভিপিএস/ক্লাউড/ডেডিকেটেড সার্ভারে ওয়ার্ডপ্রেস ইনস্টল করার জন্য আগে ঠিকমত অ্যাপাচি, মাইএসকিউএল এবং পিএইচপি কনফিগার করে ফেলুন। এরপর একটি ভার্চুয়াল হোস্ট তৈরী করুন, আমি ধরে নিলাম আপনার ভার্চুয়াল হোস্টের নাম “local.mywp.dev” যা কিনা “/var/www/mywp” ফোল্ডারের সাথে ম্যাপ করা আছে। আপনি আপনার সুবিধামত যেকোন ফোল্ডারে ম্যাপ করে নিতে পারেন ভার্চুয়াল হোস্ট কনফিগারেশনের মাধ্যমে।

স্টেপ ১: http://wordpress.org এখান থেকে ওয়ার্ডপ্রেসের লেটেস্ট ভার্সন নামিয়ে নিন এবং ফাইলটি আনজিপ করুন।

স্টেপ ২: আনজিপ করা ফোল্ডার থেকে সমস্ত ফাইল কপি করুন আপনার ভার্চুয়াল হোস্ট এর ফোল্ডারে  , এই আর্টিকেলে আমি ধরে নিয়েছি ফোল্ডারটি হল /var/www/mywp Continue reading ইনস্টলিং ওয়ার্ডপ্রেস

ওয়ার্ডপ্রেস টার্মিনোলজি

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

থিম: থিম বলতে মূলত একটি পুরো প্যাকেজকে বোঝানো হয় যার সাহায্যে ব্যবহারকারীর চাহিদা মত ওয়ার্ডপ্রেস কে কাস্টোমাইজ করে উপস্থাপন করা হয়ে থাকে। একটি থিম ওয়ার্ডপ্রেসের যাবতীয় উপাদান গুলোর মাঝে একটা সমন্বয় সাধন করে, তাদেরকে সফল ভাবে ব্যবহার করে। থিমে সিএসএস বা স্টাইলশিট ফাইল থাকে লুক-অ্যান্ড-ফিলের জন্য, জাভাস্ক্রিপ্ট ফাইল থাকে ক্লায়েন্ট সাইডে কাজ করার করার জন্য, শর্টকোড এবং প্লাগইন থাকে ওয়ার্ডপ্রেসের কিছু কিছু কাজ সহজ করার জন্য অথবা এক্সটেন্ড করার জন্য, এছাড়া বেসিক টেমপ্লেট ফাইল থাকে বিভিন্ন ধরনের পোস্ট, পেজ, আর্কাইভ ইত্যাদি দেখানোর জন্য। এগুলো সবগুলো মিলেই একটা থিম তৈরী করে

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

শর্টকোড: শর্টকোড ওয়ার্ডপ্রেসের বহুল ব্যবহৃত একটি প্লাগইন সিস্টেম। সহজে কোন পোস্টের কন্টেন্ট পরিবর্তন থেকে শুরু করে এক্সটার্নাল কন্টেন্ট ডিসপ্লে করার জন্য কনটেন্ট রাইটার দের এই শর্টকোড সুবিধা দেয়া হয়। শর্টকোড আর্টিকেল লেখার এবং ফরম্যাট করার কষ্ট অনেকাংশেই কমিয়ে আনে। Continue reading ওয়ার্ডপ্রেস টার্মিনোলজি