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

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

ওয়ার্ডপ্রেসের শর্টকোড মূলত একধরনের মিনি প্লাগইন যেটা দিয়ে থিম/প্লাগইন ডেভেলপার রা সহজেই লেখককে তার আর্টিকেলে বিভিন্ন ধরনের কনটেন্ট যোগ করার সুযোগ করে দেন। শর্টকোড তৈরী করা এবং ব্যবহার করা সহজ বলে ওয়ার্ডপ্রেস কমিউনিটিতে শর্টকোড ব্যপক জনপ্রিয়। শর্টকোড মূলত কয়েকভাবে ভাবে লেখা যায়। ধরুন আপনার শর্টকোডের নাম 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’ /]

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