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

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

1 – افزونه وردپرس myStickymenu

پلاگین myStickymenu یا منوی چسبنده من یکی از افزونه های محبوب وردپرس برای ایجاد منو های چسبنده است. این افزونه در ابتدا با هدف چسبنده کردن منوی قالب Twenty Thirteen ساخته شده بود ولی علیرغم این مسئله، با توجه به نوع تنظیماتی که این افزونه در اختیار کاربر قرار میدهد، میتوان از آن در هر قالب استاندارد وردپرس دیگری نیز جهت ایجاد منوهای چسبنده استفاده کرد. از آنجایی که این افزونه به طور پیشفرض برای قالب Twenty Thirteen ساخته شده بوده بنابراین در قالب شما به دنبال کلاس .navbar میگردد تا این عنصر را به منویی چسبنده تبدیل کند. اگر این حالت برای شما ایده آل نیست و قالب شما از این کلاس برای منوی بالای اش استفاده نمیکند، برای تغییر این رفتار کافی است در تنظیمات قالب، کلاس یا ID منوی خود را در تنظیمات این افزونه جایگزین کلاس .navbar کنید. همچنین در تنظیمات افزونه این امکان را نیز در اختیار دارید که اندازه، رنگ پس زمینه، مقدار نمایانی، z-index و سایر ویژگی های منوی چسبنده ی خود را نیز به دلخواه تنظیم کنید.

2 – Sticky Menu (or Anything!) on Scroll

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

3 – افزونه Sticky Header by ThematoSoup

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

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