Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

কিভাবে একটি ভাল ওয়ার্ডপ্রেস বিকল্প (Options) প্যানেল তৈরি করবেন

by
Length:LongLanguages:

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

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

টিউটোরিয়ালের বর্ণনা

  • প্রোগ্রাম: ওয়ার্ডপ্রেস
  • সংস্করণ: ২.৭, ২.৮, ২.৯ এবং তৎপরবর্তী
  • ডিফিকাল্টি: উচ্চ মাধ্যমিক
  • আনুমানিক সমাপ্ত করার সময়: ১.৫ ঘন্টা
Final Product

ওয়ার্ডপ্রেস হল সবচেয়ে জনপ্রিয় কনটেন্ট ম্যানেজমেন্ট সফটওয়্যার (সিএমএস) সিস্টেমগুলোর মধ্যে অন্যতম। এটা যেকোনো ক্লায়েন্টের প্রজেক্ট তৈরি করার জন্য অথবা থিমফরেস্টে থিম বিক্রি করার জন্য, ওয়ার্ডপ্রেস খুব দ্রুত অনেক ওয়েব ডেভেলপারদের পছন্দের সিএমএস হয়ে উঠেছে। এটা ব্যবহার করা অপেক্ষাকৃত সহজ, কিন্তু আপনি যখন ব্যবহারকারীদের জন্য একটি প্রশাসনিক (administration) প্যানেল যুক্ত করবেন, তখন এটা আরও সহজ হয়ে যাবে। এর ফলে পিএইচপি টেমপ্লেট ফাইল খুলে কোডের মধ্যে পরিবর্তন করার পরিবর্তে, ব্যবহারকারীরা আপনার ওয়ার্ডপ্রেস থিমে প্রয়োজনীয় পরিবর্তন আনতে বিকল্প প্যানেলটি ব্যবহার করতে পারবে।

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

ধাপ ১

অ্যাডমিন প্যানেল তৈরি শুরু করার আগে, আমাদের একটি থিম দরকার, ঠিক তো? সুতরাং, টিউটোরিয়ালে সরবরাহকৃত সোর্স ফাইলগুলি ডাউনলোড করুন। আমি ক্লাসিক ওয়ার্ডপ্রেস থিমে কিছুটা পরিবর্তন এনেছি। wp-content / themes ফোল্ডারে 'nettuts' ফোল্ডারটি রাখুন (এই থিমটির নাম দিলাম 'Nettuts')। আপনি এটাতে নিন্মলিখিত ফাইলগুলো দেখতে পাবেন:

  • functions.php (ফাঁকা)
  • index.php
  • comments.php
  • footer.php
  • header.php
  • rtl.php
  • sidebar.php
  • style.css
  • screenshot.png
  • দুটি ফাইল সহ একটি ইমেজ ফোল্ডার

আমাদের অধিকাংশ কাজ functions.php ফাইলে সম্পন্ন করা হবে।

একটি থিম ঐচ্ছিকভাবে একটি ফাংশন ফাইল ব্যবহার করতে পারে, যা থিম সাবডিরেক্টরিতে থাকে এবং functions.php হিসেবে নামকরণ করা হয়। এই ফাইল মূলত একটি প্লাগইনের মত কাজ করে, এবং আপনার বর্তমান থিমে এটা ব্যবহার করলে তা স্বয়ংক্রিয়ভাবে ওয়ার্ডপ্রেস চালু করার সাথে সাথেই লোড হবে (এডমিন পেইজ এবং বহির্ভাগের পেইজ উভয়টির জন্যই)।

এই ফাইলের জন্য প্রস্তাবিত ব্যবহারসমূহ:

  • আপনার থিমের বিভিন্ন টেমপ্লেট ফাইলে ব্যবহৃত ফাংশন নির্ধারণ করতে এটা ব্যবহার করতে পারেন।
  • এটা দিয়ে একটি এডমিন স্ক্রিন সেটআপ করতে, এবং আপনার থিমের রং স্টাইল এবং অন্যান্য বিষয়ের জন্য ব্যবহারকারীদেরকে একটি বিকল্প বা অপশন প্রদান করতে পারেন।

