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

حتما برات پیش اومده، وسط خوندن یه مقاله یا گشتن تو صفحه محصول، با یه واژه عجیب یا اصطلاح تخصصی برخورد کنی و از خودت بپرسی «این یعنی چی؟!» 🤔 بعد هم چاره‌ای جز باز کردن یه تب جدید و سرچ نداشتی تا بفهمی ماجرا چیه؟ 😵‍💫

حالا بذار یه پیشنهاد باحال بهت بدم: تولتیپ (Tooltip)! 🎉 اون جعبه‌کوچولویی که وقتی ماوس رو روی یه کلمه میبری، یهو یه توضیح کوتاه و گویا ظاهر میشه. دقیقا همون چیزی که کاربر رو سر جای خودش نگه می‌داره و تجربه‌ی کاربری رو حسابی بهبود می‌ده. 😎

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

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

اگر آماده‌ای یک قدم از بقیه جلوتر باشی و تجربهٔ کاربر سایتت رو بهتر کنی، با من تا آخر این آموزش همراه باش! 😉

×

ساخت صفحه پیگیری سفارش در ووکامرس بدون افزونه

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

🧐 تولتیپ چیه؟

بین، تولتیپ (Tooltip) همون جعبه کوچولوی باحالیه که وقتی داری توی یه سایت می‌گردی و نشانگر ماوس 🖱️رو می‌بری روی یه کلمه خاص، یه دکمه، یه آیکون یا هر چیز دیگه‌ای ، یهو کنارش (معمولا بالاش) ظاهر میشه! ✨

توی اون جعبه کوچولو معمولاً یه توضیح کوتاه یا یه نکته اضافه در مورد اون چیزی که روش ماوس رو بردی، نوشته شده.

کارش اینه که اطلاعات اضافی رو بهت نشون بده اونم فقط وقتیکه تو لازمش داری، تا اینجوری صفحه سایت شلوغ نشه و همه چی تمیز و مرتب بمونه!

×

آکاردئون خفن به سبک دیوار بساز!

مطالعه

روش اول: ساخت تولتیپ با HTML و CSS

این روش ساده و کاربردی رو می‌تونی در هر قسمتی از وردپرس به‌کار ببری:
کافیه ساختار HTML زیر رو هر جا که می‌خوای تولتیپ نمایش داده بشه—مثل ابزارک HTML سفارشی المنتور، یا ویرایشگر متن وردپرس—قرار بدی. تو این آموزش من از ویجت ویرایشگر متن المنتور استفاده می‌کنم، ولی هر وقت خواستی می‌تونی مستقیم سراغ ویجت HTML بری.

در گام نخست ویجت ویرایشگر متن المنتور رو به صفحه ام اضافه میکنم بعد از قسمت تنظیماتش روی بخش کد میزنم تا ویرایشگر از حالت دیداری خارج بشه در این بخش کد html زیر رو قرار میدم:

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

توضیح کد بالا:

• <div class="tooltip">…</div>
  این «جعبهٔ بیرونی» هست. هر متنی که بین این دو تگ قرار بدی، همون چیزی‌ه که کاربر در صفحه میبینه. میتونی این متن رو به دلخواه خودت تغییرش بدی.
• <span class="tooltiptext">…</span>
  این «جعبهٔ داخلی» یا خود تولتیپه. متنی که داخل این تگ می‌نویسی، هنگام هاور (وقتی ماوس روی المان میره) به‌صورت یک کادر کوچک و راهنما ظاهر میشه. که این متن رو هم میتونی طبق سلیقه خودت و با توجه به نیازت تغییرش بدی.

در گام دوم ، باید استایل‌های CSS تولتیپ‌ت رو اضافه کنی. برای این کار به تب «پیشرفته» در ویجت ویرایشگر متن برو و کدهای زیر رو در بخش «CSS سفارشی» پیست کن:

×

ایجاد تخفیف خودکار در سبد خرید کاربر بدون افزونه

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

