آموزش کامل ایجاد منوهای چسبناک در وردپرس

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

در این سری از آموزش های رایگان طراحی سایت با نحوه ایجاد منوی چسبنده در وردپرس آشنا می شویم.

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

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

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

برخی از تم های وردپرس از منوهای چسبنده پشتیبانی می کنند. برای فعال کردن این ویژگی، باید در تنظیمات نمایشگر به دنبال “Customization” باشید. اگر قالب شما این ویژگی را ندارد، در مورد نحوه ایجاد یک منوی چسبنده بیشتر خواهید آموخت.

ایجاد لیست های چسبنده در وردپرس با افزونه ها

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

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

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

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

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

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

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

در تصویر بالا مشاهده می کنید که شناسه دایرکتوری سایت “site-navigation” است. سپس این آیدی را با هشتگ در تنظیمات افزونه قرار دهید.یک منوی چسبناک ایجاد کنید

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

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

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

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

توصیه می کنیم گزینه «Check admin bar» را علامت بزنید. این گزینه به افزونه اجازه می دهد تا فضای کافی برای نوار مدیریت وردپرس ایجاد کند، به عبارت دیگر پیشخوان وردپرس به درستی بالای منوی نوار مدیریت نمایش داده می شود.

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

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

ایجاد یک لیست چسبنده به صورت دستی در وردپرس

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

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

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

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

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

اکنون به وب سایت آنها بروید و به دنبال منوی چسبنده بگردید. یک لیست چسبنده با استفاده از CSS ایجاد می شود.

اگر لیست چسبنده با عنوان سایت همپوشانی داشته باشد چه؟

منوی چسبنده سایت ممکن است همپوشانی داشته باشد و با عنوان آن تداخل داشته باشد، در این صورت با افزودن یک حاشیه به هدر با استفاده از کدهای CSS اضافی، می توان آن را به راحتی تنظیم کرد:

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

یک منوی چسبناک ایجاد کنید