چگونه یک منوی چسبان (Sticky Menu) در سایت داشته باشیم؟

آیا تاکنون در مورد این که برای داشتن یک منوی چسبان در سایت به چه صورت باید عمل کنید، و چه کارهایی باید انجام دهید، فکر کرده اید؟

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

منو (Menu) چیست؟

منو یا همان فهرست، یک بخش مهم هر وب سایت است. اگر دوست داشته باشید که کاربران به سادگی محتوای شما را پیدا کنند و به آن دسترسی یابند، حتماً باید آن را به صورت چسبان در وب سایت خود قرار دهید. ساخت منوهای چسبنده در وردپرس، به افزایش ضریب تبدیل سایت شما کمک می کند. منوی چسبان در وردپرس، سبب می شود که با اسکرول کردن به پایین صفحه، فهرست همیشه برای کاربر شما قابلیت دسترسی و مشاهده داشته باشد؛ و بر روی صفحۀ شما به صورت ثابت باقی بماند. ویکی دمی در این مقاله قصد دارد تا به آموزش کامل ساخت منو در وردپرس بپردازد. به عنوان مثالی از یک منو، به منوی (فهرست) همین مقاله، توجه کنید:

فهرست مطالب

• تعریف منوی چسبان 
• در چه مواقعی استفاده از منوی چسبان می تواند مفید باشد
• ساخت فهرست های چسبنده در وردپرس با استفاده از افزونه
• ساخت فهرست های چسبنده در وردپرس به صورت دستی
• اقدامات لازم در صورتی که فهرست چسبنده با عنوان خود وب سایت همپوشانی داشته باشد

حتما بخوانید: آموزش ساخت فروشگاه اینترنتی با وردپرس به صورت پی دی اف 

تعریف منوی چسبان

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

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

معمولاً منوی بالای صفحه دارای یک سری لینک‌ ها به بخش های مهم یک وب سایت می باشد. منوی چسبان باعث می شود که این لینک ها همواره در معرض دید کاربران قرار بگیرند. همچنین به تجربه ثابت شده است که این ثابت ماندن منو به همراه اسکرول صفحه، ضریب تبدیل سایت را نیز افزایش می دهد. به عنوان نمونه، اگر شما یک فروشگاه آنلاین داشته باشید، منوی اصلی شما می تواند شامل یک سری پیوندها به سبد خرید، طبقه بندی محصول و بازدید محصول باشد. لذا حرکت منو به همراه اسکرول وب سایت، باعث می شود که مشتری همواره در معرض خرید قرار داشته باشد و این یعنی یکی از رموز موفقیت وب سایت شمابه حساب می آید. برخی از قالب های موجود در وردپرس، منوی چسبان را ساپورت می کنند. شما فقط باید برای فعال کردن این قابلیت ها، در تنظیمات نمایش، قسمت” سفارشی سازی”  را مشاهده کنید. اگر قالب شما این قابلیت را نداشته باشد با آموزش ساخت Sticky Menu آشنا خواهید شد. 

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

ساده ترین راه برای ساخت منوهای چسبان در وردپرس، نصب افزونه وردپرسی است که ما در اینجا از افزونۀ 

Sticky Menu (or Anything!) on Scroll استفاده می کنیم. 

لذا در گام نخست، اقدام به نصب و فعال سازی Sticky Menu on Scroll کنید. بعد از مرحلۀ فعال سازی، به منظور پیکربندی تنظیمات افزونه، به صفحه تنظیمات  Sticky Menu (or Anything!) on Scroll بروید. 

گزینۀ مهم در این صفحه، Sticky element است که رده یا المان منویی که قصد دارید حالت چسبان به آن بدهید را باید وارد کنید. برای پیدا کردن این اِلمان یا ردۀ استفاده شده در منو باید از inspect tool استفاده شود.

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

حالا شما باید یک خط کد پیدا کنید که به فهرست وب سایت شما یا هِدِر آن ارتباط داشته دارد. این کد می تواند به این شکل باشد:

1<nav id =”site-navigation” class = “main-navigation” role = “navigation”>  10 قالب برتر وردپرس

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

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

برای وارد کردن ردۀ مربوط به فهرست در تنظیمات افزونه، باید روی دکمه “Save Changes“  واقع در پایین صفحه کلیک کنید.  حالا به صفحۀ وب سایت خود وارد می شوید و مشاهده می کنید که با اسکرول به سمت پایین صفحه، منوی شما ثابت باقی می ماند.

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

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

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

به خاطر داشته باشید که پس از اعمال هر تغییر در گزینه های خود، بر روی دکمۀ Save Changes کلیک کنید تا تغییرات شما اجرایی شوند.

ساخت فهرست های چسبنده در وردپرس به صورت دستی

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

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

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

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

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

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

Site-branding را با ردۀ CSS با رده سربرگ وب سایت خود جایگزین کنید. اینک مشاهده می کنید که فهرست چسبان با وب سایت شما همپوشانی ندارد.

یک پیشنهاد ویژه از سوی ویکی دمی  برترین افزونه های کش وردپرس (سال 2019)

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

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