در این مقاله چگونگی اضافه کردن آیکون به منو را یاد خواهید گرفت. اگر با کد نویسی آشنایی ندارید، از روش دوم استفاده نمایید.
شما می‌توانید برای دسته‌بندی‌ها یا صفحات خود در منو، آیکون‌های جذاب در نظر بگیرید. آیتم‌های منو با داشتن یک آیکون بسیار زیباتر خواهند شد.
همچنین این کار باعث می‌شود تا وبسایت شما حرفه‌ای‌تر به نظر برسد و ضریب اعتماد نیز افزایش پیدا کند.
اکثر قالب‌های رایگان تنظیمات خاصی برای اضافه کردن آیکون به منو ندارند و در این قالب‌ها، اضافه کردن آیکون به منو بدون افزونه صورت نمی‌گیرد.
کد نویسی یا افزونه؟
شاید برای شما هم سؤال باشد که چرا زمانی که برای این کار افزونه وجود دارد باید از کد نویسی استفاده کنیم؟ در رابطه با این موضوع باید ذکر کنیم زمانی که شما یک افزونه نصب می‌کنید، فضا و منابع هاست شما اشغال می‌شود و سرعت پردازش سایت کمی پایین می‌آید.
از طرفی این‌یک کار بسیار کوچک است و با چند خط کد ساده انجام می‌شود و نیازی به نصب افزونه نیست.
اما بااین‌وجود، کد نویسی نیز معایب خودش را دارد؛ درصورتی‌که کاربر با کد نویسی آشنایی نداشته باشد ممکن است کدهای سایت باهم تداخل پیدا کنند و مشکلاتی ایجاد شود.
داستان آموزش اضافه کردن آیکون به منو در وردپرس
فرقی نمی‌کند که چه وب‌سایتی داشته باشید، زیبایی یک اصل طراحی است که باید به خاطر داشته باشید. اضافه کردن آیکون به منو یک ویژگی خوب است که باعث زیبایی منو وبسایت وردپرسی شما می‌شود.
اضافه کردن آیکون به منو در وردپرس
قبل از تغییر یک فایل پشتیبان (Backup) تهیه کنید. اولین کاری که باید بکنید این است که تصاویر آیکون را در کتابخانه وردپرس آپلود کنید.
برای این کار باید به پیشخوان وردپرس>رسانه>اضافه کردن جدید بروید.
سپس آدرس اینترنتی (URL) هر آیکون را کپی کرده و درجایی نگهداری کنید. مثلاً برای این کار می‌توانید از یک نوت پد استفاده کنید.
سپس به بخش نمایش>فهرست‌ها بروید.
فهرست موردنظر خود را انتخاب کنید. روی آیتم موردنظر که قصد اضافه کردن آیکون را دارید کلیک کنید تا پنجره ویرایش آن باز شود. سپس در قسمت (Css Classes) می‌توانید کلاس css موردنظر خود را بنویسید. از این کلاس در مرحله کد نویسی استفاده خواهیم کرد. مثلاً برای آیتم خانه می‌توانید کلاس homepage را در نظر بگیرید.
در مرحله بعدی به بخش نمایش>ویرایشگر پوسته بروید و وارد فایل شیوه‌نامه (Style.css) وارد شوید. در این بخش تمامی کدهای css سایت خود را مشاهده می‌کنید.کد زیر را به آن اضافه نمایید:
.homepage {
background-image: url('https://www.example.com/wp-content/uploads/2014/12/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
در قطعه کد بالا (homepge) همان کلاسی است که برای آیتم خانه تعریف کرده‌ایم. آدرس اینترنتی آن را نیز در بخش background-image: قرار دهید.
حال برای هر آیتم جداگانه باید قطعه کد بالا را تکرار کنید.
درصورتی‌که نمی‌خواهید آیکون را بارگذاری کنید، یا نمی‌خواهید از آیکون‌های سفارشی و دلخواه خود استفاده کنید؛ کتابخانه‌ای به نام Font Awesome وجود دارد که برای استفاده از این کتابخانه همه کاری که باید انجام دهید این است که وارد این سایت شوید و کدهای CSS مربوط به هر آیکون را کپی کنید و در مکان مناسب جای گذاری کنید.
استفاده از Font Awesome در وردپرس
در ابتدا باید به پیشخوان وردپرس>نمایش>ویرایشگر بروید و فایل (functions.php) را بازکنید. اگر از این طریق نتوانستید آن را پیدا کنید، از طریق‌هاست نیز می‌توانید به آن دسترسی داشته باشید.
سپس قطعه کد زیر را جای گذاری کنید.
function wmpudev_enqueue_icon_stylesheet() {
wp_register_style('fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
wp_enqueue_style('fontawesome');
}
add_action('wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet');
?>
کاری که این کد انجام می‌دهد این است که آیکون را از آدرس اینترنتی که برای آن مشخص‌شده است دریافت میکند.
حال برای اضافه کردن آیکون به آیتم‌های منو دقیقاً همان کاری را باید انجام دهید که در مرحله قبل انجام دادیم. به پیشخوان وردپرس>نمایش>فهرست مراجعه نمایید.
جای گذاری کلاس در این قسمت بسیار مهم است. در ادامه تعدادی از کلاس‌های Font Awesome را مشاهده می‌کنید:
برای آیتم خانه: fa fa-lg fa-home
برای آیتم اخبار: fa fa-lg fa-newspaper-o
برای آیتم گالری: fa fa-lg fa-camera-retro
برای آیتم درباره: fa fa-lg fa-info-circle
برای آیتم تماس: fa fa-lg fa-envelope-o
سپس فهرست را ذخیره کنید تا تغییرات را مشاهده کنید.
اضافه کردن آیکون به منو در وردپرس با افزونه
این روش برای کاربرانی است که با کد نویسی آشنایی ندارند و ترجیح می‌دهند از افزونه استفاده کنند. محبوب‌ترین افزونه برای این کار در وردپرس، افزونه Menu Icons است.
امکانات ویژه افزونه Menu Icons:
مزیت:
- رایگان
- دارای آیکون‌ها پیش‌فرض
- اضافه کردن آیکون به منو با یک کلیک
- و امکانات دیگر
به سراغ نصب افزونه بروید.
نصب افزونه Menu Icons
برای نصب این افزونه طبق تصویر زیر اقدام کنید:
- یا از قسمت افزونه‌ها روی گزینه بارگذاری افزونه کلیک کنید و از لینک زیر افزونه را دانلود کنید و در قسمت بارگذاری، افزونه را بارگذاری کنید.
- یا اینکه از قسمت کلیدواژه Menu Icons را تایپ کنید و افزونه را نصب و سپس فعال‌سازی کنید.
درصورتی‌که با نصب کردن افزونه مشکلی دارید می‌توانید آموزش نصب افزونه را مشاهده کنید.
پس از نصب و فعال‌سازی افزونه به بخش نمایش>فهرست بروید.
بر روی آیتم موردنظر کلیک کنید. مشاهده می‌کنید که قسمتی به نام (Icon) به این بخش اضافه‌شده است. بر روی (Select) کلیک کنید و از تصاویر بازشده یکی را انتخاب کرده و فهرست را ذخیره کنید.
جمع‌بندی:
در این آموزش چگونگی اضافه کردن آیکون به منو در وردپرس را فراگرفتید. امیدواریم لذت ببرید.
