نحوه فرم دهی فرم نظرات وردپرس (راهنمای نهایی)

آیا می خواهید سبک فرم نظرات وردپرس را در وب سایت خود تغییر دهید؟ نظرات نقش مهمی در ایجاد تعامل کاربر در یک وب سایت دارند. فرم نظرات کاربر پسند خوش ظاهر کاربران را به مشارکت در بحث تشویق می کند. به همین دلیل ما راهنمای نهایی در مورد چگونگی سبک کردن راحت فرم نظرات وردپرس را ایجاد کرده ایم.

Styling WordPress comment form

قبل از شروع کار h4>

مضامین وردپرس ظاهر وب سایت شما را کنترل می کنند. هر قالب وردپرس دارای چندین پرونده از جمله پرونده های الگو ، پرونده توابع ، JavaScripts ، و شیوه نامه ها

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

اگر قبلاً این کار را نکرده اید ، مقاله ما را در نحوه افزودن CSS سفارشی در وردپرس برای مبتدیان.

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

همانطور که گفته شد ، بیایید نگاهی به نحوه فرم دهی به فرم نظرات وردپرس بیندازیم.

از آنجا که این یک راهنمای کاملاً جامع است ، ما یک جدول محتوا برای پیمایش آسان ایجاد کرده ایم:

تغییر سبک فرم نظر در وردپرس h4>

درون اکثر مضامین وردپرس الگویی به نام comments.php وجود دارد. این فایل برای نمایش نظرات و فرم نظرات در مورد پست های وبلاگ شما استفاده می شود. فرم نظرات وردپرس با استفاده از عملکرد ایجاد می شود: .

به طور پیش فرض ، این عملکرد فرم نظر شما را با سه قسمت متن (نام ، ایمیل و وب سایت) ایجاد می کند ، یک قسمت منطقه متن برای متن نظر ، یک کادر تأیید برای انطباق با GDPR ، و دکمه ارسال.

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

#پاسخ دادن { }
# پاسخ-عنوان {}
# لغو-نظر-پاسخ-پیوند {}
#commentform {}
#نویسنده { }
#پست الکترونیک { }
#url {}
#اظهار نظر
#ارسال
.comment-notes {}
.ضروری { }
.comment-form-author {}
.comment-form-email {}
.comment-form-url {}
.comment-form-comment {}
.comment-form-cookies-رضایت {}
برچسب های مجاز-شکل {}
شکل دادن

با ساده سازی این کلاس های CSS ، می توانید شکل و فرم فرم نظرات وردپرس خود را کاملاً تغییر دهید.

بگذارید جلو برویم و سعی کنیم چند مورد را تغییر دهیم ، بنابراین می توانید در مورد چگونگی این کار ایده خوبی بگیرید.

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


#پاسخ دادن {
زمینه: #fbfbfb؛
بالشتک: 0 10px 0 10px؛
}
 
/ * قسمت فرم فعال را برجسته کنید * /
 
# ورودی ورودی (type = text) ، متن منطقه {
  -webkit-transfer: همه 0.30 ثانیه ورود آسان است.
  -moz-transfer: تمام راحتیهای 0.30 ثانیه ؛
  -ms-transfer: تمام راحتیهای 0.30 ثانیه ؛
  -o-transfer: تمام راحتیهای 0.30 ثانیه ؛
  رئوس مطالب: هیچ؛
  بالشتک: 3px 0px 3px 3px؛
  حاشیه: 5px 1px 3px 0px؛
  حاشیه: 1 پیکسل جامد #DDDDDD؛
}
  
  
# ورودی ورودی [type = text]: تمرکز ،
ورودی [نوع = ایمیل]: تمرکز ،
ورودی [type = url]: تمرکز ،
textarea: تمرکز {
box-shadow: 0 0 5px rgba (81، 203، 238، 1)؛
حاشیه: 5px 1px 3px 0px؛
حاشیه: 2 پیکسل rgba جامد (81 ، 203 ، 238 ، 1) ؛
}

بعد از تغییرات فرم ما در قالب وردپرس Twenty Sixteen به این شکل بود:

Highlight active comment form field

