آیا نیاز به اضافه کردن استایل سفارشی به اولین و آخرین موارد منوی ناوبری وردپرس خود دارید؟
شما می‌توانید به سادگی یک کلاس CSS سفارشی را به اولین و آخرین آیتم‌های منو اضافه کنید، اما اگر فهرست مجدداً مرتب شود، آن موارد دیگر اولین و آخرین نخواهند بود.
در این مقاله، به شما نشان خواهیم داد که چگونه یک کلاس .first و .. را اضافه کنید که به اولین و آخرین آیتم های منو استایل می دهد، حتی اگر آیتم های منو دوباره مرتب شوند.
چرا اولین و آخرین آیتم های پیمایش را متفاوت طراحی کنید؟
در یک پروژه طراحی سفارشی گذشته، ما نیاز داشتیم که سبک سفارشی را به آیتم های منوی پیمایش یک وب سایت وردپرس اضافه کنیم. این طراحی به طور خاص به استایل متفاوتی برای اولین آیتم منو و آخرین آیتم منو نیاز داشت.
اکنون می‌توانیم به راحتی منو را ویرایش کنیم و یک کلاس 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');
این کلاس‌های CSS .first و .last را برای اولین و آخرین آیتم‌های منوی پیمایش شما ایجاد می‌کند. می توانید از آن کلاس ها برای استایل دادن به آیتم های منو استفاده کنید.
برای یادگیری نحوه انجام این کار با جزئیات، به راهنمای ما در مورد نحوه استایل کردن منوهای ناوبری وردپرس مراجعه کنید.
برای این آموزش، قالب‌بندی اصلی CSS زیر را به شیوه نامه style.css موضوع خود اضافه می‌کنیم تا به سادگی اولین و آخرین آیتم‌های منو را پررنگ کند:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
در اینجا می توانید اسکرین شات هایی را قبل و بعد از اضافه کردن کد به سایت دمو خود مشاهده کنید.
روش 2: استایل دادن به اولین و آخرین موارد با استفاده از انتخابگرهای CSS
راه دوم برای استایل متفاوت به آیتم های منوی اول و آخر استفاده از انتخابگرهای 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 و .last را به منوهای پیمایش وردپرس اضافه کنید.
همچنین ممکن است بخواهید نحوه رفع 50 خطای رایج وردپرس را بیاموزید یا لیست ما را از بهترین سازندگان صفحه کشیدن و رها کردن بررسی کنید.
اگر این مقاله را دوست داشتید، لطفا در ما مشترک شوید کانال یوتیوب برای آموزش تصویری وردپرس. شما همچنین می توانید ما را در توییتر و فیس بوک.