در کد بالا، قسمت (tooltip .tooltiptext.) در خط 6:

مسئول استایل‌دهی به «باکس تولتیپ» است. می‌تونی هر ویژگی دلخواه مثل

×

ایجاد انیمیشن چیدمان کارت‌ ها روی هم هنگام اسکرول

مطالعه

• width
• border-radius
• background-color
• color
• padding
• و هر property دیگه‌ای

رو طبق سلیقه‌ات تغییر بدی تا ظاهر تولتیپ به بهترین شکل ممکن در بیاد.

روش دوم: ساخت تولتیپ فقط با CSS

در روش دوم، دیگه اصلاً و ابداً نیازی به اون ساختار HTML که توی روش اول دیدیم نداری! با چند خط کد CSS ✨ می‌تونی به هر عنصری توی سایتت (از متن بگیر تا یه عکس، یه دکمه، یه ویجت خاص، خلاصه هرچیزی که فکرشو بکنی! 😉) به راحتی یه تولتیپ خوشگل بهش اضافه کنی!

میدونم حتما کنجکاوی و با خودت میگی وااای چطوری؟! 🤔 ادامه مطلبو بخون تا بهت بگم چطور!

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

×

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

مطالعه

خب بریم سروقت آموزش و کارایی که باید انجام بدیم.

قدم اول: ویجت تصویرت رو اضافه کن و کلاس CSS براش تعریف کن

1. اول از همه، برگه ای که میخای داخلش تولتیپ نشون بدی باز کن با المنتور و یه ویجت تصویر اضافه کن و عکست رو انتخاب کن.
2. حالا که ویجت تصویر رو اضافه کردی، روی تنظیماتش کلیک کن تا باز بشه. دنبال بخشی بگرد به نام تب “پیشرفته” (Advanced). 🧐
3. توی بخش “پیشرفته”، یه قسمت هست برای اضافه کردن کلاس‌های CSS اضافی (Additional CSS classes) یا کلاس CSS (CSS Class). پیداش کردی؟ عالیه! 👍
4. حالا توی اون کادر، دقیقاً این اسم کلاس رو وارد کن: rayawp-tooltip (مواظب باش اشتباه تایپ نکنی و نقطه چیزی هم بهش اضافه نکنی!) این اسم قراره مثل یه برچسب باشه که ما با کدهای CSS بهش اشاره می‌کنیم.

قدم دوم: کدهای CSS رو اضافه کن

حالا وقتشه کدهای جادویی CSS رو اضافه کنیم. این کدها رو میتونی همون قسمت تب پیشرفته در بخش CSS سفارشی قرار بدی تا تولتیپ در هنگام هاور به درستی نمایش داده بشه:

×

چطور از انیمیشن‌ های Lottie در سایت خود استفاده کنیم؟ (روش دانلود رایگان)

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

خب رفیق! رسیدیم به پایان این آموزش جذاب و کاربردی. 🎉

الان دیگه دو تا روش عالی بلدی برای ساختن تولتیپ‌های خوشگل و کاربردی توی سایت وردپرست، اونم بدون اینکه نیاز به نصب حتی یک دونه پلاگین اضافی داشته باشی! 💪

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

×

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

مطالعه

اگه حین پیاده‌سازی این کدها به مشکلی خوردی، سوالی برات پیش اومد یا حتی خواستی نتیجه کارتو نشون بدی و بقیه هم ببینن چه تولتیپ خفنی ساختی، حتماً حتماً توی بخش دیدگاه‌ها پایین همین مقاله برام بنویس. من همیشه دیدگاه‌ها رو می‌خونم و با کمال میل جواب می‌دم! 👇💬

خیلی ممنون که وقت ارزشمندتو با من سهیم شدی و تا پایان این آموزش همراه من بودی. تا یه آموزش جذاب و کاربردی دیگه در رایا وردپرس، فعلاً خداحافظ! 👋

×

ایجاد تخفیف خودکار در سبد خرید کاربر بدون افزونه

مطالعه