ডাইনামিক শর্টকোড ব্যবহারের বিস্তারিত গাইড

Probha (প্রোভা) ব্লগার টেমপ্লেট এ ডাইনামিক শর্টকোড কী এবং কীভাবে ব্যবহার করতে হয় এবং সাধারন কিছু কোড এর উদাহরণ নিয়ে আজকের আলোচনা। আজকের পোস্টে ডাইনামিক শর্টকোড নিয়ে বিস্তারিত জানতে পারবেন। ডাইনামিক শর্টকোড এর সকল খুটিনাটি বোঝার জন্য পোস্টটা মনোযোগ দিয়ে পড়ার অনুরোধ করা হলো।

ডাইনামিক শর্টকোড কী?

ডাইনামিক শর্টকোড হলো এমন কিছু ছোট্ট কোড বা "কি-ওয়ার্ড" যেগুলো দিয়ে যেকোনো বড় কোড এর কাজ করা যায়। ধরুন এমন একটি কোড যা পোস্টে আপনার বারবার ব্যবহার করতে হবে, এমন কোডকে সহজেই শর্টকোড এর মাধ্যমে ব্যবহার করতে পারবেন। সাধারনত বড় কোড পোস্টে বারবার ব্যবহার করলে পোস্ট আপডেট করতে সমস্যা হয় এবং পোস্ট এর মান কমে যায়। এ সমস্যা এড়াতে শর্টকোড এর ব্যবহার খুবই কাজের।

প্রোভা ব্লগার টেমপ্লেট এ এধরনের বড় কোডকে ছোট্ট করে লেখার জন্য আমরা এনেছি ডাইনামিক শর্টকোড। যার সাহায্য যেকোনো বড় কোডকে প্রথমে নিজের মতো করে শর্টকোড তৈরি করে পরে নিজের পোস্টে বারবার ব্যবহার করতে পারবেন।

কীভাবে শর্টকোড ব্যবহার করবেন?

আপনারা খুব সহজেই ব্লগার এর লেআউট মোড থেকে ডাইনামিক শর্টকোড যুক্ত করতে পারবেন। কীভাবে যুক্ত করবেন সেটা নিচে দেখানো হলো:

• প্রথমে ব্লগার ড্যাশবোর্ডে যান তারপর Layout অপশনে ক্লিক করুন।
• লেআউট অপশনে গেলে সবার নিচে দেখুন Dynamic Shortcode নামে একটা সেকশন আছে। এখানে HTML/Javascript গ্যাজেট যুক্ত করার মাধ্যমে ডাইনামিক শর্টকোড যুক্ত করতে পারবেন।
• নতুন শর্টকোড তৈরি করার জন্য Add Gadget থেকে নতুন একটা HTML/Javascript গ্যাজেট সিলেক্ট করুন।
• গ্যাজেটে Title বক্সে আপনার শর্টকোড এর নাম দিন। পরে এই নামটা দিয়ে শর্টকোড কল করতে হবে।
• গ্যাজেটে Content বক্সে আপনার শর্টকোড এর কন্টেন্ট দিন। অবশ্যই HTML কোড দিতে হবে।
• তারপর গ্যাজেট সংরক্ষণ করে নিন। আরো নতুন শর্টকোড তৈরি করতে চাইলে একইভাবে যুক্ত করতে পারবেন। তবে মনে রাখবেন প্রত্যাকটা শর্টকোড এর জন্য আলাদা সুন্দর নাম দিতে হবে।

গ্যাজেট এর কন্টেন্ট কীভাবে লিখবেন?

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

একটা ছোট্ট উদাহরন দেখুন: ধরুন এটা আপনার শর্টকোড, এটার জন্য যেভাবে কন্টেন্ট লিখতে হবে নিচে দেখুন।

<!--[button name="download" link="#link"]Download[/button]-->

যেভাবে গ্যাজেটে কন্টেন্ট লিখবেন নিচে দেখুন:

<a href="@{link}">  
  <button class="button btn-@{name}">@{}</button>  
</a>