با استفاده از این کلاس ها می توانید رفتار نحوه نمایش متن در داخل جعبه های ورودی را تغییر دهید. ما پیش خواهیم رفت و سبک متن نام نویسنده و قسمتهای URL را تغییر می دهیم.


# نویسنده ، # ایمیل {
font-family: "Open Sans" ، "Droid Sans" ، Arial؛
نوع قلم: مورب؛
رنگ: # 1d1d1d؛
فاصله نامه: .1em؛
}
 
#url {
رنگ: # 1d1d1d؛
font-family: "کنسول Luicida" ، "Courier New" ، "Courier" ، تک فضا ؛
}

اگر به تصویر زیر نگاهی دقیق بیندازید ، فونت نام و ایمیل با URL وب سایت متفاوت است.

Changing comment form input style

همچنین می توانید سبک دکمه ارسال فرم نظر WordPress را تغییر دهید. به جای استفاده از دکمه پیش فرض ارسال ، بگذارید به آن مقداری گرادیان و سایه جعبه CSS3 بدهیم.

#ارسال {
background: -moz-linear-gradient (top، # 44c767 5٪، # 5cbf2a 100٪)؛
background: -webkit-linear-gradient (top، # 44c767 5٪، # 5cbf2a 100٪)؛
پس زمینه: -o-linear-gradient (top، # 44c767 5٪، # 5cbf2a 100٪)؛
background: -ms-linear-gradient (top، # 44c767 5٪، # 5cbf2a 100٪)؛
پس زمینه: شیب خطی (به پایین ، # 44c767 5٪ ، # 5cbf2a 100٪)؛
background-color: # 44c767؛
-moz-border-radius: 28px؛
-vebkit-border-radius: 28px؛
شعاع مرز: 28px؛
حاشیه: 1 پیکسل جامد # 18ab29؛
نمایش: بلوک درون خطی ؛
مکان نما: اشاره گر؛
رنگ: #ffffff؛
font-family: Arial؛
اندازه قلم: 17px؛
بالشتک: 16 پیکسل 31 پیکسل؛
دکوراسیون متن: هیچ؛
text-shadow: 0px 1px 0px # 2f6627؛
}
 
#submit: شناور {
background: -webkit-gradient (خطی ، بالا سمت چپ ، پایین چپ ، توقف رنگ (0.05 ، # 5cbf2a) ، توقف رنگ (1 ، # 44c767)) ؛
background: -moz-linear-gradient (top، # 5cbf2a 5٪، # 44c767 100٪)؛
background: -webkit-linear-gradient (top، # 5cbf2a 5٪، # 44c767 100٪)؛
پس زمینه: -o-linear-gradient (top، # 5cbf2a 5٪، # 44c767 100٪)؛
background: -ms-linear-gradient (top، # 5cbf2a 5٪، # 44c767 100٪)؛
زمینه: شیب خطی (به پایین ، # 5cbf2a 5٪ ، # 44c767 100٪)؛
background-color: # 5cbf2a؛
}
#submit: فعال {
موقعیت: نسبی؛
بالا: 1 پیکسل
}

Comment form button style

بردن فرمهای نظر WordPress به سطح بعدی h4>

ممکن است فکر کنید خیلی ابتدایی است. خوب ما باید از آنجا شروع کنیم ، بنابراین همه می توانند دنبال کنند.

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

ورود به سیستم اجتماعی را به نظرات وردپرس اضافه کنید h4>

بیایید با اضافه کردن ورودهای اجتماعی به نظرات وردپرس شروع کنیم.

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

پس از فعال سازی ، برای پیکربندی تنظیمات افزونه باید به صفحه تنظیمات »ورود به سیستم اجتماعی WP بروید.

WP Social Login settings

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

بعد از وارد کردن کلیدهای API ، روی دکمه ذخیره تنظیمات کلیک کنید تا تغییرات خود را ذخیره کنید.

اکنون می توانید برای دیدن دکمه های ورود به سیستم اجتماعی بالای فرم نظر خود به وب سایت خود مراجعه کنید.

Add social login buttons to comment form

افزودن متن خط مشی نظر قبل یا بعد از فرم نظر h4>

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

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

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

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

بعد از آن ، می توانید کد زیر را در فایل functions.php یا یک افزونه اختصاصی سایت .


تابع wpbeginner_comment_text_before ($ arg) {
    $ arg ['comment_notes_before'] = "

ما خوشحالیم که شما برای ارسال نظر تصمیم گرفتید. لطفاً به خاطر داشته باشید که نظرات با توجه به خط مشی نظر .

"؛ بازگشت $ arg؛ } add_filter ('comment_form_default'، 'wpbeginner_comment_text_fore')؛

کد بالا جایگزین فرم نظر پیش فرض قبل از یادداشت ها با این متن می شود. ما همچنین یک کلاس CSS را در کد اضافه کرده ایم ، بنابراین می توانیم با استفاده از CSS اعلامیه را برجسته کنیم. در اینجا نمونه CSS مورد استفاده ما وجود دارد:

p.comment-policy {
    حاشیه: 1px solid # ffd499؛
    background-color: # fff4e5؛
    شعاع مرز: 5px؛
    بالشتک: 10px؛
    حاشیه: 10px 0px 10px 0px؛
    اندازه قلم: کوچک؛
    نوع قلم: مورب؛
}

در سایت آزمون ما اینگونه مشاهده شد:

Comment policy notice

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


تابع wpbeginner_comment_text_after ($ arg) {
    $ arg ['comment_notes_after'] = "

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

"؛ بازگشت $ arg؛ } add_filter ('comment_form_default'، 'wpbeginner_comment_text_text_after')؛

فراموش نکنید که URL را به همین ترتیب تغییر دهید ، بنابراین به جای مثال.com به صفحه سیاست نظرات شما می رود :)

انتقال قسمت متن نظر به پایین h4>

به طور پیش فرض ، فرم نظر WordPress ابتدا منطقه متن نظر را نمایش می دهد و سپس نام ، ایمیل و زمینه های وب سایت را نشان می دهد. این تغییر در وردپرس 4.4 وارد شده است.

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

اگر می خواهید این کار را انجام دهید ، تنها کاری که باید انجام دهید این است که کد زیر را به فایل functions.php یا افزونه اختصاصی سایت .

تابع wpb_move_comment_field_to_bottom ($ قسمت ها) {
$ comment_field = $ Field ['comment']؛
unset ($ Field ['comment'])؛
$ Field ['comment'] = $ comment_field؛
برگرداندن $ فیلدها؛
}
 
add_filter ('comment_form_fields'، 'wpb_move_comment_field_to_bottom')؛

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

Comment text area to bottom

حذف قسمت وب سایت (URL) از فرم نظرات وردپرس h4>

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

همچنین یک زمینه از فرم نظر کاهش می یابد و باعث سهولت و کاربرپسندی می شود. برای اطلاعات بیشتر در مورد این موضوع ، به مقاله ما در حذف قسمت URL وب سایت از فرم نظر WordPress

برای حذف قسمت URL از فرم نظر ، به سادگی کد زیر را به فایل functions.php یا یک پلاگین مخصوص سایت خود اضافه کنید.

تابع wpbeginner_remove_comment_url ($ arg) {
    $ arg ['url'] = ''؛
    بازگشت $ arg؛
}
add_filter ('comment_form_default_fields'، 'wpbeginner_remove_comment_url')؛

Remove URL field from comment form

افزودن اشتراک در کادر تأیید نظرات در وردپرس h4>

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

برای افزودن این کادر تأیید ، اولین کاری که باید انجام دهید اینست که نصب و فعال کنید اشتراک در افزونه نظرات بارگذاری مجدد . پس از فعال سازی ، برای پیکربندی تنظیمات افزونه باید از تنظیمات »اشتراک در نظرات» دیدن کنید.

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

Subscribe to comments reloaded

Quicktags را در فرم نظر اضافه کنید h4>

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

برای افزودن برچسب های سریع ، شما باید پلاگین Quicktags نظر اصلی . برای جزئیات ، به مقاله ما در مورد چگونگی اضافه کردن برچسب های سریع در فرم نظر WordPress .

پس از افزودن برچسب های سریع فرم نظر شما به این شکل است.

quicktags in comment form

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-themes/how-to-style-wordpress-comment-form/.

دیدگاهتان را بنویسید