افزودن آیکون به منو در وردپرس با افزونه Menu Icons

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

مراحل اصلی این آموزش برای قالب‌های کلاسیکه؛ یعنی قالب‌هایی که منوشون از مسیر «نمایش ← فهرست‌ها» مدیریت می‌شه. اگه سایتتون از ویرایشگر کامل سایت و بلوک «ناوبری» استفاده می‌کنه، مسیر قالب‌های بلوکی رو هم توضیح می‌دیم تا محدودیت افزونه رو بدونید.

افزونه Menu Icons چه کاری انجام می‌ده؟

Menu Icons by Themeisle یک افزونه رایگانه که کنار گزینه‌های منوی وردپرس آیکون می‌ذاره. مثلاً می‌تونید برای «خانه» آیکون خانه و برای «تماس با ما» آیکون تلفن بذارید. به کدنویسی هم نیازی ندارید و همه تنظیمات هر آیکون از همون صفحه مدیریت فهرست انجام می‌شه.

طبق صفحه رسمی افزونه در زمان بازبینی این مقاله، Menu Icons بیشتر از ۱۰۰ هزار نصب فعال داره و نسخه ۰.۱۳.۲۶ اون در ۲ نوامبر ۲۰۲۶ منتشر شده. این نسخه با وردپرس ۷.۱.۴ آزمایش شده و حداقل به وردپرس ۴.۷ نیاز داره. این اطلاعات با انتشار نسخه‌های تازه تغییر می‌کنن؛ پس بهتره قبل از نصب، جزئیات فعلی رو توی صفحه مخزن ببینید.

نسخه‌های تازه افزونه روی نمایش بهتر SVG هم کار کردن. SVG نوعی تصویر برداریه که با بزرگ‌شدن کیفیتش رو از دست نمی‌ده. نسخه ۰.۱۳.۲۵ امکان کنترل فاصله داخلی SVG رو اضافه کرده و نسخه ۰.۱۳.۲۳ هم مشکل اندازه و تراز عمودی این آیکون‌ها رو برطرف کرده.

آیکون‌های پشتیبانی‌شده در Menu Icons

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

• Dashicons یا آیکون‌های پیش‌فرض وردپرس
• Font Awesome
• Foundation Icons
• Elusive Icons
• Genericons
• TI Icons
• بسته‌های ساخته‌شده با Fontello
• تصاویر معمولی
• فایل‌های SVG

اگه بیشتر با SVG کار می‌کنید، آموزش نمایش آیکون‌های SVG در وردپرس هم می‌تونه براتون مفید باشه.

نصب افزونه Menu Icons

اول وارد پیشخوان وردپرس بشید. از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید و عبارت «Menu Icons by Themeisle» رو جست‌وجو کنید. افزونه رو با نام توسعه‌دهنده Themeisle پیدا کنید و بعد دکمه‌های «نصب» و «فعال‌کردن» رو بزنید.

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

افزودن آیکون به منو در قالب‌های کلاسیک

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

حالا یکی از آیتم‌های منو رو باز کنید. اینجا گزینه‌ای با عنوان «Icon: Select» یا عنوانی شبیه به اون می‌بینید. روی «Select» کلیک کنید تا پنجره انتخاب آیکون باز بشه.

فعال‌کردن نوع آیکون‌ها

اگه بسته آیکون دلخواهتون توی پنجره انتخاب دیده نمی‌شه، روی «Menu Icons Settings» کلیک کنید. توی بخش «Icon Types» فقط نوع آیکون‌هایی رو که لازم دارید فعال کنید و بعد «Save Settings» رو بزنید. نیازی نیست همه بسته‌ها روشن باشن.

تنظیم ظاهر آیکون منو

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

1. آیکون دلخواهتون رو انتخاب کنید.
2. مشخص کنید آیکون قبل یا بعد از عنوان منو قرار بگیره.
3. اگه لازم بود، اندازه آیکون رو تغییر بدید.
4. فقط وقتی معنی آیکون کاملاً روشنه، عنوان متنی رو مخفی کنید.
5. تنظیمات آیکون و بعد خود فهرست رو ذخیره کنید.

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

افزودن آیکون در قالب‌های بلوکی وردپرس

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

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

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

رفع مشکل نمایش‌ندادن آیکون منو

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

• کش سایت و مرورگرتون رو پاک کنید.
• مطمئن بشید هم تنظیمات آیکون و هم خود فهرست ذخیره شدن.
• بررسی کنید همون فهرست توی جای درست قالب نمایش داده می‌شه.
• موقتاً یک آیکون Dashicons رو امتحان کنید تا مشخص بشه مشکل از فایل SVG یا بسته آیکونه.
• نتیجه رو با یک قالب پیش‌فرض وردپرس روی محیط آزمایشی مقایسه کنید.
• اگه مشکل فقط توی قالب فعلی دیده می‌شه، موضوع رو با پشتیبانی قالب یا افزونه مطرح کنید.

بررسی نتیجه در موبایل و دسکتاپ

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

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

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

جمع‌بندی

برای افزودن آیکون به منو در قالب‌های کلاسیک، افزونه Menu Icons مسیر ساده‌ای جلوی پاتون می‌ذاره. افزونه رو نصب می‌کنید، وارد «نمایش ← فهرست‌ها» می‌شید و برای هر آیتم، آیکون دلخواهتون رو انتخاب می‌کنید. اندازه، جای آیکون و نمایش عنوان هم از همون پنجره تنظیم می‌شه.

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

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

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