مرجع وردپرس
مرجع وردپرس - مرجع وردپرس فارسی و آموزش طراحی وب سایت

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

افزون آیکون به فهرست وردپرس با افزونه Menu Image - افزودن آیکون به فهرست وردپرس بدون افزونه ، افزودن آیکون به منو وردپرس بدون افزونه
افزودن آیکون تصویری به فهرست ها در وردپرس
امتیاز 5 از بین 4 رای
افزودن آیکون تصویری به فهرست ها در وردپرس

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

افزودن آیکون های منو با استفاده از افزونه

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

بعد از فعال سازی به صفحه ” نمایش > فهرست ها ” بروید . در اینجا می توانید روی هر آیتم منو که می خواهید در ستون سمت راست کلیک کنید و آن را ویرایش کنید . برای هر آیتم گزینه های Menu image و Image on hover را خواهید دید .

انتخاب آیکون برای منو وردپرس

روی این گزینه ها کلیک کرده و آیکون مورد نظر خود را انتخاب نمایید . در باکس Image size می توانید اندازه آیکون را تعیین نمایید .

انتخاب سایز آیکون

اگر می خواهید اندازه مورد نظر خود را وارد کنید کافیست کد زیر را در فایل 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 برای منو وردپرس

سپس نام کلاس را در باکس مربوطه وارد می کنیم .

انتخاب نام کلاس css

سپس روی دکمه ” ذخیره فهرست ” کلیک می کنیم و در ادامه کدهای CSS زیر را به قالب وردپرس اضافه خواهیم کرد .

.menu-icon {
background-image: url('image-url');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

فایل قالب را ذخیره می کنیم و کار تمام است .

امیدوارم این آموزش از مرجع وردپرس برای شما مفید واقع شده باشه 🙂

پیروز و سربلند باشید .

اشتراک گذاری این مطلب با دوستان :

نظرات و دیدگاه ها

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