Sticky Menu (or Anything) on Scroll افزونه فهرست چسبنده وردپرس
معمولاً فهرست های ناوبری در بالای سایت نشان داده می شوند و وقتی کاربر به سمت پایین صفحه اسکرول می کند، ناپدید می شوند. فهرست های چسبنده فهرست هایی هستند که با اسکرول کردن کاربر همچنان شناور باقی مانده و همیشه روی صفحه قابل مشاهده هستند. اگر می خواهید فهرست ناوبری سایت خود را چسبنده کنید، افزونه Sticky Menu (or Anything) on Scroll این کار را برای شما انجام می دهد.
امروزه فهرست ناوبری و هدرهای چسبنده به عنوان یک سبک مدرن شناخته می شود و بسیاری از برندهای معروف از این نوع فهرست ها برای سایت خود استفاده می کنند.
سایت هایی مانند Sony، Facebook، Google+، CNN، Nike و Adidas از فهرست های چسبنده در سایت خود استفاده کرده و ظاهر مدرنی ایجاد می کنند.
شما هم به صورت دستی و هم با استفاده از افزونه ها می توانید منوهای چسبنده در سایت وردپرس خود ایجاد کنید. افزونه های زیادی در مخزن وردپرس وجود دارند که فهرست چسبنده را برای سایت وردپرس شما ایجاد می کنند.
افزونه Sticky Menu (or Anything) on Scroll یکی از بهترین افزونه های هدر و فوتر وردپرس است که با استفاده از آن می توانید فهرست های چسبنده در سایت وردپرس خود بسازید.
اما فهرست و هدر چسبنده علاوه بر ایجاد ظاهر شیک و مدرن، مزایای دیگری نیز دارند. در این مقاله ابتدا در مورد مزایا و معایب استفاده از منوی چسبنده توضیح داده سپس افزونه Sticky Menu (or Anything) on Scroll را مورد بررسی قرار داده و نحوه استفاده از آن را آموزش می دهیم.
مزایا و معایب استفاده از فهرست چسبنده
برخی از مزایای استفاده از فهرست چسبنده عبارتند از:
- مرور آسان تر: فهرست های چسبنده به بازدید کنندگان اجازه می دهند تا به سرعت و به راحتی در صفحات وب شما حرکت کنند. بازدیدکنندگان می توانند موس خود را روی فهرست حرکت داده و روی لینکی که می خواهند در سایت شما بازدید کنند، کلیک نمایند. این امر بازدید کننده را به ماندن طولانی تر ترغیب می کند که به طور خودکار باعث جذب کاربر و بهبود تبدیل ها در سایت وردپرس شما می شود.
- برند سازی بهتر: شما می توانید از فهرست چسبنده افزونه Sticky Menu (or Anything) on Scroll برای نمایش لوگو یا هر محتوای تصویری دیگری در هدر سایت خود استفاده کنید که باعث تبلیغ برند شما و شناخته شدن بیشتر آن می شود.
- مرورهای بیشتر صفحه در هر بازدید: با کمک فهرست چسبنده، می توانید مرور صفحات را افزایش دهید، زیرا بازدید کنندگان می توانند به سرعت و به راحتی به صفحات مختلف سایت شما پرش کنند.
- بونس ریت کمتر: یک منوی ساده، تمیز و آسان برای پیمایش بطور خودکار میزان بونس ریت سایت شما را کاهش می دهد.
البته استفاده از منوهای چسبنده معایبی نیز دارد که عبارتند از:
- محدودیت با برخی طرح بندی ها: هنگام کار با فهرست های چسبنده ممکن است با برخی محدودیت ها در طراحی صفحات مواجه شوید. این بدان معناست که هنگام ایجاد منوهای چسبنده برای سایت وردپرس، گزینه های طراحی زیادی نخواهید داشت.
- امکان ایجاد اختلال: باید فهرست ناوبری چسبنده خود را به دقت طراحی کنید، در غیر این صورت می تواند بازدیدکنندگان بالقوه شما را منحرف کند. اطمینان حاصل کنید که فهرست ناوبری شما ساده و قابل دسترسی است و با محتوای اصلی سایت رقابت نمی کند.
آموزش افزونه Sticky Menu (or Anything) on Scroll و ساخت فهرست چسبنده در وردپرس
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس به مسیر تنظیمات » Sticky Menu (or Anything!) بروید.
تنظیمات اصلی افزونه Sticky Menu (or Anything) on Scroll
Sticky Element: در این قسمت باید CSS ID یا CSS Class فهرست ناوبری که می خواهید چسبنده شود را وارد کنید. البته می توانید المان های دیگری غیر از فهرست که می خواهید چسبنده باشند مانند نوار کناری سایت، بنر تبلیغات و غیره را در این قسمت وارد کنید.
شما می توانید از ابزار inspect مرورگر برای پیدا کردن CSS ID فهرست ناوبری خود استفاده کنید.
برای این کار صفحه وب سایت خود را باز کرده و موس را روی فهرست ناوبری ببرید. سپس کلیک راست کرده و گزینه inspect را انتخاب کنید.
صفحه مرورگر شما تقسیم شده و می توانید کد منبع فهرست ناوبری خود را مشاهده کنید. باید خطی مانند شکل زیر را پیدا کنید.
در این مثال ID فهرست ناوبری site-navigation است.
حال که آی دی فهرست ناوبری خود را پیدا کردید، در قسمت Sticky Element باید آن را به صورت site-navigation# وارد کنید. توجه داشته باشید که اگر از CSS Class استفاده می کنید باید قبل از نام کلاس CSS از . استفاده کنید.
Space between top of page and sticky element: در این قسمت می توانید فضایی بین بالای صفحه و فهرست چسبنده قرار دهید. اگر فهرست چسبنده شما روی یکی از المان های صفحه در بالای سایت قرار می گیرد و نمی خواهید آن المان را پنهان یا چسبنده کنید، می توانید از این تنظیمات استفاده کنید. در غیر این صورت می توانید از آن صرف نظر نمایید.
Check for Admin Toolbar: اگر این گزینه را در حالت فعال قرار دهید، افزونه Sticky Menu (or Anything) on Scroll مقداری فضا برای نوار ابزار مدیریت در بالای صفحه قرار می دهد که فقط برای کاربران وارد شده است.
Do not stick element when screen is smaller than: در این قسمت می توانید پیکسلی را وارد کنید که اگر صفحه نمایش کاربر از آن کوچکتر باشد (مانند گوشی تلفن همراه)، فهرست چسبنده نشان داده نشود.
شما می توانید سایت خود را در دستگاه های تلفن همراه و تبلت مشاهده کنید و اگر فهرست چسبنده را نپسندیدید، در این قسمت 780 px را وارد کنید.
Do not stick element when screen is larger than: در این قسمت می توانید پیکسلی را وارد کنید که اگر صفحه نمایش کاربر از آن بزرگتر باشد، فهرست چسبنده نشان داده نشود.
در پایان روی دکمه Save Changes کلیک کنید.
حال می توانید به فرانت اند سایت خود مراجعه کرده و فهرست ناوبری چسبنده را در فرانت اند مشاهده کنید.
در تب Advanced settings می توانید تنظیمات پیشرفته افزونه Sticky Menu (or Anything) on Scroll را پیکربندی کنید.
تنظیمات پیشرفته
Z-index: اگر المان های دیگری در صفحه وجود داشته باشد که با المان های چسبنده هم پوشانی داشته باشد، اضافه کردن Z-index می تواند کمک کننده باشد.
Push-up element: شما می توانید هر عنصر دیگری را در پایین صفحه انتخاب کنید تا مجدداً به المان چسبنده فشار وارد کند. به عنوان مثال یک ابزارک نوار کناری
Legacy Mode: اگر نسخه 2.0 افزونه Sticky Menu (Or Anything) on Scroll را نصب کرده اید، می توانید از مد Legacy استفاده کنید. در این مد روشی بهتر و جدیدتر برای چسبنده کردن المان ها معرفی شده است.
Debug Mode: وقتی مد Debug فعال باشد و المان چسبنده ای که انتخاب کرده اید، وجود نداشته یا بیش از یک المان با چنین آی دی و کلاسی وجود داشته باشد، پیام های خطا در کنسول مرورگر شما نشان داده می شود. توجه داشته باشید که از این مد در محیط production و سایت زنده خود استفاده نکنید.
در پایان روی دکمه ذخیره تغییرات کلیک کنید.
امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.
دانلود افزونه
دیدگاه ها