دسته بندی
خدمات ما
چطور یک کلاس سفارشی به آیتم‌های منوی وردپرس اضافه کنیم؟
در اکثر موارد برای تغییر مدل منوهای متحرک وردپرس، می‌توانید از طریق کنترل پنل بخش ادمین، به راحتی کلاس‌های CSS را اضافه کنید. ولی راه ساده‌ای برای اضافه کردن یک کلاس سفارشی به یکی از منوهای وردپرس در یک پست یا صفحه وجود ندارد. به همین دلیل در این مطلب قصد داریم روش اضافه کردن یک کلاس سفارشی به یکی از آیتم‌های منوی وردپرس را با هم بررسی کنیم.
روش اضافه کردن کلاس سفارشی به آیتم‌های منوی وردپرس
برای اضافه کردن کلاس سفارشی به یکی از آیتم‌های منو، کافی است کد زیر را در فایل functions.php تم خود بگذارید:
//Filtering a Class in Navigation Menu Item
add_filter(‘nav_menu_css_class’ , ‘special_nav_class’ , 10 , 2);
function special_nav_class($classes, $item){
if(is_single() && $item->title == ‘Blog’){
$classes[] = ‘current-menu-item’;
}
return $classes;
}
این کد خیلی ساده چک می‌کند که آیا صفحه‌ی مورد نظر شما یک پست باشد و همچنین عنوان آیتم منو هم بلاگ باشد. اگر معیارها با هم همسان باشند، یک کلاس Current-menu-item به وردپرس اضافه می‌کند که ما برای فعال کردن طراحی مورد نظر خود به آن نیاز داریم. در واقع با این کار می‌خواهیم زمانی که یک کاربر از یک پست خاص بازدید می‌کند، یکی از آیتم‌های منو را هایلایت کنیم. یا این کار کاربران این پست را به عنوان بخشی از بلاگ مشاهده می‌کنند. شاید این کار به نظرتان غیرممکن باشد، ولی با اضافه کردن کد مورد نظر می‌توانید این طراحی را انجام دهید.
نکته: همچنین می‌توانید از رشی ساده‌تر استفاده کنید و با اضافه کردن کد زیر کلاس CSS را به آیتم‌های منوی خود اضافه کنید:
.single #navigation .leftmenublog div{display: inline-block !important;}
جمع بندی
درواقع کاری که ما انجام می‌دهیم این است که یک بخش اضافی به نشانگر منو اضافه کنیم. این نشانگر فقط زمانی نمایش داده می‌شود که کلاس مورد نظر انتخاب شده باشد و یا کاربر موس را روی آن نگه دارد. در غیر این صورت این نشانگر ظاهر نمی‌شود. در نتیجه با استفاده از روش گفته شده، ما این کار را فقط برای یکی از آیتم‌های منو انجام می‌دهیم.
منبع
