آیکون های منوی وردپرس: 2 روش روی اضافه کردن آیکون ها به منو برای ناوبری آسان

یکی از مزایای داشتن یک وب سایت وردپرس این است که شما می توانید آن را در صورت نیاز شخصی سازی کنید. این شامل، اما نه محدود به، بهبود ظاهر منوهای ناوبری شما با نمادهای تصویر است.

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

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

به خواندن ادامه دهید تا بفهمید هر روش چگونه کار می کند تا بهترین روش را برای نیازهای خود انتخاب کنید.

روش 1. اضافه کردن نمادهای منو با استفاده از CSS

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

برای این آموزش، از کتابخانه آیکون Font Awesome استفاده خواهیم کرد. در اینجا روش اضافه کردن آیکون های منوی وردپرس با استفاده از CSS آورده شده است:

1. به Font Awesome بروید homepage و انتخاب کنید به صورت رایگان شروع کنید.

2. ایمیل خود را وارد کنید تا کد کیت رایگان را دریافت کنید، که به شما امکان می دهد نمادهای Font Awesome را از کتابخانه آنها بازیابی کنید. کد کیت کتابخانه باید به شکل زیر باشد:

3. اکنون که کد کتابخانه را در اختیار دارید، گام بعدی این است که کلاس CSS از نمادهای Font Awesome را که می خواهید استفاده کنید، به دست آورید. به Font Awesome’s بروید جستجو کردن page و مواردی را که متناسب با نیاز شما هستند ذخیره کنید. برای این مثال، از “خانهنماد ” برای ما homepage.

4. به داشبورد مدیریت وردپرس خود دسترسی پیدا کنید و به ظاهر -> ویرایشگر فایل تم.
5. باز کن header.php فایل و کد کیت را در بالای صفحه اضافه کنید خط کلیک به روز رسانی فایل.

6. هدایت به ظاهر -> منوها و آیتم منو را که می خواهید سفارشی کنید گسترش دهید. کلاس CSS که در مرحله سوم به دست آوردید را به آن اضافه کنید برچسب ناوبری جعبه متن در ساختار منو بخش. اگر می خواهید متن منوی فعلی را در کنار نماد تصویر نمایش دهید، نگه دارید.

7. مراحل سوم و ششم را تکرار کنید تا آیکون های بیشتری به سایر آیتم های منو اضافه کنید، سپس کلیک کنید روی را ذخیره منو دکمه.
8. اگر process موفقیت آمیز است، منوی شما به شکل زیر خواهد بود:

روش 2. اضافه کردن نمادهای منو با استفاده از یک پلاگین

بسیاری از پلاگین ها را ساده می کنند process سفارشی کردن منوی ناوبری خود با آیکون های منوی عالی. ما افزونه های زیر را توصیه می کنیم:

• نمادهای منو توسط ThemeIsle – یک افزونه رایگان که از انواع آیکون های مختلف، از جمله Font Awesome، Dashicons و SVG پشتیبانی می کند.
• تصویر منو ‒ یک افزونه freemium که می تواند آیتم های منو را به دکمه های فراخوان تبدیل کند.
• نمادهای منوی WP ‒ افزونه رایگان دیگری که از انواع آیکون های متعدد پشتیبانی می کند و گزینه های سفارشی سازی مختلفی از جمله موقعیت و رنگ نماد را ارائه می دهد.
• مگا منوی Max ‒ افزونه ای که به شما امکان می دهد یک مگا منوی وردپرس ایجاد کنید و آیکون هایی از پلتفرم های مختلف اضافه کنید.

آموزش زیر به شما نشان می دهد که چگونه با استفاده از آیکون ها را اضافه کنید نمادهای منو توسط ThemeIsle افزونه:

1. افزونه وردپرس را نصب و فعال کنید.

2. رفتن به ظاهر -> منوها و آیتم منو را که می خواهید سفارشی کنید گسترش دهید. یک آیتم منو جدید به نام خواهید دید نماد: انتخاب کنید زیر برچسب ناوبری جعبه متن

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

4. نماد جدید انتخاب شده باید در داخل ظاهر شود ساختار منو بخش. همین کار را تکرار کنید process به سایر آیتم های منو بروید و کلیک کنید ذخیره منو.

5. در اینجا نمونه ای از منوی وردپرس با نماد پیش فرض Dashicons با استفاده از افزونه اضافه شده است:

نتیجه

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

از طریق این مقاله دو روش را یاد گرفتید روی چگونه آیکون های منو را به منوی ناوبری وردپرس اضافه کنیم:

• کدگذاری آن به صورت دستی – این روش به شما انعطاف بیشتری می دهد اما به دانش CSS نیاز دارد.
• استفاده از افزونه آیکون منو – روشی برای مبتدیان بیشتر اما به یاد داشته باشید که استفاده از افزونه های زیاد می تواند سرعت وب سایت وردپرس شما را کند کند.

کدام روش را ترجیح می دهید؟ در بخش نظرات زیر به ما اطلاع دهید.

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

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