نحوه افزودن نکات راهنمای jQuery در فرم نظرات وردپرس

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

چرا نکات راهنمای jQuery اضافه می شود؟ h4>

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

با افزودن نکات راهنمای jQuery ، می توانید تجربه کاربر را افزایش دهید و ظاهر زیبایی بیشتری خواهد داشت.

نحوه افزودن نکات راهنمای jQuery

اولین کاری که شما باید انجام دهید این است که یک پوشه در دسک تاپ خود ایجاد کنید و نام آن را wpb-comment-tooltips بگذارید. در داخل این پوشه ، باید این سه پرونده را ایجاد کنید:

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

برای ایجاد این پرونده ها از یک ویرایشگر متن ساده مانند Notepad استفاده کنید. پس از ایجاد پرونده ها ، باید wpb-comment-tooltip.php را در ویرایشگر متن باز کنید. این کد را در پرونده کپی و جایگذاری کنید:

 '. __ ("ایمیل" ، "بیست و سیزدهم"). "".
      ($ req؟ ' * ': ").
      ''؛
    $ Fields ['url'] = '
 '.
      __ ("وب سایت" ، "بیست و سیزدهم"). "".
      '
'؛
$ Fields ['author'] = '
'.
      ' ". __ ("نام" ، "بیست و سیزدهم"). "".
      ($ req؟ ' * ': ").
      '
'؛
    برگرداندن $ فیلدها؛
}
add_filter ('comment_form_default_fields'، 'alter_comment_form_forms')؛
؟>

در کد بالا ، ابتدا یک عنوان پلاگین ایجاد کردیم ، با توجه به نام و توضیحات این پلاگین. پس از آن ما پرونده JavaScript و CSS خود را بارگیری می کنیم (به راهنمای ما در نحوه افزودن جاوا اسکریپت و سبک ها در وردپرس ).

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

استفاده کرده ایم

title = "لطفاً از نام اصلی خود استفاده کنید ، هیچ کلمه کلیدی وجود ندارد."

اکنون که پرونده پلاگین را ایجاد کرده اید ، وقت آن است که کمی jQuery اضافه کنید. پرونده wpb-tooltip.js را باز کنید و این کد را در داخل آن اضافه کنید:

(تابع ($) {
$ ("#commentform") .tooltip ({موقعیت: {
my: "مرکز پایین 10" ،
        در: "مرکز بالا" ،
        با استفاده از: عملکرد (موقعیت ، بازخورد) {
          $ (این) .css (موقعیت)؛
          $ ("
")
            .addClass ("پیکان")
            .addClass (بازخورد. عمودی)
            .addClass (بازخورد. افقی)
            AppendTo (این)
        }}})؛
}) (jQuery)؛

 در این کد ،  #commentform  انتخابی است که در آن jQuery نکات راهنما را نمایش می دهد و  .tooltip  قسمت محتوایی است که در آن موقعیت را برای راهنمای ابزار مشخص کرده ایم. 
 اکنون مرحله آخر اضافه کردن کمی CSS به پرونده  wpb-tooltip.css  است. به سادگی این کد را کپی و جای گذاری کنید: 
.ui-tooltip ، .arrow: بعد از {
    پس زمینه: # 356aa0؛
    حاشیه: 2px سفید جامد؛
  }
  .ui-tooltip {
    بالشتک: 10px 20px؛
    رنگ سفید؛
    شعاع مرز: 20px؛
    font: bold 14px "Helvetica Neue"، Sans-Serif؛
    تبدیل متن: بزرگ؛
    box-shadow: 0 0 7px # 356aa0؛
حداکثر عرض: 350 پیکسل
  }
  .فلش {
    عرض: 70 پیکسل
    ارتفاع: 16 پیکسل؛
    سرریز: پنهان
    موقعیت: مطلق؛
    سمت چپ: 50٪؛
    margin-left: -35px؛
    پایین: -16 پیکسل؛
  }
  .arrow.top {
    بالا: -16 پیکسل؛
    پایین: خودکار؛
  }
  .arrow.left {
    سمت چپ: 20٪؛
  }
  .arrow: بعد از {
    محتوا: ""؛
    موقعیت: مطلق؛
    سمت چپ: 20px؛
    بالا: -20 پیکسل؛
    عرض: 25 پیکسل
    ارتفاع: 25 پیکسل
    box-shadow: 6px 5px 9px -9px # 356aa0؛
    -webkit-transform: چرخش (45deg) ؛
    -moz-transform: چرخش (45deg) ؛
    -ms-transform: چرخش (45deg) ؛
    -o-transform: چرخش (45deg) ؛
    tranform: چرخش (45deg) ؛
  }
  .arrow.top: بعد از {
    پایین: -20 پیکسل؛
    بالا: خودکار؛
  }

 در صورت تمایل می توانید این فایل CSS را برای رفع نیازهای خود اصلاح کنید.

 این همه است. اکنون شما با موفقیت افزونه ای ایجاد کرده اید که نکات راهنمای jQuery را در فرم نظرات وردپرس خود اضافه می کند. تمام کاری که شما باید انجام دهید اینست که پوشه  wpb-comment-tooltips  را از دسک تاپ خود به پوشه  / wp-content / plugins /  در وب سرور خود با استفاده از  FTP  مشتری مانند Filezilla. پس از بارگذاری افزونه ، به صفحه  افزونه ها  در قسمت مدیریت وردپرس رفته و افزونه را فعال کنید. 

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