آیا تا به حال توجه کرده اید که بیشتر وب سایت های محبوب در حال استفاده از منوی چسبان هستند؟ به طور معمول، منو های و فهرست ها در بالای سایت نمایش داده میشوند و هنگامی که کاربران به پایین سایت بروند ناپدید میشوند. منو های چسبان وقتی که کاربران به پایین سایت بروند به صورت شناور در میایند و همیشه در صفحه قابل مشاهده اند. در این مقاله، ما به شما نشان خواهیم داد که چگونه به آسانی یک منو شناور در وردپرس ایجاد کنید.
روش اول: اضافه کردن منو شناور چسبان با استفاده از افزونه
این روش آسان تر از سایر روش ها است و برای همه کاربران توصیه میشود.
اگر هنوز فهرست های سایت خود را راه اندازی نکردید اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Sticky Menu است.
پس از فعال سازی این افزونه، باید به صفحه تنظیمات آن برای پیکربندی تنظیمات افزونه بروید.
اول از همه باید شناسه CSS منو شناور در وردپرسی که میخواهید آن را به حالت چسبان یا شناور درآورید وارد کنید.
برای پیدا کردن شناسه CSS که منو شما استفاده کرده است باید از ابزار inspect مرورگرتان استفاده کنید.
به سادگی به وب سایت خود بروید و موس خود را به سمت فهرست ببرید. سپس، باید روی آن راست کلیک کنید و Inspect را از منو مرورگرتان انتخاب کنید.
این کار باعث میشود که صفحه مرورگرتان به دو قسمت تقسیم شود و قادر خواهید بود منبع کد منوی خود را ببینید. باید یک خط کد مانند کد زیر را پیدا کنید:
>nav id=”site-navigation” class=”main-navigation” role=”navigation<”
در این مثال، شناسه CSS منو ناوبری ما site-navigation میباشد.
به تنظیمات افزونه بروید و شناسه CSS منو ناوبری را در آن مانند این #site-navigation وارد کنید.
تنظیمات بعدی در صفحه تنظیمات افزونه، تعیین فاصله بین بالای صفحه و منوی شناور در وردپرس است. اگر منوی شما با عنصری که نمی خواهید پنهان شود هم پوشانی دارد، می توانید از این تنظیمات استفاده کنید. اگر اینگونه نیست، پس این تنظیمات را نادیده بگیرید.
پس از آن باید روی چک باکس کنار گزینه: ٬ برای نوار مدیریت تیک بزنید ٬ کلیک کنید. این کار به افزونه اجازه میدهد تا کمی فضای برای نوار مدیریت وردپرس اضافه کند که فقط برای کاربران وارد شده اضافه میشود.
تنظیمات بعدی در صفحه تنظیمات به شما اجازه می دهد تا اگر یک کاربر با استفاده از یک صفحه کوچک مانند دستگاه موبایل سایت شما را بازدید میکند منو را غیر شناور یا غیر چسبان کنید.
می توانید شکل ظاهری سایت را در دستگاه های تلفن همراه یا تبلت ها آزمایش کنید.
فراموش نکنید که روی دکمه ذخیره تنظیمات برای ذخیره تغییرات کلیک کنید.
شما می توانید اکنون برای دیدن منو شناور چسبان خود در عمل، به سایت خود سر بزنید.
روش دوم: اضافه کردن منو شناور در وردپرس به صورت دستی
این روش شما را ملزم میکند که کد CSS سفارشی را به قالب خود اضافه کنید.
اول از همه باید به قسمت ظاهر » سفارشی سازی در پیشخوان وردپرس خود برای اجرای سفارشی ساز تم بروید.
روی CSS اضافی ٬ در پنل سمت راست کلیک کنید و سپس این کد CSS را اضافه کنید.
#site-navigation را با شناسه CSS منو ناوبری خود جایگزین کنید و روی دکمه ذخیره و انتشار کلیک کنید.
شما میتوانید اکنون برای دیدن منو ناوبری شناور چسبان خود در عمل، به سایت خود سر بزنید.
اگر منو شما به شکل معمولی بعد از سرصفحه سایت ظاهر شد، این کد CSS میتواند با عنوان و سرصفحه سایت همپوشانی داشته باشد.
این مسئله به راحتی می تواند با اضافه کردن یک حاشیه به قسمت سرصفحه شما با استفاده از بعضی کد های CSS مانند این تنظیم شود:
| 1
2 3 |
.site-branding {
margin-top:60px; } |
site-branding را با کلاس CSS قسمت سرصفحه خود جایگزین کنید.
امیدواریم این مقاله به شما در اضافه کردن منو شناور در وردپرس کمک کرده باشد.
