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

[ad_1]

اخیراً ، یکی از کاربران ما از ما پرسیده است که چگونه می توان یک منوی ناوبری چسبناک برای سایت خود ایجاد کرد؟

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

در این مقاله ، ما به شما نحوه ایجاد یک منوی ناوبری شناور چسبنده در وردپرس را نشان خواهیم داد.

منوی ناوبری Sticky Floating چیست؟

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

در اینجا یک منوی مهم وجود دارد. ما قصد داریم نحوه ایجاد یک منو دقیقاً مانند این را برای سایت خود به شما نشان دهیم:

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

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

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

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

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

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

این ساده ترین روش است. ما آن را برای همه کاربران وردپرس ، به ویژه برای مبتدیان ، توصیه می کنیم.

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

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

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

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

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

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

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

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

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

اگر در تلاش برای یافتن آن هستید ، مکان نما را روی خطوط مختلف کد در بخش Inspect قرار دهید. وقتی خط کد مناسبی داشته باشید ، منوی ناوبری کاملاً برجسته می شود:

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

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

فراموش نکنید که بر روی دکمه “ذخیره تغییرات” در پایین صفحه کلیک کنید.

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

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

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

در اینجا ، می بینید که نوار مدیر سایت آزمایش ما به درستی بالای منوی مهم نمایش داده می شود:

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

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

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

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

این روش شما را ملزم می کند که کد CSS سفارشی را به طرح زمینه خود اضافه کنید. ما آن را برای مبتدیان توصیه نمی کنیم.

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

ابتدا باید بازدید کنید ظاهر »سفارشی کنید برای راه اندازی قالب وردپرس.

بعد ، روی “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;
}

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

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

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

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

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

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

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

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

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

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

[ad_2]

منبع محتوا