افزودن آیکون و عکس به منو وردپرس

افزودن آیکون و عکس به منو وردپرس

آموزش

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

افزودن آیکون و عکس به منو وردپرس

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

آیکون منو وردپرس
آیکون منو وردپرس

دو گزینه اضافه شده به این معنی میباشد که برای دکمه Set image شما قابلیت افزودن عکس در حالت معمولی منو خواهید داشت . اگر عکس را از قسمت Set image on hover انتخاب کنید در زمانی که کاربر با ماوس بر روی گزینه منو مورد نظر برود عکس انتخاب شده برای وی نمایان خواهد شد . همچنین میتوانید ابعاد تصویر به همراه محل قرار گیری عنوان لینک نسبت به عکس را مشخص کنید .

اندازه تصاویر به صورت مختلف وجود دارد اما اگر خواستید اندازه ای جدید به آن اضافه کنید میتوانید کد زیر را به فایل 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 را انتخاب کنیم .

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

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

ما کلاس homeicon را اضافه کرده ایم اما باید جایی آن را تعریف کنیم و عکسی به آن اضافه کنیم . برای انجام این کار باید فایل css قالب خود را ویرایش کرده و کدی مشابه کد زیر به آن اضافه کنیم :

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

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

پسورد فایل ivahid.com
امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
6 رای, 3,17 از 5
Loading...

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

مشاهده مقاله من : درگاه های واسط پرداخت و مزایا نسبت به PSP

دیدگاه شما عزیزان

  • رضا
    17 اسفند 1399

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

  • یاهو
    3 خرداد 1398

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

    • 4 خرداد 1398

      سلام به شما
      دوست عزیز اگر امکانش هست از طریق تماس با ما در سایت آی وحید اطلاعات سایت خودتون رو برامون ارسال کنید تا بررسی انجام شود

کادر ارسال دیدگاه شما کاربر عزیز

2842 442121