ساخت دکمه شناور در وردپرس به‌صورت ثابت با Float Menu

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

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

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

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

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

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

آشنایی با افزونه Float Menu

افزونه Float Menu برای ساخت منوی شناور عمودی یا افقی در وردپرس طراحی شده. نسخه رایگانش در مخزن رسمی وردپرس قرار گرفته و با اون می‌تونید بدون کدنویسی چند منوی شناور بسازید.

موقع بازبینی این مقاله، نسخه رایگان افزونه بیشتر از ۳۰ هزار نصب فعال داره و نسخه 7.2.5 اون تا وردپرس 7.1.3 آزمایش شده. این اطلاعات با انتشار نسخه‌های تازه تغییر می‌کنن؛ پس قبل از نصب، بهتره مشخصات جدید رو در صفحه رسمی افزونه ببینید. برای اجرای افزونه هم به PHP 7.4 یا نسخه بالاتر نیاز دارید.

نسخه‌های جدید Float Menu رابط مدیریتی تازه، چیدمان افقی، حالت آزمایشی و انتخاب‌گر آیکون جدید دارن. اسکریپت اصلی افزونه هم به‌جای jQuery با JavaScript خالص نوشته شده. حالت آزمایشی بهتون اجازه می‌ده قبل از نمایش عمومی منو، نتیجه تنظیمات رو ببینید.

امکانات نسخه رایگان Float Menu

• ساخت چند منوی شناور
• نمایش منو در سمت راست یا چپ صفحه
• استفاده از چیدمان عمودی یا افقی
• اضافه کردن عنوان، لینک و آیکون به هر آیتم
• انتخاب رنگ دکمه و پس‌زمینه
• باز کردن لینک در تب تازه
• تنظیم اندازه و فاصله منو
• مخفی کردن منو روی نمایشگرهای کوچک یا بزرگ
• پشتیبانی از جهت راست‌به‌چپ و ویژگی aria-label برای دسترس‌پذیری بهتر

نسخه حرفه‌ای چه امکانات بیشتری داره

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

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

نصب افزونه Float Menu

وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید. داخل کادر جست‌وجو عبارت Float Menu رو بنویسید، بعد افزونه رو نصب و فعال کنید. اگه اولین باره افزونه نصب می‌کنید، راهنمای نصب افزونه در وردپرس مراحل رو ساده‌تر براتون توضیح می‌ده.

بعد از فعال‌سازی، گزینه مربوط به Float Menu یا Wow Plugins به پیشخوان اضافه می‌شه. جای دقیق این گزینه ممکنه در نسخه‌های مختلف کمی فرق داشته باشه. وارد صفحه Float Menu بشید تا فهرست منوهایی رو که ساختید ببینید.

برای ساخت اولین منو روی Add New کلیک کنید. Add New یعنی «افزودن مورد تازه». حالا یک عنوان داخلی برای منو بنویسید تا بعداً بتونید اون رو بین منوهای دیگه راحت پیدا کنید. این عنوان لزوماً به کاربران سایت نشون داده نمی‌شه.

تنظیم موقعیت و ظاهر منو

در بخش تنظیمات اصلی می‌تونید ظاهر کلی منو رو مشخص کنید. گزینه Position محل قرار گرفتن منو رو تعیین می‌کنه. Position یعنی «موقعیت» و معمولاً از همین قسمت می‌تونید سمت راست یا چپ صفحه رو انتخاب کنید.

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

ساخت آیتم‌های منوی شناور

در بخش Menu یا Items می‌تونید دکمه‌های منو رو بسازید. روی Add Item کلیک کنید تا یک آیتم تازه اضافه بشه. Item یعنی «یک گزینه از منو»؛ مثل دکمه تماس یا لینک صفحه محصولات.

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

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

کنترل نمایش منو

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

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

بررسی منو قبل از انتشار

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

1. صفحه رو بالا و پایین کنید و ببینید منو ثابت می‌مونه یا نه.
2. روی همه دکمه‌ها بزنید و مقصد هر لینک رو بررسی کنید.
3. عرض پنجره مرورگر رو کمتر کنید تا نمای موبایل شبیه‌سازی بشه.
4. مطمئن بشید منو روی متن، فرم، دکمه خرید یا اعلان کوکی نمی‌افته.
5. رنگ متن و پس‌زمینه رو طوری انتخاب کنید که نوشته دکمه راحت خونده بشه.
6. اگه چند افزونه شناور دارید، موارد اضافی رو خاموش کنید تا دکمه‌ها روی هم نیفتن.

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

جمع‌بندی

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

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

سؤالات متداول

تیم تولید محتوا

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