(ওয়ার্ডপ্রেস কোডেক্স থেকে)

ধাপ ২

এখন আমরা একটি সক্রিয় থিম পেলাম, এবার Appearance>Themes মেনুতে যান, এবং nettuts থিমটি সক্রিয় করুন।

সক্রিয়? ঠিক আছে দারুন। এখন আমাদের অ্যাডমিন প্যানেলের পৃষ্ঠার জন্য একটি লেআউটের কথা চিন্তা করতে হবে। আমি এখানে যা করতে চাচ্ছি, তার গঠন নিচে দেয়া হলোঃ

আমি এখন এটা দিয়ে কি করেছি তা ব্যাখ্যা করবো। সম্পূর্ণ অপশন সেটটি  "rm_wrap" এবং "rm_opts" নামের দুটি ডিভিশন ট্যাগের মধ্যখানে থাকবে। তারপর আমরা সমস্ত ইনপুটসহ একটি ফরম তৈরি করবো। অপশনের প্রত্যেক সেকশনের (জেনারেল সেটিংস, হোমপেইজ সেটিংস, ব্লগ সেটিং ইত্যাদি) জন্য় "rm_section" নামে একটি ডিভিশন ক্লাস থাকবে। এই ডিভিশন ট্যাগের অধীনেই আরও কিছু ইনপুট ডিভিশন থাকবে।  < div class="rm_input rm_select" > এই ধরনের ডিভিশন ট্যাগ ব্যবহার করে আমরা ড্রপ-ডাউন, টেক্সট ইনপুট এবং টেক্সট এরিয়া সমূহ একটু অন্যভাবে স্টাইল করতে পারবো।

এখন, সবচেয়ে গুরুত্বপূর্ণ বিষয় হচ্ছে এই কোডিংটি ম্যানুয়ালি করা উচিৎ নয়- আমরা এক্ষেত্রে যতটা সম্ভব পিএইচপি ব্যবহার করবো। ফলে এটা আরও বেশি দক্ষতার সাথে করা সম্ভব হবেঃ পিএইচপি এর লুপ থাকতে আসলে কোনও কোডই ম্যানুয়ালি করা উচিৎ নয়!

ধাপ ৩

আপনার পছন্দের কোড এডিটরে functions.php ফাইলটি খুলুন (আমি সাধারণত Notepad++) ব্যবহার করি। নিচের কোডগুলো প্রবেশ করান:

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

এই স্নিপেটটি ওয়ার্ডপ্রেসের বিল্ট-ইন get_categories ফাংশন ব্যবহার করে সবগুলো ক্যাটাগরি নিয়ে আসে, এবং তারপর foreach লুপ ব্যবহার করে $wp_cats ভেরিয়েবলের মধ্যে এগুলোকে সংরক্ষণ করে। তারপর "Choose a category" অপশনটি প্রত্যেকটি অ্যারের শীর্ষে যোগ করা হয়।

ধাপ ৪

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

