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

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

منو چسبنده چیست و چه اهمیتی دارد؟

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

معمولاً، منو چسبنده بالای پیمایش حاوی لینک هایی به مهمترین بخش های یک وب سایت است. یک منو چسبنده باعث می شود که این پیوندها همیشه قابل مشاهده باشند و این موضوع کاربران را از پیمایش به سمت بالا باز می دارد.

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

برخی از بهترین تم های وردپرس پشتیبانی داخلی برای منو چسبنده را دارند. برای فعال کردن این ویژگی، به سادگی تنظیمات قالب خود را در بخش «تم» »سفارشی کنید.

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

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

این روش بسیار ساده است و بهترین راه حل برای کاربران وردپرس و همچنین مبتدیان می باشد.

برای این منظور باید Sticky Menu را در افزونه Scroll نصب و فعال کنید.

پس از فعال سازی، برای پیکربندی تنظیمات افزونه، باید از صفحه Settings »Sticky Menu این مورد را انجام دهید.

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

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

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

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

<nav id="site-navigation" class="main-navigation" role="navigation">

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

در این حالت، شناسه CSS منوی ناوبری ما site-navigation است.

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

فراموش نکنید که بر روی دکمه "Save Changes" در پایین صفحه کلیک کنید.

اکنون، منوی را به طور مستقیم در وب سایت وردپرس خود بررسی کنید. همانطور که به پایین پیمایش می کنید باید بالای صحفه ثابت باقی بماند:

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

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

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

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

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

روش 2: دستی منوی ناوبری Sticky Floating را اضافه کنید

این روش نیاز دارد که کد CSS سفارشی را به سورس کد اضافه کنید اضافه کنید.

ابتدا باید از Appearance »Customize (تنظیمات شخصی) برای راه اندازی نرم افزار تنظیم کننده قالب وردپرس استفاده کنید.

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

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

نکته: کدهای گفته شده، منوی ناوبری با پس زمینه سیاه ایجاد می کند. اگر رنگ دیگری می خواهید، شماره کنار پس زمینه را تغییر دهید. به عنوان مثال، با استفاده از پس زمینه: #ffffff پس زمینه منوی سفید به شما می دهد.

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

اگر منوی پیمایش شما بجای بالای سر آن در زیر عنوان سایت ظاهر شود ، چه می کنید؟ در این صورت ، این کد CSS می تواند عنوان سایت و عنوان را همپوشانی داشته باشد یا قبل از پیمایش کاربر بسیار نزدیک به آن ظاهر شود:

با افزودن یک حاشیه به قسمت سربرگ با استفاده از چند کد CSS اضافی، این کار به راحتی قابل تنظیم است:

.site-branding {
margin-top:60px !important;
}

مارک سایت را با کلاس CSS منطقه سربرگ خود جایگزین کنید. اکنون، قبل از اینکه کاربر به پایین پیمایش کند، منوی ناوبری چسبنده دیگر هدر شما را نمی پوشاند:

موفق و پیروز باشید.