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

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

بعد، تصویر را که می خواهید در کنار منوی ناوبری نمایش داده شود، با کلیک روی دکمه «تنظیم تصویر» آپلود کنید.

این افزونه به طور خودکار سه عدد اندازه جدید 24 × 24، 36 × 36 و 48 × 48 پیکسل ایجاد می کند. شما می توانید آنها را از منوی کشویی اندازه تصویر انتخاب کنید. شما همچنین می توانید جایی که می خواهید عنوان منو را نشان می دهد را انتخاب کنید. شما می توانید آن را قبل یا بعد از تصویر نمایش دهید. شما همچنین می توانید عنوان را پنهان کنید و فقط تصویر را نمایش دهید.

 

اضافه کردن اندازه تصویر خودتان

اگر می خواهید اندازه تصاویر سفارشی خود را برای تصاویری که به منو آپلود می کنید اضافه کنید، می توانید این کار را با اضافه کردن این کد در فایل functions.php سایت خود انجام دهید.
 
add_filter( 'menu_image_default_sizes', function($sizes){
 
  // remove the default 36x36 size
  unset($sizes['menu-36x36']);
 
  // add a new size
  $sizes['menu-50x50'] = array(50,50);
 
  // return $sizes (required)
  return $sizes;
 
});
 
 

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

این روش برای کاربران با تجربه تر است که کار با CSS را می دانند. برای اولین بار شما باید تصاویر خود را به وردپرس آپلود کنید . پس از آپلود هر تصویر، URL های خود را کپی کنید و آنها را در یک ویرایشگر متن مثل Notepad قرار دهید.

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

 
نحوه اضافه کردن آیکون به منو های وردپرس
 
بعد به پایین بروید تا بر روی هر آیتم موجود در منوی فعلی کلیک کنید و یک فیلد کلاس CSS خواهید دید. کاری که شما باید انجام دهید این است که یک کلاس 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;
}
فراموش نکنید که صفحه خانگی را تغییر دهید تا هر CSS کلاس وارد شده را تغییر داده شود و URL تصویر پسزمینه را از آنکه قبلا ذخیره کرده اید در یک فایل متنی تغییر دهید.
 
 

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

به بالای صفحه بردن