আপনার কি আপনার ওয়ার্ডপ্রেস নেভিগেশন মেনুর প্রথম এবং শেষ আইটেমগুলিতে কাস্টম স্টাইলিং যুক্ত করতে হবে?
আপনি প্রথম এবং শেষ মেনু আইটেমগুলিতে একটি কাস্টম CSS ক্লাস যোগ করতে পারেন, কিন্তু যদি মেনুটি পুনরায় সাজানো হয়, তাহলে সেই আইটেমগুলি আর প্রথম এবং শেষ হবে না।
এই নিবন্ধে, আমরা আপনাকে দেখাব কিভাবে একটি .first এবং .st ক্লাস যোগ করতে হয় যা প্রথম এবং শেষ মেনু আইটেমগুলিকে স্টাইল করবে এমনকি মেনু আইটেমগুলি পুনরায় সাজানো হলেও৷
কেন প্রথম এবং শেষ নেভিগেশন আইটেম ভিন্নভাবে স্টাইল?
অতীতের একটি কাস্টম ডিজাইন প্রকল্পে, আমাদের একটি ওয়ার্ডপ্রেস ওয়েবসাইটের নেভিগেশন মেনু আইটেমগুলিতে কিছু কাস্টম স্টাইলিং যুক্ত করতে হবে। এই ডিজাইনের জন্য বিশেষভাবে প্রথম মেনু আইটেম এবং শেষ মেনু আইটেমের জন্য আলাদা স্টাইলিং প্রয়োজন।
এখন আমরা সহজেই মেনু সম্পাদনা করতে পারি এবং প্রথম এবং শেষ মেনু আইটেমে একটি কাস্টম CSS ক্লাস যোগ করতে পারি। কিন্তু যেহেতু আমরা একটি ক্লায়েন্টের কাছে প্রকল্পটি সরবরাহ করছিলাম, আমাদের সমাধানটি কাজ করতে হয়েছিল যদিও তারা মেনুগুলির ক্রম পুনর্বিন্যাস করে।
তাই আমরা পরিবর্তে ফিল্টার ব্যবহার করার সিদ্ধান্ত নিয়েছি।
এই টিউটোরিয়ালে, আমরা আপনাকে আপনার নেভিগেশন মেনুর প্রথম এবং শেষ আইটেম স্টাইল করার দুটি উপায় দেখাব। আপনি নীচের তালিকা থেকে আপনার পছন্দের পদ্ধতি চয়ন করতে পারেন:
- পদ্ধতি 1: একটি ফিল্টার ব্যবহার করে প্রথম এবং শেষ ক্লাস যোগ করা
- পদ্ধতি 2: CSS নির্বাচক ব্যবহার করে প্রথম এবং শেষ আইটেম স্টাইল করা
পদ্ধতি 1: একটি ফিল্টার ব্যবহার করে প্রথম এবং শেষ ক্লাস যোগ করা
আপনার প্রথম এবং শেষ নেভিগেশন মেনু আইটেমগুলিকে ভিন্নভাবে স্টাইল করার প্রথম উপায় হল আপনার থিমে একটি ফিল্টার যোগ করা।
আপনাকে আপনার থিমের functions.php ফাইলে কোড যোগ করতে হবে। আপনি যদি আগে এটি না করে থাকেন, তাহলে ওয়ার্ডপ্রেসে কোড কপি এবং পেস্ট করার বিষয়ে আমাদের গাইড দেখুন।
আপনাকে যা করতে হবে তা হল আপনার থিমের functions.php ফাইলটি খুলুন তারপর নিম্নলিখিত কোড স্নিপেটটি পেস্ট করুন:
function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
এটি আপনার প্রথম এবং শেষ নেভিগেশন মেনু আইটেমগুলির জন্য যথাক্রমে .first এবং .st CSS ক্লাস তৈরি করে। আপনি মেনু আইটেম স্টাইল করতে ঐ ক্লাস ব্যবহার করতে পারেন.
বিস্তারিতভাবে এটি কীভাবে করবেন তা শিখতে, ওয়ার্ডপ্রেস নেভিগেশন মেনুগুলি কীভাবে স্টাইল করবেন সে সম্পর্কে আমাদের গাইড দেখুন।
এই টিউটোরিয়ালটির জন্য, আমরা আমাদের থিমের style.css স্টাইলশীটে প্রথম এবং শেষ মেনু আইটেমগুলিকে সহজভাবে বোল্ড করতে নিম্নলিখিত মৌলিক CSS বিন্যাসগুলি যুক্ত করব:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
আমরা আমাদের ডেমো সাইটে কোড যোগ করার আগে এবং পরে এখানে আপনি স্ক্রিনশট দেখতে পারেন।
পদ্ধতি 2: CSS নির্বাচক ব্যবহার করে প্রথম এবং শেষ আইটেম স্টাইল করা
প্রথম এবং শেষ মেনু আইটেম আলাদাভাবে স্টাইল করার দ্বিতীয় উপায় হল CSS নির্বাচক ব্যবহার করা। এই পদ্ধতিটি সহজ, তবে এটি ইন্টারনেট এক্সপ্লোরারের মতো কিছু পুরানো ব্রাউজারে কাজ নাও করতে পারে।
এই পদ্ধতি অনুসরণ করার জন্য আপনাকে আপনার থিমের স্টাইল শীটে বা ওয়ার্ডপ্রেস থিম কাস্টমাইজারের ‘অতিরিক্ত CSS’ বিভাগে কোড যোগ করতে হবে।
আপনি যদি আগে এটি না করে থাকেন, তাহলে কীভাবে সহজেই আপনার ওয়ার্ডপ্রেস সাইটে কাস্টম সিএসএস যুক্ত করবেন সে সম্পর্কে আমাদের গাইড দেখুন।
আপনার থিমের style.css ফাইল সম্পাদনা করে বা নেভিগেট করে শুরু করা উচিত চেহারা » কাস্টমাইজ করুন এবং ‘অতিরিক্ত CSS’-এ ক্লিক করুন।
এর পরে, আপনাকে নিম্নলিখিত কোড স্নিপেটটি পেস্ট করতে হবে এবং তারপরে আপনার পরিবর্তনগুলি সংরক্ষণ বা প্রকাশ করতে হবে।
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
মনে রাখবেন যে আপনাকে নেভিগেশন মেনুর আসল আইডি দিয়ে ‘yourmenuid’ প্রতিস্থাপন করতে হবে। নির্বাচকরা ‘প্রথম-শিশু’ এবং ‘শেষ-সন্তান’ একটি উপাদান নির্বাচন করে যদি এটি তার পিতামাতার প্রথম এবং শেষ সন্তান হয়, যা নেভিগেশন মেনু।
উদাহরণস্বরূপ, আমরা আমাদের ডেমো সাইটে প্রথম এবং শেষ নেভিগেশন মেনু আইটেমগুলিকে বোল্ড করতে এই কোডটি ব্যবহার করেছি:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে ওয়ার্ডপ্রেস নেভিগেশন মেনুতে .first এবং .st ক্লাস যোগ করতে শিখতে সাহায্য করেছে।
আপনি কীভাবে 50 টি সাধারণ ওয়ার্ডপ্রেস ত্রুটি ঠিক করবেন তা শিখতে চাইতে পারেন, বা আমাদের সেরা ড্র্যাগ এবং ড্রপ পৃষ্ঠা নির্মাতাদের তালিকাটি দেখুন।
আপনি যদি এই নিবন্ধটি পছন্দ করেন, তাহলে অনুগ্রহ করে আমাদের সাবস্ক্রাইব করুন ইউটিউব চ্যানেল ওয়ার্ডপ্রেস ভিডিও টিউটোরিয়াল জন্য. এছাড়াও আপনি আমাদের খুঁজে পেতে পারেন টুইটার এবং ফেসবুক.
পোস্টটি কীভাবে ওয়ার্ডপ্রেস মেনু আইটেমগুলিতে প্রথম এবং শেষ সিএসএস ক্লাস যুক্ত করবেন তা প্রথমে WPBeginner-এ প্রদর্শিত হবে।
