نحوه اضافه کردن آیکون های تصویری به منو وردپرس بوسیله ی کد و افزونه

آیامی خواهید نحوه اضافه کردن عکس در منو وردپرس رایاد بگیرید؟

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

| عکس تصویری منو وردپرس |

چرا باید آیکون های تصویری را به منوهای راهبری اضافه کنیم؟

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

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

با توجه به صحبت هایی که در ابتدای مقاله شد, میخواهیم. نحوه اضافه کردن عکس در منو وردپرس را بررسی کنیم.

 

روش اول: اضافه کردن عکس در منو وردپرس با استفاده از یک افزونه وردپرس

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

برای شروع اولین کاری که باید انجام دهید اینست که افزونه Menu Image را نصب و فعال کنید. پس از اینکه فعال سازی این افزونه وردپرسی را انجام دادید ، شما باید به پیشخوان وردپرس, قسمت نمایش >> فهرست ها بروید.

از اینجا میتوانید بر روی هر منو که میخواهید.در ستون سمت راست کلیک کنید. حالا دکمه هایی, با نامهای Menu image و Image on hover در تنظیمات قابل مشاهده است.

| عکس تصویری منو وردپرس |

با استفاده از این گزینه ها، می توانید آیکون تصویر منویی را که می خواهید انتخاب کرده یا آپلود کنید. و همچنین می توانید فقط یک تصویر منو را آپلود کنید و تصویر شناور را نادیده بگیرید. یا اینکه اگر میخواهید تصویر جداگانه ای را برای حالت شناور انتخاب کنید. در منوی Image size می توانید. اندازه تصویر را تغییر دهید, این اندازه برای هردو آیکون تصویر اصلی و تصویر شناور استفاده خواهد شد.

این افزونه دارای گزینه های متعددی برای انتخاب اندازه می باشد. با این حال توصیه ما به شما اینست.که از اندازه 24 × 24 یا 36 × 36 استفاده کنید.

| عکس تصویری منو وردپرس |

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

| عکس تصویری منو وردپرس |

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

| عکس تصویری منو وردپرس |

هنگامی که تنظیمات را پیکربندی کردید، به سادگی می توانید. عکس تصویری منو وردپرس را به همه موارد منو ناوبری خود اضافه کنید. در گام بعدی، شما باید بر روی دکمه “ذخیره منو” کلیک کنید.تا تنظیمات انجام شده و آیکون های منو را در عمل ببینید.

 

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

این روش برای کاربران با تجربه تر و حرفه ای که آشنایی کامل به CSS دارند مناسب است.

در ابتدا باید به قسمت رسانه مراجعه کنید.تا تمام آیکون های خود را برای منو آپلود کنید. برای این منظور به قسمت افزودن جدید بروید. و تمام آیکون ها را آپلود کنید, پس از آپلود، شما باید URL های آیکون ها را کپی کنید و آنها را در یک ویرایشگر متن مثل Notepad جایگذاری کنید.
در ادامه، شما باید به قسمت فهرست ها بروید. و روی دکمه ی تنظیمات صفحه در گوشه ی سمت چپ بالای صفحه کلیک کنید. تا نوار کشویی ای باز شود. و در تنظیمات صفحه، شما باید گزینه ‘CSS Classes’ را فعال کنید.

| عکس تصویری منو وردپرس |

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

| عکس تصویری منو وردپرس |

حالا شما باید این CSS سفارشی را به قالب خود اضافه کنید.

| عکس تصویری منو وردپرس |

در این قطعه کد,. homeicon نام کلاس است که شما باید در کادر کلاس CSS در بالا اضافه کنید.

بسته به قالب وردپرس شما، ممکن است لازم باشد کمی CSS را تغییر بدهید. تا جای مناسب برای آیکون های منو را پیدا کنید.

پس از تغییرات, زمانی که شما از نتایج رضایت پیدا کردید,. این روند را برای تمام آیتم های منو تکرار کنید.

امیدواریم این مقاله به شما در جایگذاری عکس تصویری منو وردپرس, کمک کرده باشد .