اضافه کردن تصویر به فهرست با افزونه Menu Image و به صورت دستی
اضافه کردن تصویر به آیتم های فهرست با افزونه Menu Image یکی از کارهایی است که می توانید برای داشتن یک وب سایت وردپرسی زیبا و جذاب انجام دهید. معمولاً در سایت های وردپرسی، فهرست ها لینک های ساه متنی هستند اما می توانید با اضافه کردن آیکون یا تصویر به فهرست، منوی خود را تعاملی تر و زیباتر کنید.
اضافه کردن آیکون های تصویری در کنار فهرست می تواند کاربران را تحت تاثیر بیشتری قرار داده و ظاهر سایت شما را جذاب کنند. به عنوان مثال استفاده از یک آیکون تصویری زیبا در کنار آیتم تماس با ما در فهرست می تواند آن را بین آیتم های دیگر فهرست شاخص کرده و به صورت برجسته تری نشان دهد.
دو راه برای اضافه کردن تصویر به فهرست وجود دارد. یک راه با استفاده از افزونه Menu Image که یک افزونه کاربردی و آسان است، می باشد و راه دیگر با استفاده از کدهای CSS است. در این مقاله ما هر دو راه را به شما آموزش می دهیم.
آموزش اضافه کردن تصویر به آیتم های فهرست با افزونه Menu Image
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه، در پیشخوان وردپرس به مسیر نمایش » فهرست ها بروید.
در کنار هر کدام از آیتم های فهرست یک فلش وجود دارد که با کلیک بر روی آن، آیتم مورد نظر به صورت کشویی باز می شود. با باز کردن آیتم می بینید که تنظیمات مربوط به افزودن تصویر به دیگر تنظیمات آن اضافه شده است.
مشاهده می کنید که بخش های menu image و Image on hover به تنظیمات هر آیتم اضافه شده است.
با استفاده از دکمه set image می توانید آیکون مورد نظر خود را انتخاب و آپلود کنید.
با زدن دکمه set image on hover می توانید یک تصویر انتخاب کرده و آن را آپلود کنید. تصویری که انتخاب کرده اید با نگه داشتن موس بر روی آیتم فهرست نمایش داده می شود. اگر مایل باشید می توانید تنها تصویر آیکون را آپلود کرده و از تصویر hover چشم پوشی کنید.
در قسمت Image size می توانید برای آیکون تصویری یک اندازه انتخاب کنید. این اندازه هم به آیکون منو و هم به تصویر hover اعمال می شود.
در افزونه Menu Image چندین گزینه مختلف برای انتخاب سایز تصویر وجود دارد. اما ما توصیه می کنیم اندازه آیکون های منو را کوچک انتخاب کنید. ۲۴×۲۴ یا ۳۶×۳۶ گزینه های مناسبی هستند.
اگر می خواهید برای تصاویر منو اندازه سفارشی خود را اضافه کنید، می توانید این کار را با اضافه کردن کد زیر در فایل function.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; });
با اعمال کد فوق اندازه ۳۶×۳۶ حذف شده و اندازه ۵۰×۵۰ جای آن را می گیرد.
در قسمت Title position می توانید موقعیت عنوان را در بالا، زیر، قبل یا بعد از آیکون تصویر قرار دهید. این قسمت از افزونه Menu Image به شما اجازه می دهد که عنوان را پنهان کنید و تنها آیکون تصویر را برای هریک از قسمت های منو نمایش دهید.
همین کار را برای باقی آیتم های فهرست انجام داده و آیکون های تصویر را به تمام آیتم های فهرست به طور جداگانه اضافه کنید. هنگامی که تنظیمات مورد نظر خود را اعمال کردید، روی دکمه save کلیک کنید. حال می توانید آیکون های فهرست را ببینید.
اضافه کردن آیکون های تصویری به آیتم های فهرست با استفاده از css
افزونه Menu Image یک راه عالی برای اضافه کردن تصویر به آیتم های فهرست است. با این حال شما می توانید این کار را به صورت دستی با استفاده از کدهای CSS سفارشی نیز انجام دهید.
اولین کاری که باید انجام دهید، آپلود کردن تصاویر در وردپرس است. بهترین روش برای این کار رفتن به مسیر رسانه » افزودن در پیشخوان وردپرس و آپلود کردن تمام آیکون های تصویر در این قسمت است. پس از آپلود کردن تصاویر، آدرس URL آنها را کپی کرده و در یک ویرایشگر متنی مانند Notepad ذخیره کنید.
اکنون در پیشخوان وردپرس به مسیر نمایش » فهرست ها بروید و روی گزینه “تنظیمات صفحه” در بالای صفحه سمت راست کلیک کنید و جعبه “کلاس css ” را تیک بزنید.
سپس به سمت پایین صفحه اسکرول کرده و روی تمام آیتم های فهرست کلیک کنید تا تنظیمات آنها باز شود. فیلد “کلاس های CSS (اختیاری)” را می بینید در اینجا باید یک نام کلاس CSS را به آیتم منو اضافه کنید.
حال باید CSS سفارشی زیر را به فایل style.css قالب خود اضافه کنید.
.contactus { background-image: url('http://test/wp-content/uploads/2018/10/telephone-icon-1.jpg'); background-repeat: no-repeat; background-position: left; padding-left: 5px; }
در این قطعه کد “contactus” نام کلاسی است که در فیلد “کلاس های CSS “در بالا اضافه کردید. در خط دوم، url تصویر خود را که قبلاً سیو کرده بودید قرار دهید.
بسته به قالبی که انتخاب کرده اید شاید لازم باشد کد های CSS را اندکی دستکاری کنید تا بهترین محل قرارگیری را برای آیکون فهرست پیدا کنید. اگر از نتایج راضی بودید، این روند را برای دیگر آیتم های فهرست تکرار کنید.
شما با به کار بردن FTP در وردپرس می توانید کدهای CSS سفارشی را به وب سایت خود اضافه کنید. اما روش آسان تر برای اضافه کردن کدهای CSS سفارشی به وردپرس استفاده از پیشخوان وردپرس است. در این قسمت از آموزش اضافه کردن تصاویر به آیتم های فهرست با استفاده از افزونه Menu Image و به صورت دستی، به بررسی نحوه انجام این کار می پردازیم.
در پیشخوان وردپرس به مسیر نمایش » پوسته ها بروید. روی دکمه “سفارشی سازی” در قالب فعال خود کلیک کنید.
در سایدبار سمت راست صفحه روی “CSS اضافی” کلیک کنید.
باکسی باز می شود که می توانید در آن کدهای CSS سفارشی را وارد کنید. با اعمال هر تکه کد می توانید پیش نمایشی از آن را به صورت زنده مشاهده کنید.
افزونه Menu Image یک افزونه عالی وردپرس است که کار اضافه کردن تصاویر و آیکون ها را به آیتم های فهرست برای هرکسی بدون داشتن اطلاعات برنامه نویسی و CSS آسان می کند. اگر می خواهید فهرست های کاربردی تر و تعاملی تری داشته باشید می توانید از بهترین افزونه های مگامنو وردپرس استفاده کنید.
امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.
دانلود افزونه
دیدگاه ها