آیا می خواهید آیکون هایی را در منوهای ناوبری وردپرس خود اضافه کنید؟ اخیراً ، یکی از کاربران ما روشی آسان برای افزودن آیکون ها به منو درخواست کرده است. در این مقاله نحوه اضافه کردن آیکون ها در منوهای ناوبری در وردپرس را به شما نشان خواهیم داد.
چرا باید به منوهای پیمایش ، آیکون اضافه کنید؟
معمولاً منوهای ناوبری وردپرس پیوندهای متنی ساده هستند. این پیوندها برای اکثر وب سایتها کار می کند ، با این وجود با افزودن آیکون های تصویری ، منوی ناوبری شما تعاملی تر به نظر برسد.
همچنین می توانید از آیکون ها استفاده کنید تا منوی شما قابل توجه تر شود. به عنوان مثال ، یک آیکون زیبا در کنار صفحه مخاطب شما می تواند آن را در بین سایر پیوندهای موجود در فهرست شما قرار دهد.
با این گفته ، بیایید نگاهی بیندازیم که چگونه به راحتی بتوانید آیکون ها را به منوهای ناوبری در وردپرس اضافه کنید.
روش 1: اضافه کردن آیکون ها به منو با استفاده از افزونه
این روش آسانتر است و برای کاربران مبتدی توصیه می شود زیرا نیاز به برنامه نویسی نیست.
اولین کاری که باید انجام دهید نصب و فعال سازی افزونه 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;
});همچنین می توانید موقعیت عنوان را در بالا ، زیر ، قبل یا بعد از آیکون تنظیم کنید. همچنین به شما امکان می دهد عنوان را مخفی کنید و فقط برای هر منوی پیمایش ، آیکون را نمایش دهید.
پس از تنظیمات ، به سادگی آیکون ها را به صورت جداگانه به همه موارد فهرست پیمایش اضافه کنید. در مرحله بعد ، برای دیدن آیکون های منو در عمل ، باید روی دکمه “ذخیره منو” کلیک کنید.
روش 2: اضافه کردن آیکون ها به منو با استفاده برنامه نویسی
این روش برای کاربران باتجربه تر است که با کدنویسی CSS آشنا هستند.
ابتدا ، برای آپلود کردن تمام آیکون های خود در وردپرس ، باید به ” رسانه ها » افزودن ” بروید. پس از بارگذاری ، باید URL های آنها را کپی کرده و آنها را در ویرایشگر متنی مانند note pad بچسبانید.
در مرحله بعد ، باید به قسمت ” نمایش » فهرست ها ” بروید و بر روی دکمه ” تنظیمات صفحه ” در گوشه سمت چپ بالای صفحه کلیک کنید. در تنظیمات صفحه ، باید گزینه “کلاسهای 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 را کمی تغییر دهید. هنگامی که از نتیجه راضی شدید ، فرآیند را برای همه موارد فهرست تکرار کنید.
با این همه امیدواریم این مقاله به شما کمک کند یاد بگیرید که چگونه آیکون ها را به منوهای ناوبری در وردپرس اضافه کنید.
