افزودن توضیحات به یک واژه با برچسب و افزونه وردپرس

  • شنبه ۲۶ تیر, ۱۳۹۵
  • ۶۹۹۱ بازدید
افزودن توضیحات به یک واژه با برچسب و افزونه وردپرس
4 (80%) 1 vote

شاید شما درباره زبان HTML اطلاعات کاملی داشته باشید ولی پای استفاده از این دانش که می‌رسد نمی‌دانیم باید چگونه از آن بهره برد!

شاید وبسایت دیجی کالا رو دیده باشید که در مشخصات یک کالا واژه هایی رو بکار می‌بره و هنگامی که با موس روی اون واژه ها نشانه می‌رید توضیحات کوتاهی در اون مورد به شما نمایش داده میشه.

digikala_tooltip_Screenshot_CupCode_ir

پیش نمایش بخش توضیحات یک واژه در تارنمای دیجی کالا

در ادامه نخست شما رو با برچسب <abbr> در زبان HTML آشنا می‌کنیم و پس از اون هم چند افزونه که قرار هست همین کار رو برای شما در سیستم مدیریت محتوای وردپرس انجام بده معرفی می‌کنیم!

برچسب Abbr چیست؟

Abbr کوتاه شده واژه Abbreviation  به معنای “کوتاه شده” است! 🙂 در زبان HTML برچسبی با همین نام وجود دارد که برای یک واژه توضیحاتی را نمایش می‌دهد.

برای نمونه اگر موس خود را بروی واژه نشانه برید که بصورت نقطه چین در زیر این واژه هم مشخص شده می‌بینید که توضیحاتی درباره این واژه به شما نمایش داده میشه!

وبسایت فروشگاهی دیجی کالا هم از چنین قابلیتی بهره برده اگرچه بسیار پیشرفته تر! در وبسایت دیجی کالا توضیحات به همراه تصاویر و شیوه نمایش پیشرفته تری هستند ولی اگر شما به این همه پیشرفته بازی دلبستگی ندارید پس با بکارگیری یک برچسب HTML در وبسایت کار راه میوفته!

شیوه بکارگیری این تگ به این صورت هست:

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

در کد بالا WHO واژه ای هست که کاربر با نشانه رفتن موس بروی آن توضیح World Health Organization خواهد دید! اگر پوسته ای که بروی وبسایت خود بکار می‌گیرید برای برچسب <abbr> شیوه ای مشخص نکرده بنابراین خودتون می‌تونید با css چنین شیوه ای رو بهش بدید گرچه این برچسب بطور پیشفرض یک شیوه تعریف شده داره.

abbr_Tag_Html_CupCode_ir

بکارگیری از برچسب abbr زبان HTML

اگر سیستم مدیریت محتوای وردپرس رو بکار گرفتید کافیه کد بالا رو در ویرایشگر “متن” به جای “دیداری” اضافه کنید تا نمایش داده بشه.

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

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

نخستین افزونه Simple Tooltips هست که در سیستم مدیریت محتوای وردپرس این امکان رو برای شما فراهم میکنه تا به واژه های مورد نظر یک Tooltip اضافه کنید؛ تنها ویژگی که این افزونه نسبت به بکارگیری برچسب <abbr> داره شیوه و استایل نمایش هست که با CSS سپارشی زیبا تر و  قابل سپارشی سازی هست.

simple_tooltip_Plugin_screenshot_CupCode_ir

پیش نمایش افزونه Simple Tooltips

افزونه WordPress Tooltips امکان افزودن تصویر رو هم به توضیحات و راهنمای شما می‌ده! این افزونه کار رو بسیار پیشرفته تر و با تنظیمات سپارشی تر انجام میده!

wordpress_tooltips_Plugin_screenshot_CupCode_ir

پیش نمایش افزونه WordPress Tooltips

و در نهایت افزونه Responsive Mobile-Friendly Tooltip که ویژگی دیگری که نسبت به افزونه های پیشین داره واکنشگرا بودنشه! به این ترتیب کاربرانی که با دستگاه های هوشند مانند تلفن های هوشمند به وبسایت شما میان بهتر می‌تونند توضیحات رو ببینند؛ اگرچه کاستی که داره نبود امکان افزودن تصویر به راهنما هست!

Responsive_Mobile-Friendly_Tooltip_screenshot_CupCode_ir

پیش نمایش افزونه Responsive Mobile-Friendly Tooltip

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

افزودن توضیحات به یک واژه با برچسب و افزونه وردپرس
4 (80%) 1 vote
برای دریافت تازه‌ترین ها به کانال تلگرامی کدفنجونی بپیوندید : cupcode_ir@

دیدگاه خود را در میان بگذارید

@

اگر ربات نیستید به پرسش پاسخ دهید! * Time limit is exhausted. Please reload the CAPTCHA.