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

در این مقاله وردپرسی،ما به شما نشان خواهیم داد که چگونه عکس هایی را به عنوان آیکون در منوی ناوبری وردپرس خود اضافه کنید بدون اینکه کدی را ویرایش کنید.

 

اولین کاری که شما باید انجام دهید نصب و فعال سازی پلاگین Menu Image وردپرس است.پس از فعال سازی به Appearance Menu(نمایش – فهرست ها) بروید. شما یک آپشن برای اضافه کردن عکس به همراه آیتم هایش در منوی موجود خود خواهید دید.

سپس عکس هایی که شما می خواهید در منوی ناوبری نمایش داده شود را از طریق Set Image ارسال کنید. پلاگین به طور خودکار عکس ها را به اندازه های ۲۴*۲۴ ، ۳۶*۳۶ و ۴۸*۴۸ پیکسل تغییر می دهد. شما می توانید یکی از این اندازه ها را از منوی کشویی برای تصویرتان انتخاب کنید.

شما می توانید محل قرار گیری عنوان تصویرتان را نیز انتخاب کنید که قبل یا بعد از تصویر باشد یا با انتخاب Hide ، تصویر بدون عنوان،نمایش داده شود.

 

اگر شما می خواهید عکستان را با اندازه های سفارشی به تصاویری که برای منو آپلود کردید اضافه کنید می توانید این کد را به فایل function.php یا Site-specific plugin تم خود اضافه کنید.

[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;

	}); [/php]

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

این سبک و روش بسیاری از کاربران با تجربه است که در مورد کدهای CSS اطلاعات دارند.

در ابتدا شما باید عکس های خود را از مسیر Media » Add New به وردپرس ارسال کنید. بعد از ارسال هر عکس URL آن را در یک برنامه ی

ویرایشگر متن ، مانند Notepad ذخیره کنید.حال به مسیر Appearance » Menus رفته و روی Screen Option، بالا سمت راست گوشه ی

صفحه کلیک کنید. در منوی Screen Option تیک CSS Class را بزنید.

 

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

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

 

[php] 	.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;
	} [/php]

فراموش نکنید که CSS Class را به homepage تغییر دهید و آدرس URL عکس را اضافه کنید که در یک فابل متنی ذخیره کرده بودید.

بسته به تم خود کد CSS را باید تغییر دهید.اگر از نتیجه ی کار راضی بودید این فرایند را برای همه ی آیتم های منو تکرار کنید.

فعلا تا اینجا کار تمام است، ما امیدواریم که مقاله ی “طریقه ی اضافه کردن عکس به عنوان آیکون در منوی ناوبری” برای شما مفید بوده باشد.