এখানে দেখুন শর্টকোডে যে Attribute গুলো ব্যবহার করা হয়েছে সেগুলো কন্টেন্টে এসেও Attribute হিসেবে ব্যবহৃত হয়েছে। সেটাকে ডিফাইন করা হয়েছে @{name} এটার ভিতরে। আর শর্টকোডে মধ্যে টেক্সট ব্যবহার করা হয়েছে সেটাকে শুধু মাত্র @{} ব্যবহার করা হয়েছে।

এটি নিচের মতো করে কোড আউটপুট করবে:

<a href="#link">  
  <button class="button btn-download">Download</button>  
</a>

এখানে লক্ষ্য করুন: আপনারা যদি [name]Text here[/name] শর্টকোড এর মাঝে যে টেক্সট ব্যবহার করবেন সেটাকে কন্টেন্ট এ অবশ্যই @{} এই খালি ভ্যারিয়েবল ব্যবহার করতে হবে। এবং এই খালি ভ্যারিয়েবল মাত্র একবারই ব্যবহার করতে পারবেন।

কিছু শর্টকোড এর উদাহরণ দেখুন

আপনাদের শর্টকোড বোঝার সুবিধার্থে আমি নিচে কিছু উদাহরণ দিচ্ছি যেগুলো দেখলে হয়তো আপনার কিছুটা অনুমান হবে কীভাবে কোড লিখতে হবে। নিচে দেখুন আমি ডাউনলোড কার্ড এর একটা উদাহরণ দিচ্ছি।

গ্যাজেট কন্টেন্ট:

<div class="btn-card @{type}">  
  <div class="head">  
    <div class="icon"></div>  
    <div class="info">  
      <div class="title">@{title}</div>  
      <div class="extra">@{extra}</div>  
    </div>  
  </div>  
  <a class="action" href="@{link}">@{name}</a>  
</div>

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

<!--[btn type="download" title="Probha Theme.xml" extra="60kb" link="#dl-link" name="Get it Now"/]-->  
<!--[btn type="purchase" title="5GB WP hosting" extra="$5" link="#p-link" name="Purchase"/]-->

নিচের মতো করে কোড আউটপুট করবে, প্রত্যেকটা শর্টকোডে নতুন ডাটা দিয়ে বা একই ডাটা দিয়ে আউটপুট করতে পারবেন।

<div class="btn-card download">  
  <div class="head">  
    <div class="icon"></div>  
    <div class="info">  
      <div class="title">Probha Theme.xml</div>  
      <div class="extra">60kb</div>  
    </div>  
  </div>  
  <a class="action" href="#dl-link">Get it Now</a>  
</div>  
  
<div class="btn-card purchase">  
  <div class="head">  
    <div class="icon"></div>  
    <div class="info">  
      <div class="title">5GB WP hosting</div>  
      <div class="extra">$5</div>  
    </div>  
  </div>  
  <a class="action" href="#p-link">Purchase</a>  
</div>

নিচে আমি আরো একটা উদাহরণ দিয়েছি, এখানে আমি একটা এলার্ট ব্লক তৈরির কোড দিয়েছি। আমি এলার্ট ব্লক এর শর্টকোড এর নাম দিব alert এবং নিচের মতো করে গ্যাজেট কন্টেন্ট লিখব:

<p class="alert alert-@{type}">@{}</p>

এটার জন্য আমরা পোস্টে নিচের মতো করে কোড লিখতে পারি:

<!--[alert type="success"] Some Success Text[/alert]-->  
<!--[alert type="error"] Some Error Text[/alert]-->  
<!--[alert type="warning"] Some Warning Text[/alert]-->  
<!--[alert type="info"] Some Info Text[/alert]-->

শর্টকোডগুলো নিচের মতো করে কোড আউটপুট করবে:

<p class="alert alert-success">Some Success Text</p>  
<p class="alert alert-error">Some Error Text</p>  
<p class="alert alert-warning">Some Warning Text</p>  
<p class="alert alert-info">Some Info Text</p>

উপসংহার

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