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

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

کافی است افزونه را دانلود و نصب کنید و به نمایش» فهرست وارد شوید و در تنظیمات هر کدام از آیتم‌های منو تصویر مورد نظر را وارد نمایید.

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

اضافه کردن تصویر یا ایکن به آیتم‌های منو در سایت

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

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

After that scroll down to your navigation menu and click on an item to expand it. You will see an option to add CSS classes. Enter a different CSS class for each menu item.

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

حالا در بخش سی اس اس سفارشی یک نام دلخواه قرار دهید. از این نام کپی بگیرید فهرست خود را ذخیره کنید و سپس به مسیر نمایش» css سفارشی بروید.

کد زیر را در این بخش کپی کنید.

.homepage {
background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

در این نمونه بعد از بارگذاری تصویر مورد نظر خود کافی است ادرس آن را برای خصوصیت background-image کپی کنید.

برای سایر آیتم‌های دیگر منو، کافی است نام‌های مختلفی را برای کلاس‌های css در نظر بگیرید و آدرس متفاوتی را برای background-image وارد نمایید.

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