آیا می خواهید نمادهای تصویر را در منوهای پیمایش وردپرس خود اضافه کنید؟ اخیراً ، یکی از کاربران ما روشی آسان برای افزودن نمادهای منو درخواست کرده است. در این مقاله ، ما به شما نحوه افزودن نمادهای تصویر با منوهای ناوبری در وردپرس را نشان خواهیم داد.
چرا باید نمادهای تصویر را با منوهای پیمایش اضافه کنید؟ h4>
معمولاً ، منوهای ناوبری وردپرس پیوندهای متنی ساده هستند. این پیوندها برای اکثر وب سایت ها کار می کنند ، با این وجود می توانید با افزودن نمادهای تصویری ، منوی پیمایش خود را تعاملی تر نشان دهید.
از آیکون های تصویر نیز می توان برای جلب توجه بیشتر منو استفاده کرد. به عنوان مثال ، یک نماد تصویر زیبا در کنار صفحه تماس می تواند آن را در میان پیوندهای دیگر در فهرست شما برجسته کند.
با این اوصاف ، بیایید نگاهی به چگونگی افزودن آسان نمادهای تصویر با منوهای ناوبری در وردپرس بیاندازیم.
آموزش فیلم h4>
اگر نمی خواهید آموزش فیلم را تماشا کنید ، می توانید نسخه متن زیر را بخوانید:
روش 1: افزودن نمادهای منو با استفاده از یک پلاگین h4>
این روش آسان تر است و به کاربران مبتدی توصیه می شود زیرا شامل کدی نیست.
اولین کاری که باید انجام دهید نصب و فعال سازی تصویر منو . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال سازی ، باید به صفحه ظاهر “منوها” بروید
از اینجا می توانید روی هر مورد از فهرست در ستون سمت راست کلیک کنید تا آن را گسترش دهید. دکمه های “تصویر منو” و “تصویر روی شناور” را در تنظیمات هر مورد مشاهده خواهید کرد.
با استفاده از این دکمه ها می توانید نماد تصویر منو را که می خواهید استفاده کنید انتخاب یا بارگذاری کنید. اگر می خواهید ، فقط می توانید یک تصویر منو بارگذاری کنید و تصویر شناور را نادیده بگیرید.
در لیست کشویی “اندازه تصویر” ، می توانید اندازه ای را برای نماد تصویر انتخاب کنید. این اندازه هم برای تصویر نماد منو و هم برای تصویر روی شناور اعمال خواهد شد.
این افزونه دارای گزینه های مختلفی برای انتخاب است. اما توصیه می کنیم با استفاده از اندازه های 24 × 24 یا 36 36 36 نمادهای منو را کوچک نگه دارید.
اگر می خواهید اندازه دلخواه خود را برای تصاویر منو اضافه کنید ، می توانید این کار را با افزودن این کد در پرونده توابع.php یا افزونه اختصاصی سایت .
add_filter ('menu_image_default_sizes' ، عملکرد ($ اندازه))
// اندازه پیش فرض 36x36 را حذف کنید
تنظیم نشده ($ sizes ['menu-36x36'])؛
// اندازه جدید اضافه کنید
$ sizes ['menu-50x50'] = آرایه (50،50)؛
// بازگشت اندازه $ (لازم)
اندازه $ بازگشت
})
همچنین می توانید موقعیت عنوان را در بالا ، پایین ، قبل یا بعد از نماد تصویر تنظیم کنید. همچنین به شما اجازه می دهد عنوان را مخفی کرده و فقط نماد تصویر را برای هر منوی پیمایش نمایش دهید.
هنگامی که تنظیمات را پیکربندی کردید ، به سادگی به همه موارد منوی پیمایش خود به طور جداگانه نمادهای تصویر اضافه کنید. در مرحله بعدی ، باید روی دکمه “ذخیره منو” کلیک کنید تا نمادهای منو را مشاهده کنید.
روش 2: افزودن نمادهای منو با استفاده از کد قطعه h4>
این روش برای کاربران باتجربه تر است که راه خود را در مورد CSS می دانند.
ابتدا برای بارگذاری همه نمادهای تصویر خود در وردپرس ، باید از رسانه »افزودن موارد جدید بازدید کنید. پس از بارگذاری ، باید URL های آنها را کپی کرده و در یک ویرایشگر متن مانند Notepad جایگذاری کنید.
بعد ، باید به منوها بروید و روی “ گزینه های صفحه” در گوشه سمت راست بالای صفحه شما. در گزینه های صفحه ، باید گزینه “CSS Classes” را علامت بزنید.
بعد از آن ، به پایین پیمایش کنید و روی هر موردی از منو کلیک کنید تا تنظیمات آن گسترش یابد. شما یک قسمت “کلاسهای CSS (اختیاری)” را مشاهده خواهید کرد که در آن باید نام کلاس CSS را برای مورد منو اضافه کنید.
اکنون باید این را اضافه کنید CSS سفارشی به موضوع خود.
.homeicon {
background-image: url ('http://www.example.com/wp-content/uploads/2018/09/home.png')؛
background-تکرار: بدون تکرار؛
background-position: چپ؛
padding-left: 5px؛
}
در این قطعه CSS ، .homeicon نام کلاس است که شما در قسمت کلاسهای CSS در بالا اضافه کرده اید.
بسته به موضوع مورد نظر ، ممکن است لازم باشد کمی CSS را تغییر دهید تا بتوانید مکان مناسبی را برای نمادهای منو بدست آورید. پس از رضایت از نتیجه ، مراحل کار را برای همه موارد منو تکرار کنید.
این همه است. امیدواریم این مقاله به شما کمک کند یاد بگیرید که چگونه نمادهای تصویر را با منوهای ناوبری در وردپرس اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در نحوه سبک دهی به منوهای پیمایش وردپرس .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/.