এটা বেশ বড় একটা কোড, যা বেশ ভালোভাবেই ব্যাখ্যা করা হয়েছে। তাহলে আমরা এখন যা করতে পারি:

  • পিএইচপি ভেরিয়েবল $options থিমের জন্য সম্পূর্ণ অপশনের তালিকা সংরক্ষণ করে।
  • এটা বেশ কিছু অ্যারের সংমিশ্রনে তৈরি, প্রত্যেকটির একটি করে "type" বা প্রকার আছে এবং এটা কিভাবে প্রদর্শিত হবে এবং কি করবে তা ঠিক করে থাকে।
  • আমরা একটি "type" => "title" অ্যারে দিয়ে শুরু করি - এটা একটি থিমের নাম এবং টাইটেল পেইজের উপরিভাগে প্রদর্শন করবে।
  • প্রতিটি সেকশনের (জেনারেল, হোমপেইজ এবং ফুটার) জন্য আলাদা আলাদা কিছু অপশনের তালিকা রয়েছে।
  • We start a new section by closing any previous sections, declaring a new section using array( "name" => "Footer "type" => "section") এবং একটি নতুন বিভাগ খুলুন।
  • প্রতিটি অপশনে নিচে উল্লেখ্য অপশনগুলো থাকতে পারে: 
    name: ইনপুট ফিল্ডের নাম।
    desc: ব্যবহারকারীদের জন্য এটা কি করবে, তার একটি সংক্ষিপ্ত ব্যাখ্যা।
    id: সংক্ষিপ্ত নামের প্রিফিক্সসহ ফিল্ডের আইডি। এটা অপশনসমূহ ব্যবহার এবং সংরক্ষণ করার জন্য ব্যবহার করা হবে।
    type: ইনপুট টাইপ - সিলেক্ট, টেক্সট অথবা টেক্সটএরিয়া
    options: একটি সিলেক্ট টাইপ ইনপুটের জন্য বেশ কিছু অপশনের অ্যারে সংজ্ঞায়িত করতে ব্যবহার করা হবে।
    std: ডিফল্ট ইনপুটের মান, অন্য কোনও ইনপুট না দেয়া হলে এটা ব্যবহার করতে পারেন।

ধাপ ৫

এবার ওয়ার্ডপ্রেসে যান। আপনি দেখতে পাবেন যে এডমিন প্যানেল পেইজটি দেখার জন্য আসলে কোনও অপশনই নেই; তাহলে আমরা এটা কীভাবে দেখবো? নিচের কোডটি functions.php ফাইলে যোগ করুন:

এই ফাংশনটি আসলে অপশন প্যানেল আপডেট, এবং মেনু পেইজ যুক্ত করার জন্য। যদি এই অপশনগুলো সংরক্ষণ করা হয় (একটি লুকানো সেভ ভেরিয়েবলের মাধ্যমে), তাহলে সবগুলো অপশনই তাঁদের নতুন মান অনুসারে হালনাগাদ হয়ে যাবে। যদি অপশনটি রিসেট করা হয় (আরেকটি লুকানো ভেরিয়েবল যার মান হচ্ছে রিসেট), তাহলে সবকটি অপশন মুছে ফেলা হবে। সর্বশেষ লাইনটি একটি মেনু পেইজ যোগ করে - যার প্যারামিটারগুলো হচ্ছে যথাক্রমে, নাম এবং টাইটেল, এই পেইজ দেখতে প্রয়োজনীয় ইউজার অথোরাইজেশন লেভেল, সেভ পেইজ এবং যেই ফাংশনটি প্রদর্শন/সেভ করতে ব্যবহার করা হবে (আমদের ক্ষেত্রে এটা হচ্ছে mytheme_admin)। mytheme_add_init ফাংশনটি দেখুন, এটা কি খালি ফাংশন? এটাকে এমনই থাকতে দিন, আমরা এটা পরে দেখবো।

ধাপ ৬

এখনও কোনও থিম অপশন পেইজ নেই, তাই না? বেশ ভালো, আমরা যে কিছু পূর্বে mytheme_admin ফাংশনটির কথা বলেছিলাম, তা কি মনে আছে? আমরা এই ফাংশনটি এখনো লিখি নাই। তাই ধাপ ৬,৭ এবং ৮ ব্যবহার করে এই ফাংশনটি লিখতে শুরু করুন। এভাবে শুরু করুন:

খুব সহজ, তাই না? অপশনটি সেভ করার পর তার দিকে ইঙ্গিত করে একটি বার্তা লিখুন। রিসেটের মত করে। আপনি নিশ্চয়ই class="updated fade" নামে একটি ক্লাস লক্ষ্য করেছেন - কিছু সেকশনের ভিতর ওয়ার্ডপ্রেস এটাকে স্বয়ংক্রিয়ভাবে হালকা করে দিবে। বেশ পরিচ্ছন্ন, তাই না? আরও এগিয়ে যান, এবার আমরা "rm_wrap" ডিভিশনটি শুরু করবো।

ধাপ ৭

উপরের কোডের নিচে নিন্মলিখিত কোডগুলো পেস্ট করুন:

এই কোডটি বেশ বড়!  এর ব্যাখ্যা হচ্ছে - php foreach লুপ ব্যবহার করে প্রত্যেক অপশন টাইপ কেস-বাই-কেস ভিত্তিতে মূল্যায়ন করা হয়। আমরা এই জন্য একটি সুইচ-কেস টেকনিক ব্যবহার করবো। সুইচ ভেরিয়েবলটি হলো এমন কিছু অপশন - যা বিশেষ ক্ষেত্রে মূল্যায়ন করা হয়। প্রতিটি কোড বিবৃতির শেষে 'break' স্ট্যাটমেন্টটি লক্ষ্য করেছেন কি? এটা দিয়ে 'fall-through' বা ব্যর্থতাকে প্রতিরোধ করা হয়। যখন একটি ঘটনা বা কেস মিলে যায়, তখন অন্যান্য কেসগুলোও ক্রমানুসারে প্রকাশ হয়। মানে হচ্ছে আমাদের যদি কেস ৩ মিলে যায়। তবে কেস ৪, ৫ ইত্যাদিও প্রকাশিত হয়ে যাবে। আমরা নিশ্চয়ই এমন চাই না। তাই সুইচ-কেস বন্ধ করতে বিরতি বা break ব্যবহার করতে হবে।

যদি এখানে একটি "open" টাইপ অপশন থাকে - তাহলে কিছুই হবে না। যদি এখানে "close" টাইপ অপশন থাকে তাহলে div বন্ধ হয়ে যাবে। "title" অপশনটি মাত্র একবার ব্যবহার করা হয়। এটাই হচ্ছে থিম অপশনসমূহের ভূমিকা। প্রত্যেকটি প্রকারের জন্য "text" (input type="text"), "select" (dropdowns), "checkbox" এবং "textarea" (এগুলোর অর্থ বেশ স্পষ্ট) সংশ্লিষ্ট ইনপুট প্রদর্শিত হয়। < div class="clearfix" > টি লক্ষ্য করুন - এটা floats বা ভাসমান অবস্থা দূর করতে ব্যবহার করা হয়, যা আমরা পরে করবো।

ধাপ ৮

আমরা এই বিশাল ফাংশনটির একেবারে শেষ পর্যায়ে এসে গিয়েছি। আগের কোডের নিচে এই কোডগুলো পেস্ট করুন:

"section" টাইপ অপশনের জন্য, আমি $i নামে একটি কাউণ্টার ভেরিয়েবল ব্যবহার করবো। এটা সেকশন নাম্বারের ট্র্যাক রাখবে এবং সাবমিট বাটনের সাথে সংযুক্ত হয়ে ইউনিক সাবমিট বাটন তৈরি করবে। সমস্ত অপশন রিসেট করার জন্য এটার শেষে একটি ফরম আছে। আমরা জেকুয়েরীর জন্য একটি স্বচ্ছ ইমেজ ব্যবহার করবো। এটা একেবারে শেষের কোডে আমরা ব্যবহার করবো, ফলে আমাদের ফাংশনটি চালু হবে:

এটা ওয়ার্ডপ্রেসে একটি এডমিন মেনু যুক্ত করতে বলবে।

ধাপ ৯

এবং বেশ! এবার আমরা আলাদা মেনু পজিশন অনুযায়ী একটি অসাধারণ এডমিন প্যানেল পেইজ পেলাম। তাহলে চলুন এটা চেক করে দেখি - লিঙ্কে ক্লিক করুন। এটা সম্ভবত আপনার দেখা সবচেয়ে বাজে এডমিন প্যানেল পেইজ। এবার চলুন কিছু সিএসএস যোগ করি! nettuts/ ডাইরেক্টরিতে একটি নতুন ফোল্ডার তৈরি করুন এবং এর নাম দিন "functions"। এটাতে নতুন একটি CSS ফাইল তৈরি করুন functions.css নামে। এবার নিচের কোড পেস্ট করুন:

আমি এখানে কিছু ব্যাখ্যা করব না; এটা একেবারে স্পষ্ট যে প্রতিটি সিএসএস কোডে কি আছে, এবং আপনি আপনার থিমের জন্য ইচ্ছেমত এগুলো কাস্টমাইজ করে নিতে পারেন।

ধাপ ১০

সুতরাং এখন আমাদের একটি চমৎকার সিএসএস ফাইল তৈরি হলো। কিন্তু কিভাবে আপনার পেইজে এটি যোগ করবেন? মোটের উপর আমরা সরাসরি ডকুমেন্টের < head > অংশটিও ব্যবহার করতে পারছি না। খালি mytheme_add_init() ফাংশনটির কথা মনে আছে কি, যা আমরা ধাপ ৪ এ লিখেছিলাম? এখন এটা কাজে লাগবে। এটা পরিবর্তন করে এটা লিখুন:

এটা ডকুমেন্টের হেড সেকশনে এই ফাংশনটি যুক্ত করবে। টেম্পলেট ডাইরেক্টরি অনুযায়ী ফাইলের লোকেশন ঠিক করুন।

ধাপ ১১

এখন পৃষ্ঠাটি দেখুন। খুব সুন্দর দেখাচ্ছে, তাই না? কিন্তু আপনি হয়তো জিজ্ঞাসা করবেন, '+' আইকনটি কি জন্য? বেশ, এখানেই জেকুয়েরী ব্যবহার করা হবে। nettuts/functions/ ফোল্ডারে rm_script.js নামে একটি নতুন ফাইল তৈরি করুন। এবার নিচের কোড তাতে পেস্ট করুন:

এটি যা করে তা হচ্ছে - ডোম লোড হবার পর, সব rm_options স্লাইড বন্ধ থাকে। যখন '+' আইকন ক্লিক করা হয়, তখন নিষ্ক্রিয় ক্লাসটি ছবি থেকে সরিয়ে ফেলা হয় এবং সক্রিয় ক্লাস যোগ করা হয় - এটি একটি '-' আইকন তৈরি করে। '-' আইকন ক্লিক করা হলে বিপরীতটি করা হয়। তারপর rm_options টি slideToggle ফাংশন ব্যবহার করে আপ অথবা ডাউন হয়, যা (বর্তমান CSS স্টেট দ্বারা নির্ধারিত) এই স্ক্রিপ্ট যোগ করতে, mytheme_add_init () ফাংশনটিই ব্যবহৃত হয়। এটি পরিবর্তন করে লিখুন:

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

ধাপ ১২

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

এটি nt_color_checkme অপশনটি চালু করবে। নীচের উদাহরণ দেখুন:

আপনি এটা কতভাবে ব্যবহার করতে পারবেন তা আপনার কল্পনার মাঝেই সীমাবদ্ধ রাখুন।

উপসংহার

আমি আশা করি আপনি এই টিউটোরিয়ালে কিছু শিখেছেন। এটি আপনার আদর্শ অপশন প্যানেল নয়। এটাতে টেবিল ব্যবহার করা হয় নি, এটি উন্নত jQuery, অসাধারণ CSS ব্যবহার করে, এবং ব্যবহার করা অত্যন্ত সহজ। এই টিউটোরিয়ালের মূল বিষয়টি হচ্ছে শেখা - আপনি ট্যাবসহ বিভিন্ন কলাপসিবল প্যানেলসমূহ প্রতিস্থাপন করতে পারেন অথবা এর চেয়েও উন্নত কিছু যোগ করতে পারেন। আপনার সৃজনশীলতা ব্যবহার করুন! আলোচনা করুন অথবা কমেন্টে কোনও প্রশ্ন থাকলে তা জিজ্ঞাসা করুন!

WooThemes তাঁদের ফ্রেমওয়ার্কের দ্বিতীয় সংস্করণটি সম্প্রতি রিলিজ করেছে। আপনি এ সম্পর্কে বিস্তারিত এখানে দেখতে পারেন

  • টুইটারে আমাদের অনুসরণ করুন, বা ওয়েবে সর্বাধিক ওয়েব ডেভেলপমেন্ট টিউটোরিয়ালগুলির জন্য Nettuts + RSS Feed- এ সাবস্ক্রাইব করুন।
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.