ساخت تصاویر تعاملی در وردپرس با افزونه رایگان Draw Attention

اگه می‌خواید بازدیدکننده با کلیک روی قسمت‌های مختلف یک تصویر، توضیح بیشتری ببینه یا به صفحه دیگه‌ای بره، تصویر تعاملی به کارتون میاد. مثلاً می‌تونید اجزای یک محصول، اتاق‌های یک نقشه، اعضای یک تیم یا بخش‌های مختلف یک اینفوگرافیک رو قابل کلیک کنید.

توی این آموزش با نسخه رایگان افزونه Draw Attention کار می‌کنیم. قدم‌به‌قدم تصویر اصلی رو انتخاب می‌کنید، ناحیه‌های تعاملی رو می‌کشید، برای هر ناحیه توضیح یا لینک می‌ذارید و نتیجه رو داخل نوشته یا برگه وردپرس نمایش می‌دید. نسخه رایگان برای ساخت یک تصویر تعاملی کافیه و برای دنبال‌کردن این آموزش نیازی به خرید نسخه پولی ندارید.

تصویر تعاملی چیه و کجا به کار میاد؟

تصویر تعاملی چند ناحیه مشخص و قابل کلیک داره. به هرکدوم از این ناحیه‌ها معمولاً Hotspot گفته می‌شه؛ یعنی نقطه یا محدوده‌ای که با کلیک یا لمس کاربر، کار مشخصی انجام می‌ده.

هر ناحیه می‌تونه اطلاعات بیشتری نشون بده یا کاربر رو به یک آدرس دیگه بفرسته. از این قابلیت می‌تونید برای معرفی ویژگی‌های محصول، نمایش نقشه، آموزش تصویری یا توضیح اجزای یک طرح استفاده کنید. فقط یادتون نره که تصویر تعاملی جای متن اصلی صفحه رو نمی‌گیره؛ چون هم کاربر و هم موتور جستجو به توضیح متنی روشن نیاز دارن.

قبل از شروع، یک تصویر مناسب آماده کنید. بهتره تصویر خیلی شلوغ نباشه و قسمت‌هایی که قراره قابل کلیک بشن، مرز مشخصی داشته باشن. اگه هنوز عکس مناسبی پیدا نکردید، راهنمای پیدا کردن عکس برای مطالب سایت بدون دردسر کپی‌رایت می‌تونه کمکتون کنه.

نصب افزونه رایگان Draw Attention

توی پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید و Draw Attention رو جستجو کنید. افزونه رو نصب کنید و بعد روی «فعال‌سازی» بزنید. بهتره پیش از نصب، نام افزونه و سازنده اون رو با صفحه رسمی افزونه در مخزن وردپرس تطبیق بدید تا اشتباهی افزونه مشابهی رو نصب نکنید.

بعد از فعال‌سازی، گزینه Draw Attention توی منوی پیشخوان دیده می‌شه. نسخه رایگان امکان ساخت و مدیریت یک تصویر تعاملی رو بهتون می‌ده و برای این آموزش هم به گزینه‌ها و امکانات پولی نیازی نداریم.

ساخت اولین تصویر تعاملی

از منوی Draw Attention وارد بخش «Edit Image» بشید. توی نسخه رایگان، ساخت و ویرایش تصویر تعاملی از همین صفحه انجام می‌شه. ممکنه توی بعضی راهنماها گزینه «Add New» رو ببینید، ولی امکان ساخت چند تصویر جدا به نسخه Pro مربوطه.

اول برای تصویرتون یک عنوان مشخص بنویسید. این عنوان بیشتر برای مدیریت تصویر توی پیشخوان استفاده می‌شه. پس نامی مثل «معرفی بخش‌های محصول» یا «نقشه دفتر» انتخاب کنید تا بعداً بدون بازکردن تصویر هم بفهمید به کدوم قسمت سایتتون مربوطه.

حالا تصویر اصلی رو از کتابخانه رسانه انتخاب کنید یا فایل تازه‌ای آپلود کنید. کیفیت تصویر باید مناسب باشه، ولی بهتره حجم فایل رو پایین نگه دارید تا سرعت صفحه افت نکنه. متن جایگزین یا Alt رو هم براساس موضوع عکس بنویسید. Alt همون توضیح کوتاهیه که به دسترس‌پذیری کمک می‌کنه و وقتی تصویر بارگذاری نمی‌شه، جای اون دیده می‌شه.

کشیدن ناحیه‌های قابل کلیک روی تصویر

توی مرحله بعد به بخش Hotspot Areas برید. ابزار ترسیم افزونه سه شکل اصلی Polygon، Rectangle و Circle داره. Polygon برای دورگیری شکل‌های نامنظم مناسبه، Rectangle محدوده‌های مستطیلی رو پوشش می‌ده و Circle هم برای قسمت‌های گرد به کار میاد.

