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

یکی از روش‌های زیباسازی وب‌سایت استفاده از تصاویر در بخش‌های مختلف است.

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

همین موضوع باعث شده کارفرمایان بسیار به دنبال این باشند که زیبایی بیشتری به منوی سایت ببخشند.

چرا باید درباره روش افزودن تصویر به منو وردپرس بدانیم؟

معمولا منوهای وب‌سایت‌ها یک پیوند ساده هستند.

این پیوندها برای اکثر وب‌سایت‌ها به درستی کار می‌کنند و به طور کلی مشکلی به وجود نمی‌آورند.

اضافه کردن یک آیکون به همین منوها می‌تواند موجب افزایش چند برابری زیبایی آن‌ها و البته افزایش تعامل منو شود.

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

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

روش اول افزودن تصویر به منو در وردپرس با افزونه

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

پلاگین‌های مختلفی در بازار وجود دارند که این کار را به راحتی برایتان انجام می‌دهند.

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

اولی اقدام در این روش این است که افزونه Menu Image را نصب و فعال کنید.

این افزونه به راحتی نصب می‌شود. بعد از نصب افزونه از طریق گزینه نمایش به بخش فهرست‌ها بروید.

از اینجا می‌توانید روی هر آیتم منو در ستون سمت راست کلیک کنید تا آن را بزرگ کنید.

دکمه‌ مربوط به افزودن تصویر را در تنظیمات هر مورد خواهید دید.

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

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

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

همچنین می‌توانید موقعیت عنوان را در بالا، پایین، قبل یا بعد از نماد تصویر تنظیم کنید.

همچنین به شما امکان می‌دهد عنوان را مخفی کنید و فقط نماد تصویر را برای هر منوی ناوبری نمایش دهید.

حال اگر به خروجی نگاه کنید می‌توانید به راحتی آیکون‌ها را در کنار منو مشاهده کنید.

استفاده از افزونه برای اضافه کردن آیکون بسیار ساده است و نکته خاص دیگری ندارد.

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

این روش برای کاربران با تجربه تری است که راه خود را در CSS می‌دانند.

اکثر کاربران دوست دارند که خودشان با استفاده از کدنویسی اقدام به تولید ظاهر مد نظر کنند.

در صورتی که شما هم دوست دارید دقیقا همان طرحی که مد نظرتان است را پیاده‌سازی کنید باید به کدنویسی CSS تسلط داشته باشید.

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

در بالای صفحه گزینه تنظیمات صفحه را بزنید سپس گزینه کلاس CSS را انتخاب کنید.سپس کمی صفحه را اسکرول کنید و گزینه مورد نظر خودتان را که می‌خواهید آیکون در کنار آن قرار بگیرد را انتخاب کنید.

حال در این بخش باید کلاس CSS مد نظر خودتان را مانند تصویر وارد کنیددر این قطعه CSS، .homeicon نام کلاسی است که در قسمت CSS Classes در بالا اضافه کردید.

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