এই নিবন্ধটি নিম্নলিখিত রূপরেখা ব্যবহার করে ওয়ার্ডপ্রেসে একটি অগ্রগতি বার যুক্ত করার পদ্ধতি প্রদান করবে:
- WP তে একটি প্রগ্রেস বার কি?
- কোড ব্যবহার করে কিভাবে ওয়ার্ডপ্রেস ওয়েবসাইটে প্রগ্রেস বার যোগ করবেন?
- কিভাবে প্লাগইন ব্যবহার করে ওয়ার্ডপ্রেস ওয়েবসাইটে প্রগ্রেস বার যোগ করবেন?
ওয়ার্ডপ্রেসে প্রোগ্রেস বার কি?
একটি অগ্রগতি বার একটি অনুভূমিক বার ব্যবহার করে শতাংশে কিছুর অগ্রগতি দেখায়। এটি এমন কিছু ডেটার একটি গ্রাফিক্যাল উপস্থাপনা যা ব্যবহারকারীকে শুধুমাত্র এক নজরে তথ্য প্রদান করতে পারে। ডেটা বা পরিসংখ্যান উপস্থাপন করতে আপনার ওয়ার্ডপ্রেস পোস্টে অগ্রগতি বার ব্যবহার করা ওয়েবসাইটের আবেদন এবং ব্যবহারকারীদের ব্যস্ততা উন্নত করতে সহায়তা করতে পারে।
কোড ব্যবহার করে কিভাবে ওয়ার্ডপ্রেস ওয়েবসাইটে প্রগ্রেস বার যোগ করবেন?
একটি প্লাগইন ছাড়াই ওয়ার্ডপ্রেসে একটি অগ্রগতি বার যুক্ত করতে, ব্যবহারকারীকে একটি পোস্টে কাস্টম HTML এবং CSS ব্যবহার করতে হবে। এটি করতে, নীচের প্রদত্ত পদক্ষেপগুলি অনুসরণ করুন:
ধাপ 1: ড্যাশবোর্ডে লগ ইন করুন
ব্রাউজার খুলুন এবং 'এ যান http://localhost/<Website-Name>/wp-login.php 'লিঙ্ক। অ্যাডমিন শংসাপত্রগুলি প্রদান করুন এবং ' প্রবেশ করুন 'বোতাম:
ধাপ 2: একটি নতুন পোস্ট তৈরি করুন
যাও ' পোস্ট > নতুন যোগ করুন অ্যাডমিন ড্যাশবোর্ডের পাশের মেনু থেকে:
ধাপ 3: কাস্টম HTML কোড যোগ করুন
পোস্টে, শিরোনাম এবং অতিরিক্ত সামগ্রী প্রদান করুন। তারপর, 'এ ক্লিক করুন + ' আইকন, এবং অনুসন্ধান করুন ' কাস্টম এইচটিএমএল 'ব্লক:
যোগ করা এইচটিএমএল ব্লকে, নিচের প্রদত্ত কোডটি পেস্ট করুন। পরিবর্তন ' প্রস্থ ' ভিতরে ' ” অগ্রগতি বারের পছন্দসই শতাংশের জন্য ট্যাগ। একইভাবে, পরিবর্তন করুন ' অগ্রগতি-পাঠ্য 'তদনুসারে:
< div ক্লাস = 'কাস্টম-প্রগতি-বার' >< স্প্যান শৈলী = 'প্রস্থ: 80%' < / স্প্যান >
< div ক্লাস = 'প্রগতি-পাঠ্য' > 80% < / div >
< / div >
এর পরে, ' প্রকাশ করুন ওয়েবসাইটে পোস্ট আপলোড করতে বোতাম:
ধাপ 4: কাস্টম CSS যোগ করুন
পোস্টটি প্রকাশিত হলে, 'এ ক্লিক করুন' পোস্ট দেখুন 'বোতাম:
প্রিভিউতে, 'এ ক্লিক করুন কাস্টমাইজ করুন অগ্রগতি বারের জন্য স্টাইলিং যোগ করতে ” বোতাম:
পর্দার বাম দিকে একটি সম্পাদক মেনু প্রদর্শিত হবে। এখানে, নিচে স্ক্রোল করুন এবং ক্লিক করুন “ অতিরিক্ত CSS ' অধ্যায়:
অগ্রগতি বার স্টাইল করতে বক্সে নিম্নলিখিত CSS কোড পেস্ট করুন:
কাস্টম-প্রগতি-বার {পটভূমি- রঙ : #1a1a1a;
উচ্চতা : 30px;
প্যাডিং: 5px;
প্রস্থ : 500px;
মার্জিন: 5px 0 ;
সীমানা-ব্যাসার্ধ: 5px;
বক্স-ছায়া: 0 1px 5px #000 ইনসেট, 0 1px 0 # 444 ;
}
কাস্টম-প্রগতি-বার স্প্যান {
পটভূমি- রঙ : #0000FF;
প্রদর্শন: ইনলাইন-ব্লক;
float: বাম;
উচ্চতা : 100 %;
সীমানা-ব্যাসার্ধ: 3px;
বক্স-ছায়া: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) inset;
রূপান্তর: প্রস্থ .4s সহজ-ইন-আউট;
}
অগ্রগতি- পাঠ্য {
পাঠ্য- সারিবদ্ধ : অধিকার;
রঙ : সাদা;
মার্জিন: 0px;
}
ধাপ 5: পোস্টটি প্রকাশ করুন
অবশেষে, 'এ ক্লিক করুন প্রকাশ করুন এই পরিবর্তনগুলি সংরক্ষণ করতে পোস্ট করুন:
পৃষ্ঠাটি পুনরায় লোড করার পরে, ব্যবহারকারী দেখতে পারেন যে পোস্টে অগ্রগতি বারটি দেখা যেতে পারে:
কিভাবে প্লাগইন ব্যবহার করে ওয়ার্ডপ্রেস ওয়েবসাইটে প্রগ্রেস বার যোগ করবেন?
এই প্রদর্শনী একটি ওয়ার্ডপ্রেস ওয়েবসাইটে একটি অগ্রগতি বার যোগ করতে 'আলটিমেট ব্লক' প্লাগইন ব্যবহার করবে। একই কাজ করতে, নীচের প্রদত্ত পদক্ষেপগুলি অনুসরণ করুন।
ধাপ 1: একটি নতুন প্লাগইন যোগ করুন
ব্যবহারকারী ড্যাশবোর্ডে লগ ইন করার পরে, 'এ যান প্লাগইন > নতুন যোগ করুন 'পাশের মেনু বার থেকে বিকল্প:
ধাপ 2: আলটিমেট ব্লক প্লাগইন ইনস্টল করুন
আলটিমেট ব্লকের জন্য অনুসন্ধান করুন এবং ' প্রবেশ করুন ' চাবি. তারপর, নীচের নির্দেশিত 'এ ক্লিক করুন এখন ইন্সটল করুন 'বোতাম:
ধাপ 3: আলটিমেট ব্লক সক্রিয় করুন
প্লাগইন ইনস্টল হয়ে গেলে, 'এ ক্লিক করুন সক্রিয় করুন ওয়ার্ডপ্রেসে অগ্রগতি বার ব্যবহার করতে ” বোতাম:
ধাপ 4: একটি নতুন পোস্ট তৈরি করুন
একটি ওয়ার্ডপ্রেস পোস্টে একটি অগ্রগতি বার যোগ করতে, 'এ যান পোস্ট > নতুন যোগ করুন 'পাশের মেনু থেকে বিকল্প:
ধাপ 5: প্রোগ্রেস বার ব্লক যোগ করুন
পোস্টে একটি শিরোনাম এবং বিষয়বস্তু প্রদান করুন। এরপরে, চাপুন ' + একটি নতুন ব্লক যোগ করতে আইকন। মেনুতে, অনুসন্ধান করুন ' অগ্রগতি বার এবং ব্লক নির্বাচন করুন:
ধাপ 6: বারের জন্য শতাংশ সেট করুন
অগ্রগতি বারের জন্য শতাংশ সেট করতে, নীল স্লাইডার ব্যবহার করুন বা নীচের হাইলাইট বাক্সে শতাংশ লিখুন:
ধাপ 7: পোস্টটি প্রকাশ করুন
পোস্টটি সম্পূর্ণ হওয়ার পরে, 'এ ক্লিক করুন' প্রকাশ করুন ওয়েবসাইটে পোস্ট আপলোড করতে বোতাম:
ধাপ 8: পোস্টটি দেখুন
পোস্টটি প্রকাশ করার পরে, ওয়েবসাইটে পোস্টের পূর্বরূপ দেখতে 'পোস্ট দেখুন' বোতামে ক্লিক করুন:
এটি নীচের আউটপুটে দেখা যায় যে অগ্রগতি বারটি পোস্টে যোগ করা হয়েছে:
এটি ওয়ার্ডপ্রেসে একটি অগ্রগতি বার যুক্ত করার বিষয়ে।
উপসংহার
একটি ওয়ার্ডপ্রেস ওয়েবসাইটে একটি অগ্রগতি বার যোগ করতে, 'এ যান প্লাগইন > নতুন যোগ করুন 'পাশের মেনু থেকে বিকল্প। অনুসন্ধান করুন এবং ইনস্টল করুন ' চূড়ান্ত ব্লক ' প্লাগ লাগানো. ইনস্টলেশনের পরে, এটি সক্রিয় করুন। তারপর, 'এ যান পোস্ট > নতুন যোগ করুন এবং পোস্টের শিরোনাম এবং বিষয়বস্তু প্রদান করুন। এরপরে, 'এ ক্লিক করুন + 'আইকন এবং অনুসন্ধান করুন ' অগ্রগতি বার 'ব্লক। স্লাইডার ব্যবহার করে বা নম্বর প্রবেশ করে অগ্রগতি শতাংশ সেট করুন। এই নিবন্ধটি প্লাগইন সহ এবং ছাড়া ওয়ার্ডপ্রেসে একটি অগ্রগতি বার যুক্ত করার পদ্ধতিটি চিত্রিত করেছে।