سلام خدمت تمامی کاربران عزیز همیار وردپرس؛
یکی از ویژگی هایی که یک وب سایت می تواند کاربران را بیشتر به سمت خود بکشد، تصاویر در وب سایت می باشند. قاعدتا بیش از 90 درصد مطالبی که در وب سایت خود منتشر می کنیم دارای تصویر هستند. در واقع اگر بخواهیم منطقی باشیم محتوای بدون تصویر جذابیتی برای خواندن در کاربر ایجاد نمیکند!
در زبان CSS خاصیتی به نام Hover وجود دارد. خاصیت Hover این امکان را به ما میدهد تا زمانی که کاربر روی متن یا تصویر مورد نظر با نشانه گر ماوس نگه می دارد، تصویر شناور شود.
ما با کمک افزونه مورد نظر این امکان را به تصاویر سایت میدهیم که با این خاصیت امکان نمایش تصاویر در وردپرس را فراهم کنید.
نمایش تصاویر در وردپرس با Amazing Hover Effects
این افزونه در مخزن وردپرس در دسته بندی افزونه کاربردی وردپرس به ثبت رسیده است و تا کنون بیش از 4000 بار دانلود و نصب و فعال سازی داشته است و به کمک آن می توان امکان نمایش تصاویر در وردپرس را به صورت شناور فراهم کرد.
توضیحات مختصر!!
این افزونه کاربردی وردپرس توسط Noor-E-Alam طراحی و برنامه نویسی شده است که از آخرین بروزرسانی آن تا هم اکنون که در حال نوشتن این مقاله آموزشی هستیم حدود 19 ساعت می گذرد، این نشان دهنده این است که نویسنده افزونه در بروزرسانی و رفع باگ های آن فعال است.
این افزونه کاربردی وردپرس امکاناتی از جمله:
- 20 افکت در نسخه رایگان
- پشتیبانی از مرورگر های مدرن
- تولید و استفاده از کدکوتاه (ShortCode)
- تنظیمات آسان
- و… دارد.
نکته قابل ذکر این است که این افزونه در دو نسخه رایگان و Premium برای نمایش تصاویر در وردپرس ایجاد شده است که در نسخه رایگان محدودیت هایی وجود دارد ولی در عملکرد افزونه دخالت چندانی ندارد.
آموزش کار با افزونه
ابتدا آخرین نسخه افزونه را از انتهای همین مقاله آموزشی به صورت کاملا رایگان دانلود کرده، سپس در وردپرس سایت خود نصب و فعال سازی نمایید.
بعد از نصب و فعال سازی افزونه، از قسمت منوی پیشخوان وردپرس گزینه ای تحت عنوان Hover Effects اضافه می شود که از زیر منو های موجود روی گزینه افزودن نوشته کلیک کنید. با کلیک بر روی این گزینه وارد بخش تنظیمات اصلی افزونه خواهیم شد.
در قدم اول از تنظیمات می بایستی عنوانی برای نمایش تصاویر در وردپرس انتخاب کنید .
بعد از انتخاب عنوانی برای تصاویر، وارد بخش Hover Effects Options خواهیم شد که این قسمت دارای دو بخش می باشد که در واقع تنظیمات اساسی و نهایی را شامل می شود. در انتها گزینه هایی برای زیباسازی وجود دارد ولی زیر بنای اصلی را در این بخش می سازیم.
select style
در بخش Select Style ما میتوانیم ظاهر تصویر را مشخص کنیم که به صورت دایره باشد یا شکل های هندسی دیگر که به صورت پیش فرض شکل دایره برگزیده شده است.
بخش دوم یعنی Add New Hover Item ما می بایستی تصویر مورد نظر را انتخاب کنیم. پس بی درنگ برای امکان نمایش تصاویر در وردپرس روی دکمه Add New Hover Item کلیک میکنیم.
Hover Image: در این بخش ما میبایستی تصویر مربوطه را آپلود کنیم. با کلیک بر روی این گزینه، به صورت اتوماتیک به بخش رسانه ها منتقل خواهیم شد و بعد از آپلود تصویر یا انتخاب آن روی گزینه گزینش کلیک خواهیم کرد.
Title: در این بخش ما باید عنوانی برای تصویر انتخاب نماییم.
Description: در این بخش میتوانیم متنی به عنوان توضیحاتی درباره تصویر بنویسیم.
Image Link: یکی دیگر از امکانات این افزونه کاربردی وردپرس لینک دار کردن تصویرها می باشد که این گزینه در نسخه رایگان غیر فعال می باشد.
بعد از انجام تنظیمات اصلی، وارد بخش دیگر از تنظیمات خواهیم شد که بیشتر آنان مختص به نسخه Premium می باشد که ما اینجا به آموزش آنان نیز می پردازیم.
Select Effect: در این بخش میتوانیم از 20 افکت موجود در نسخه رایگان، یکی را به عنوان خروجی برگزینیم.
Animation Direction: در این بخش میتوانیم موقعیت شروع انیمیشن (Hover) را برای نمایش تصاویر در وردپرس مشخص کنیم.
Background Color: این بخش از تنظیمات میتوانیم رنگ پس زمینه ای انتخاب کنیم.
Image Size: در این قسمت میتوانیم اندازه تصویر بارگذاری شده را محدود کنیم.
Column Space: در این قسمت از تنظیمات میتوانیم فاصله ما بین سلول ها را مشخص کنیم.
Row Space: این قسمت از تنظیمات ما میتوانیم فاصله ما بین ردیف ها را مشخص نماییم.
نکته: واحد اندازه گیری بخش های Column Space و Row Space، واحد PX (پیکسل)می باشد.
افزودن نوشته
Remove Border: در این بخش میتوانیم حاشیه دور تصویر را حذف کنیم.
Remove Heading Underline: در این بخش میتوانیم زیر خط عنوان تصویر را غیر فعال نماییم.
Open Link new tab?: این بخش از تنظیمات ما میتوانیم انتخاب کنیم که با کلیک بر روی تصویر، لینک مربوطه در زبانه دیگر از مرورگر اجرا شود.
Position: در این بخش میتوانیم موقعیت مکانی تصویر را مشخص کنیم.
Custom Font: از امکانات دیگر این افرونه، گزینش فونت می باشد .
Heading Font Size: در این بخش میتوانیم نسبت به تغییر اندازه فونت عنوان تصویر در نمایش تصاویر در وردپرس اقدام نماییم.
Heading Color: در این بخش میتوانیم رنگ عنوان تصویر را مشخص کنیم.
سایر تنظیمات
Description Font Size: این بخش از تنظیمات ما میتوانیم اندازه فونت توضیحات تصویر را مشخص کنیم.
Description Color: این بخش از تنظیمات ما را قادر خواهد ساخت که رنگ متن توضیحات را تغییر دهیم.
Move Top: در این بخش میتوانیم انتخاب کنیم که توضیحات و عنوان تصویر جا به جا شوند.
Responsive Options: با انتخاب این گزینه تنظیمات واکنش گرایی فعال خواهد شد.
تا این قسمت از تنظیمات ما 90 درصد از تنظیمات را انجام داده ایم. حال کافیست به ابتدای صفحه تنظیمات مراجعه کنیم و تنظیمات را ذخیره نماییم.
Hover effects
بعد از انتشار ، به زیر منوی بالایی این قسمت یعنی Hover Effects مراجعه میکنیم تا کد کوتاه (ShortCode) مربوطه را بدست آوریم.
حال کافیست تا کد کوتاه را در برگه یا نوشته ای قرار دهیم و آن را منتشر نماییم.
استفاده از شورت کد
بعد از منتشر کردن برگه یا نوشته، وارد صفحه مربوطه خواهیم شد و خروجی این افزونه کاربردی وردپرس را مشاهده خواهیم کرد.
نتیجه عملکرد
تصویر به وجود آمده :
پس از نگه داشتن ماوس روی تصویر:
همانطور که مشاهده می کنید نتیجه ی نمایش تصاویر در وردپرس به صورت شناور در بالا مشخص است.
موفق باشید
ناصر
سلام بزرگوار.. مرسی از بابت توضیحات این افزونه.. من دوتا سوال داشتم اول اینک چطور میهش این فری ومجانیش کرد…. و دوم اینک برای لوگو بعضی از سایتها یه حالت نوری ایجاد میکنند که در هر چند ثانیه از روی لوگو رد میشه افکت نوری.. اینو چطور میشه ایجاد کرد ایا اغزونه یی چیزی هست… متشکرم اگر راهنمایی کنید..