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

آیا می خواهید آیکون هایی را در منوهای ناوبری وردپرس خود اضافه کنید؟ اخیراً ، یکی از کاربران ما روشی آسان برای افزودن آیکون ها به منو درخواست کرده است. در این مقاله نحوه اضافه کردن آیکون ها در منوهای ناوبری در وردپرس را به شما نشان خواهیم داد.

 

چگونگی افزودن آیکون به منو
چگونگی افزودن آیکون به منو

 

چرا باید به منوهای پیمایش ، آیکون اضافه کنید؟

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

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

با این گفته ، بیایید نگاهی بیندازیم که چگونه به راحتی بتوانید آیکون ها را به منوهای ناوبری در وردپرس اضافه کنید.

روش 1: اضافه کردن آیکون ها به منو با استفاده از افزونه

این روش آسانتر است و برای کاربران مبتدی توصیه می شود زیرا نیاز به برنامه نویسی نیست.

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

پس از فعال سازی افزونه، باید به قسمت  “نمایش » فهرست ها ” در قسمت پیشخوان وردپرس مراجعه کنید.

بیشتر‌بخوانید تا بیشتر‌بدانید
ساخت فرم رسپانسیو در وردپرس با المنتور

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

 

تاثیر افزونه Menu Image
تاثیر افزونه Menu Image

 

با استفاده از این دکمه ها می توانید آیکون منو مورد نظر خود را انتخاب یا بارگذاری کنید. اگر می خواهید ، فقط می توانید یک تصویر منو را بارگذاری کرده و از تصویر هاور چشم پوشی کنید.

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

قسمت سایز آیکون دارای چندین گزینه برای انتخاب اندازه آیکون است. اما توصیه می کنیم با استفاده از اندازه های 24 × 24 یا 36 × 36 آیکون های منو را کوچک نگه دارید.

 

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

 

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

});

همچنین می توانید موقعیت عنوان را در بالا ، زیر ، قبل یا بعد از آیکون تنظیم کنید. همچنین به شما امکان می دهد عنوان را مخفی کنید و فقط برای هر منوی پیمایش ، آیکون را نمایش دهید.

 

موقعیت عنوان
موقعیت عنوان

 

پس از تنظیمات ، به سادگی آیکون ها را به صورت جداگانه به همه موارد فهرست پیمایش اضافه کنید. در مرحله بعد ، برای دیدن آیکون های منو در عمل ، باید روی دکمه “ذخیره منو” کلیک کنید.

بیشتر‌بخوانید تا بیشتر‌بدانید
ایجاد محدودیت برای نمایش فهرست‌ها در وردپرس با If Menu

 

منوهای دارای آیکون
منوهای دارای آیکون

 

روش 2: اضافه کردن آیکون ها به منو با استفاده برنامه نویسی

این روش برای کاربران باتجربه تر است که با کدنویسی CSS آشنا هستند.

ابتدا ، برای آپلود کردن تمام آیکون های خود در وردپرس ، باید به  ” رسانه ها » افزودن ” بروید. پس از بارگذاری ، باید URL های آنها را کپی کرده و آنها را در ویرایشگر متنی مانند note pad بچسبانید.

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

 

تنظیمات صفحه
تنظیمات صفحه

 

پس از آن ، به پایین بروید و بر روی هر مورد از فهرست کلیک کنید تا تنظیمات آن گسترش یابد. شما یک قسمت “کلاسهای CSS (اختیاری)” را مشاهده خواهید کرد که در آنجا باید نام کلاس CSS را برای آیتم منو اضافه کنید.

 

کلاس CSS
کلاس CSS

 

حال باید این 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;
}

در این کد ، .homeicon نام کلاس است که شما در قسمت بالا CSS Classes اضافه کرده اید.

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

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

 

 

منابع
_ WpBeginner
تیم تولید محتوا _ آلتیمیت وردپرس
ما در تیم تولید محتوای آلتیمیت وردپرس، سخت در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم. محتوای این صفحه توسط یوسف حسینی کنترل و بررسی خواهد شد.

دیدگاهتان را بنویسید