ابزار مناسب رو انتخاب کنید و محدوده دلخواهتون رو روی تصویر بکشید. برای شکل‌های پیچیده، Polygon معمولاً کنترل بیشتری بهتون می‌ده. با ابزارهای زوم و جابه‌جایی تصویر هم می‌تونید مرز ناحیه رو دقیق‌تر تعیین کنید. بعد از کشیدن شکل، جای نقطه‌ها رو بررسی کنید و اگه لازم بود، اون‌ها رو جابه‌جا کنید.

برای هر قسمت مهم یک ناحیه جدا در نظر بگیرید، ولی تصویر رو با نقطه‌های زیاد شلوغ نکنید. کاربر باید در نگاه اول متوجه بشه کدوم بخش‌ها قابل کلیک هستن. برای شناخت بهتر تفاوت ظاهر خوب با تجربه راحت کاربر هم می‌تونید مقاله تفاوت رابط کاربری و تجربه کاربری رو بخونید.

تنظیم عملکرد هر ناحیه

بعد از انتخاب هر ناحیه، باید Action یا همون کاری رو تعیین کنید که با کلیک کاربر انجام می‌شه. معمولاً برای هر ناحیه یکی از این دو گزینه رو انتخاب می‌کنید:

• Show More Info: عنوان، متن و در صورت نیاز یک تصویر دیگه رو کنار تصویر اصلی نشون می‌ده.
• Go to URL: کاربر رو به صفحه یا آدرس مشخصی می‌فرسته.

اگه Show More Info رو انتخاب کردید، یک عنوان کوتاه و توضیح ساده و روشن بنویسید. برای Go to URL هم آدرس کامل و درست مقصد رو وارد کنید. هر ناحیه در حالت عادی فقط یک عملکرد اصلی داره؛ پس برای یک ناحیه، نمایش توضیح و انتقال مستقیم به لینک رو هم‌زمان انتخاب نکنید.

رنگ عادی ناحیه، رنگ اون موقع قرارگرفتن نشانگر ماوس و ظاهر بخش اطلاعات هم قابل تنظیمه. رنگی رو انتخاب کنید که روی تصویر خوب دیده بشه و نوشته‌ها رو ناخوانا نکنه. در آخر، تغییراتتون رو ذخیره یا به‌روزرسانی کنید.

نمایش تصویر تعاملی در نوشته یا برگه

برای نمایش تصویر توی ویرایشگر بلوکی وردپرس، نوشته یا برگه دلخواهتون رو باز کنید و روی دکمه افزودن بلوک بزنید. Draw Attention رو جستجو کنید و بلوک «Draw Attention Image» رو به محتوا اضافه کنید. بعد تصویر تعاملی ساخته‌شده رو انتخاب کنید و پیش‌نمایش صفحه رو ببینید.

اگه ویرایشگرتون بلوک افزونه رو نشون نمی‌ده، شورت‌کد `[drawattention]` رو داخل بلوک شورت‌کد یا بخش متن بذارید. شورت‌کد یک عبارت کوتاه داخل کروشه هست که وردپرس موقع نمایش صفحه، اون رو با خروجی افزونه عوض می‌کنه. نسخه رایگان از همین شورت‌کد ساده برای تنها تصویر تعاملی سایت استفاده می‌کنه.

در پایان، صفحه رو روی کامپیوتر و موبایل آزمایش کنید. مطمئن بشید ناحیه‌ها با لمس انگشت هم درست کار می‌کنن، متن‌ها راحت خونده می‌شن و همه لینک‌ها به مقصد درست می‌رن.

محدودیت‌های نسخه رایگان Draw Attention

نسخه رایگان Draw Attention برای ساخت یک تصویر تعاملی گزینه مناسبیه و ابزارهای اصلی کشیدن ناحیه، نمایش توضیح و لینک‌دادن رو در اختیارتون می‌ذاره. اگه فقط برای یک نقشه، تصویر محصول یا راهنمای تصویری به چنین قابلیتی نیاز دارید، لازم نیست نسخه پولی رو بخرید.

مهم‌ترین محدودیت نسخه رایگان اینه که فقط می‌تونید یک تصویر تعاملی بسازید. ساخت تعداد نامحدود تصویر و بعضی تنظیمات بیشتر توی نسخه پولی ارائه می‌شن. قیمت و جزئیات پلن‌ها ممکنه تغییر کنه، پس اگه قصد خرید داشتید، اطلاعات روز رو از سایت رسمی افزونه بررسی کنید.

سؤال‌های متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.