Mobile Menu Bar
افزونهٔ نوار ناوبری ثابت پایین صفحه برای بازدیدکنندگان موبایل — بدون کدنویسی. تا ۱۰ استایل UI، آیکون Font Awesome، رنگهای سفارشی، Badge، RTL و پنل تنظیمات کامل در پیشخوان.
معرفی و نصب
Mobile Menu Bar (فایل اصلی معمولاً mobile-menu-bar.php) منوی پایین ثابتی شبیه اپلیکیشنهای iOS/Android اضافه میکند که فقط در عرض viewport تا حدود ۷۶۸px دیده میشود؛ دسکتاپ دستنخورده میماند.
- نسخهٔ مرجع در این صفحه: 3.5.1 — اگر افزونه فعال باشد، مقدار از ثابت
MOBILE_MENU_BAR_VERSIONخوانده میشود. - نصب: پوشهٔ افزونه را در
wp-content/plugins/قرار دهید (یا ZIP از پیشخوان بارگذاری کنید) و از افزونهها فعالسازی کنید؛ سپس از منوی Mobile Menu تنظیم کنید. - Font Awesome: آیکونها از CDN بارگذاری میشوند؛ سیاست کش/CDN سایت باید اجازهٔ بارگذاری بدهد.
آیتمهای منو (۳ تا ۵)
- برای هر اسلات: کلاس آیکون Font Awesome ۶ (مثلاً
fas fa-home)، برچسب، URL، Badge اختیاری (مثلاً تعداد اعلان). - هر آیتم را میتوان بدون حذف کردن خاموش کرد تا جای خالی در تنظیمات بماند.
- هایلایت مسیر جاری: وقتی URL با صفحهٔ فعلی همخوان باشد، حالت فعال روی همان آیتم اعمال میشود.
۱۰ استایل رابط کاربری
در تب استایلها یکی از حالتهای زیر را انتخاب کنید؛ هر کدام حس بصری و سایه/موشن مخصوص خود را دارد:
| # | نام | توضیح کوتاه |
|---|---|---|
| ۱ | Classic Bottom Bar | نوار پایین کلاسیک |
| ۲ | iOS Glassmorphism | شیشهای شبیه iOS |
| ۳ | Floating Pill | کپسول شناور با پنهانشدن هنگام اسکرول |
| ۴ | Material Design | زبان بصری متریال |
| ۵ | Gradient Wave | گرادیانت موجی |
| ۶ | Neumorphism | نیومورفیسم نرم |
| ۷ | Minimal Line | مینیمال با خط |
| ۸ | Bubble Pop | حبابهای شناور |
| ۹ | Neon Glow | نئون و درخشش |
| ۱۰ | Card Slide | کارتی با حس اسلاید |
رنگها و متغیرهای CSS
- رنگهای اصلی، ثانوی، پسزمینه، آیکون و فعال با انتخابگر رنگ در پیشخوان تنظیم میشوند.
- افزونه CSS custom properties تزریق میکند تا با پالت سایت همراستا بمانید؛ در ادمین پالتهای آماده برای سرعت بیشتر وجود دارد.
پنل پیشخوان
پس از فعالسازی، از منوی Mobile Menu وارد شوید. تبها معمولاً شامل موارد زیر است:
- عمومی: فعال/غیرفعال کردن نوار موبایل.
- آیتمهای منو: ویرایش ۳–۵ لینک، آیکون و Badge.
- استایلها و رنگها.
- پیشنمایش زندهٔ استایل برای تصمیم سریعتر.
- ذخیره با AJAX همراه nonce و بررسی قابلیت
manage_options.
رفتار در فرانتاند
- padding پایین body بهصورت خودکار تا محتوا زیر نوار نرود.
- Ripple لمسی، پنهان/نمایش با اسکرول برای استایلهای شناور (مثل pill و bubble).
- کلاس آنلاین/آفلاین روی نوار برای استایلدهی شرایط شبکه.
- بازخورد لمسی (Vibration API) در صورت پشتیبانی مرورگر.
- پشتیبانی از صفحهکلید (Enter/Space) و ویژگیهای پایهٔ دسترسپذیری روی آیتمها.
فونت و چندزبانه
- چیدمان RTL (مثلاً جای Badge) در نظر گرفته شده است؛ برچسبها را به هر زبانی که میخواهید بنویسید.
- فونت پیشفرض برچسبها معمولاً Vazirmatn (وزیر) از jsDelivr است؛ در صورت نیاز فایل
public/css/vazir-font.cssدر افزونه قابل تغییر است.
امنیت و کیفیت کد
- تنظیمات با توابع استاندارد وردپرس پاکسازی میشوند (
sanitize_hex_color،esc_url_raw،sanitize_text_fieldو …). - درخواستهای AJAX با nonce تأیید میشوند.
- استایل و اسکریپت با الگوی
wp_enqueue_*بارگذاری میشوند.
عیبیابی
- نوار دیده نمیشود: افزونه فعال است؟ عرض پنجره زیر ۷۶۸px است؟ کش مرورگر/سایت را خالی کنید.
- آیکونها نیستند: کلاس Font Awesome را با مستندات رسمی چک کنید و بارگذاری CDN را بررسی کنید.
- رنگ عوض نمیشود: ذخیرهٔ تنظیمات را دوباره بزنید و کش را پاک کنید.
نصب توسعهدهنده
برای همگامسازی با آخرین کد مخزن، در پوشهٔ wp-content/plugins اجرا کنید:
git clone https://github.com/alireza-aminzadeh/wp-mobile-bottom-navigation-bar-plugin.git mobile-menu-bar
نام پوشهٔ داخل مخزن ممکن است با نام پوشهٔ نصب روی سرور شما متفاوت باشد؛ مهم این است که فایل اصلی افزونه در مسیر درست قرار گیرد.