نحوه ایجاد یک منوی ناوبری شناور مهم در وردپرس

آیا توجه کرده اید که بسیاری از وب سایت های معروف اکنون از منوی ناوبری چسبنده استفاده می کنند. به طور معمول ، منوهای ناوبری در بالا نمایش داده می شوند و با پایین رفتن کاربران از بین می روند. منوهای ناوبری مهم هنگام حرکت کاربران به پایین شناور می شوند و همیشه در صفحه مشاهده می شوند. در این مقاله ، ما به شما نشان خواهیم داد که چگونه به راحتی یک منوی ناوبری شناور چسبنده در وردپرس ایجاد کنید.

How to Create Sticky Floating Navigation Menu in WordPress

روش 1: با استفاده از پلاگین منوی ناوبری شناور مهم را اضافه کنید h4>

این روش آسان تر است و برای همه کاربران توصیه می شود. اگر هنوز منوهای ناوبری را تنظیم نکرده اید ، لطفاً به راهنمای ما در نحوه افزودن منوی پیمایش در وردپرس .

اولین کاری که باید انجام دهید این است که منوی مهم (یا هر چیزی!) در پلاگین Scroll . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .

پس از فعال سازی ، برای پیکربندی تنظیمات افزونه باید به صفحه تنظیمات »منوی مهم (یا هر چیز دیگری!) بروید.

Sticky Menu plugin setting

ابتدا باید CSS شناسه منوی پیمایش که می خواهید چسبناک باشد.

شما باید از ابزار بازرسی برای یافتن شناسه CSS مورد استفاده در منوی پیمایش شما.

به سادگی از وب سایت خود بازدید کنید و موس را به منوی پیمایش ببرید. پس از آن ، باید از فهرست مرورگر خود راست کلیک کرده و Inspect را انتخاب کنید.

Inspect tool

با این کار صفحه مرورگر شما شکافته می شود و شما می توانید کد منبع منوی پیمایش خود را مشاهده کنید. باید یک خط کد مانند این پیدا کنید:

در این مثال ، شناسه CSS منوی پیمایش ما سایت-ناوبری است.

پیش بروید و شناسه CSS ناوبری را در تنظیمات افزونه مانند این # site-navigation وارد کنید.

گزینه بعدی در صفحه تنظیمات پلاگین این است که فضای بین بالای صفحه خود و منوی ناوبری مهم را تعیین کنید. اگر منوی شما با عنصری که نمی خواهید پنهان شود همپوشانی دارد ، می توانید از این تنظیمات استفاده کنید. در غیر اینصورت ، این تنظیم را نادیده بگیرید.

بعد از آن باید روی کادر تأیید کنار گزینه: "Check for Admin Bar" کلیک کنید. این به پلاگین اجازه می دهد تا فضای کمی برای نوار مدیریت وردپرس که فقط برای کاربران وارد شده اضافه می شود.

گزینه بعدی در صفحه تنظیمات به شما این امکان را می دهد که اگر کاربری با استفاده از صفحه کوچکتر مانند دستگاه تلفن همراه به وب سایت شما مراجعه می کند ، از منوی پیمایش استفاده کنید.

می توانید شکل ظاهری آن را در دستگاه های تلفن همراه یا رایانه لوحی آزمایش کنید. اگر آن را دوست ندارید ، می توانید 780 پیکسل برای این گزینه اضافه کنید.

فراموش نکنید که برای ذخیره تغییرات روی دکمه تنظیمات ذخیره کلیک کنید.

اکنون می توانید برای دیدن منوی ناوبری شناور چسبنده خود به وب سایت خود مراجعه کنید.

Sticky menu

روش 2: به صورت دستی منوی ناوبری شناور مهم را اضافه کنید h4>

این روش نیاز دارد که کد CSS سفارشی را به طرح زمینه خود اضافه کنید. اگر قبلاً این کار را نکرده اید ، لطفاً به راهنمای ما در نحوه افزودن راحت css سفارشی به سایت وردپرس خود .

برای راه اندازی برنامه تنظیم کننده زمینه ابتدا باید از Appearance »Customize بازدید کنید.

Adding custom CSS in WordPress theme

روی "Additional CSS" در قسمت سمت چپ کلیک کنید و سپس این کد CSS را اضافه کنید.

# سایت-ناوبری {
    پس زمینه: #fff؛
    ارتفاع: 60 پیکسل
    z-index: 170؛
    حاشیه: 0 خودکار؛
    border-bottom: 1px solid #dadada؛
    عرض: 100٪
    موقعیت: ثابت
    بالا: 0؛
    سمت چپ: 0؛
    راست: 0؛
    text-align: مرکز؛
}

# site-navigation را با شناسه CSS منوی پیمایش خود جایگزین کنید و بر روی دکمه ذخیره و انتشار کلیک کنید.

اکنون می توانید برای دیدن منوی ناوبری شناور چسبنده خود به وب سایت خود مراجعه کنید.

اگر منوی پیمایش شما به طور معمول بعد از سرصفحه سایت ظاهر می شود ، این کد CSS می تواند عنوان و هدر سایت را تداخل دهد.

با افزودن یک حاشیه به قسمت سرصفحه خود با استفاده از برخی CSS مانند این ، به راحتی می توانید این کار را تنظیم کنید:

مارک سایت.
margin-top: 60px؛
}

سایت مارک تجاری را با کلاس CSS منطقه سرصفحه خود جایگزین کنید.

امیدواریم این مقاله به شما کمک کند منوی ناوبری شناور چسبنده را به سایت وردپرس خود اضافه کنید. همچنین ممکن است بخواهید لیست ما 15 بهترین آموزش برای تسلط بر منوهای پیمایش وردپرس .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/.

دیدگاهتان را بنویسید