ساخت تولتیپ در وردپرس برای متن و تصویر؛ آموزش قدم‌به‌قدم

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

برای انجام این کار از افزونه رایگان CM Tooltip Glossary در مخزن رسمی وردپرس استفاده می‌کنیم. این افزونه واژه‌هایی رو که تعریف می‌کنید داخل نوشته‌ها پیدا می‌کنه و توضیح اون‌ها رو به‌شکل تولتیپ نشون می‌ده. مراحل این مقاله بر اساس نسخه 4.5.6 افزونه نوشته شدن.

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

تولتیپ در وردپرس چیه و کجا به کارتون میاد؟

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

تفاوت تولتیپ با پاپ‌آپ و متن راهنما

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

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

چه اطلاعاتی برای تولتیپ مناسب هست؟

• معنی کوتاه یک اصطلاح تخصصی
• توضیح کاربرد یک آیکون یا دکمه
• معرفی یک بخش مشخص از تصویر
• یک راهنمای کوتاه برای پرکردن فیلد فرم
• اطلاعات تکمیلی که نبودنش مانع انجام کار نمی‌شه

چه وقت‌هایی بهتره از تولتیپ استفاده نکنید؟

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

قبل از ساخت تولتیپ در وردپرس به این نکته‌ها توجه کنید

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

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

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

بررسی عملکرد تولتیپ در موبایل و صفحه‌کلید

روی گوشی چیزی به اسم نگه‌داشتن نشانگر موس روی یک کلمه نداریم. برای همین، افزونه باید بازشدن تولتیپ با لمس رو پشتیبانی کنه. تولتیپ بهتره با صفحه‌کلید هم باز بشه؛ یعنی کاربر با کلید Tab به بخش فعال‌کننده برسه و با Enter یا Space توضیح رو ببینه.

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

کوتاه و قابل‌فهم نگه‌داشتن توضیحات

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

ساخت تولتیپ در وردپرس بدون کدنویسی

CM Tooltip Glossary هر اصطلاح رو مثل یک نوشته جدا ذخیره می‌کنه. عنوان این نوشته همون کلمه هدفه و متن داخل اون به‌عنوان تعریف کلمه استفاده می‌شه. افزونه بعد از انتشار، نمونه‌های اون کلمه رو داخل محتوای سایت پیدا می‌کنه و تولتیپ رو به‌صورت خودکار بهشون اضافه می‌کنه.

نصب و فعال‌کردن افزونه CM Tooltip Glossary

1. وارد پیشخوان وردپرس بشید.
2. از منوی «افزونه‌ها» وارد بخش «افزودن افزونه تازه» بشید.
3. عبارت CM Tooltip Glossary رو در کادر جست‌وجو بنویسید.
4. افزونه‌ای رو پیدا کنید که توسعه‌دهنده اون CreativeMindsSolutions هست. برای اینکه افزونه مشابهی رو اشتباهی نصب نکنید، نام و توسعه‌دهنده رو با صفحه رسمی CM Tooltip Glossary تطبیق بدید.
5. روی دکمه نصب و بعد فعال‌سازی کلیک کنید.

بعد از فعال‌سازی ممکنه راه‌انداز اولیه افزونه باز بشه. این راه‌انداز چند تنظیم پایه رو نشون می‌ده. می‌تونید مراحل اون رو کامل کنید یا فعلا تنظیمات پیش‌فرض رو نگه دارید و بعدا از صفحه تنظیمات تغییرشون بدید.

پیداکردن تنظیمات تولتیپ در پیشخوان وردپرس

بعد از فعال‌سازی، منوی «CM Tooltip Glossary» به پیشخوان اضافه می‌شه. برای دیدن تنظیمات افزونه، از همین منو وارد «Settings» بشید. این صفحه تنظیمات مربوط به نمایش اصطلاح‌ها، صفحه واژه‌نامه و ظاهر تولتیپ رو در اختیارتون می‌ذاره.

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

ساخت اولین تولتیپ برای یک کلمه

از منوی «CM Tooltip Glossary» روی «Add New» کلیک کنید.

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

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

اضافه‌کردن عنوان، توضیح و لینک به تولتیپ

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

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

انتشار تولتیپ و بررسی نتیجه در سایت

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

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

ساخت تولتیپ برای تصویر در وردپرس

انتخاب تصویر و نوشتن توضیح مناسب

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

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

تنظیم روش بازشدن تولتیپ با لمس یا نشانگر موس

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

تنظیم ظاهر تولتیپ

تغییر رنگ، اندازه متن و پس‌زمینه

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

تنظیم محل نمایش و فاصله تولتیپ

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

هماهنگ‌کردن ظاهر تولتیپ با قالب سایت

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

نمایش درست تولتیپ در موبایل و برای همه کاربران

فعال‌کردن تولتیپ با لمس صفحه

داخل تنظیمات افزونه دنبال گزینه‌هایی مثل Click، Tap یا Touch بگردید. تولتیپ باید با یک لمس باز بشه و کاربر راه واضحی برای بستن اون داشته باشه. لمس بخش دیگه‌ای از صفحه یا دکمه بستن می‌تونه این کار رو انجام بده.

قابل‌استفاده‌کردن تولتیپ با صفحه‌کلید

بدون استفاده از موس، چند بار کلید Tab رو بزنید. باید بتونید به کلمه، آیکون یا دکمه فعال‌کننده برسید. بهتره دور بخش انتخاب‌شده یک نشانه واضح دیده بشه و تولتیپ با Enter یا Space باز بشه. کلید Escape هم بهتره کادر باز رو ببنده.

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

جلوگیری از پوشاندن متن و دکمه‌های مهم

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

حل مشکل‌های رایج ساخت تولتیپ در وردپرس

تولتیپ نمایش داده نمی‌شه

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

تولتیپ روی کلمه‌های اشتباه نمایش داده می‌شه

این مشکل معمولا وقتی پیش میاد که افزونه همه نمونه‌های یک واژه رو خودکار پیدا می‌کنه. در تنظیمات دنبال محدودکردن نمایش به نوشته‌ها، برگه‌ها یا بخش‌های انتخابی بگردید. اگه چنین گزینه‌ای ندارید، از روش دستی افزونه برای علامت‌زدن کلمه موردنظر استفاده کنید.

ظاهر تولتیپ با قالب یا افزونه‌های دیگه تداخل داره

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

تولتیپ در موبایل باز یا بسته نمی‌شه

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

کش سایت اجازه نمی‌ده تغییرات رو ببینید

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

نکته‌های مهم برای استفاده بهتر از تولتیپ

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

جمع‌بندی

ساخت تولتیپ در وردپرس با نسخه رایگان CM Tooltip Glossary کار سختی نیست. افزونه رو از مخزن رسمی وردپرس نصب می‌کنید، یک اصطلاح و تعریف کوتاه براش می‌سازید و بعد نتیجه رو داخل نوشته‌های سایت می‌بینید. در پایان هم تولتیپ رو با موس، لمس و صفحه‌کلید آزمایش کنید.

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

سؤال‌های رایج

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

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