استایل دهی فرم نظرات وردپرس

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

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

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

در هر قالب چندین فایل از جمله فایل‌های قالب ، فایل‌های جاوااسکریپت و شیوه نامه یا همان css است.

شیوه نامه‌ها دارای قوانین css برای همه آلمان‌های مورد استفاده به وسیله پوسته وردپرس است.

شما نیز می‌توانید cssهای سفارشی خود را به این فایل اضافه کنید تا استایل خود را حذف کنید.

همچنین می‌توانید از برخی توابع برای تغییر ظاهر فرم نظرات فرم، استفاده کنید.

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

در فایل‌های قالب، فایلی به نام comments.php وجود دارد که از این فایل برای نمایش نظرات و فرم نظرات نوشته‌های سایت شما استفاده می‌شود.

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

<?php comment_form(); ?>.

به طور پیش‌فرض این تابع فرم نظرات را به 3 فیلد متنی نام ، ایمیل و وب‌سایت و یک باکس برای نوشتن نظرات و یک کادر برای تطابق gdpr و دکمه ارسال تقسیم می‌شود.

شما به راحتی می‌توانید هر کدام از این فیلدها را با ساده‌تر کردن کلاس‌های css پیشفرض تغییر دهید.

در ادامه لیستی از کلاس‌های پیشفرض css که در وردپرس به هرفرم نظر می‌افزاید را مشاهده می‌کنید:

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit

می‌توانید به راحتی با استفاده از کلاس‌های css، ظاهر فرم نظرات وردپرس را تغییر دهید.

در ادامه همراه باشید تا با چند تغییر در فرم، این مساله را بهتر درک کنید.

برجسته فیلد فعال فرم نظرات

برجسته‌تر کردن فیلد فعال در فرم نظرات باعث می‌شود تا بازدیدکنندگان سایت دسترسی راحت‌تری داشته باشند.

در این صورت کابران می‌دانند تا کدام فیلد فعال است و باید اطلاعات مورد نظر را پر کنند.

برای برجسته کردن فیلد فعال از قطعه کد زیر استفاده کنید:

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}

/* Highlight active form field */
#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

بعد از اضافه کردن کد بالا به قالب وردپرس تغییرات را ذخیره کرده و نتیجه را همانند تصویر زیر مشاهده می‌کنید:

نکته، تمامی کدها که در این آموزش می‌گذاریم را به فایل style.css قالب خود یا rtl.css اضافه کنید.

تغییر فونت اطلاعات ورودی فرم نظرات وردپرس

با استفاده از کلاس‌های پیش‌فرض css می‌توانید؛ فونت متن‌های ورودی را تغییر دهید.

در قطعه کدی که در ادامه می‌گذاریم، فونت اطلاعات ورودی نام و فیلد و وب‌سایت را تغییر می‌دهد.

کد زیر را در فایل استایل قالب خود قرار دهید:

#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}

#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}

همانطور که در تصویر می‌بینید؛ اطلاعات ورودری مقادیر نام و وب‌سایت با ایمیل متفاوت است.

شما می‌توانید نوع فونت و استایل مورد نظرتان را قرار دهید.

درباره پاکسازی دیتابیس وردپرس با افزونه wp sweep نیز بخوانید.

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

تغییر ظاهر دکمه ارسال دیدگاه

امکان تغییر ظاهر دکمه ارسال دیدگاه نیز وجود دارد.

در زیر یک نمونه قطعه کد برای تغییر استایل این دکمه است:

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}

#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

شما می‌توانید با استفاده از کدهای زیر تغییرات زیادی را به فرم نظرات در وردپرس سایت خود ایجاد کنید.

در ادامه همراه ما باشید تا به ایجاد آلمان‌های جدید در این فرم و تنظیمات پیشرفته آن بپردازیم.

افزودن گزینه ورود به شبکه‌های اجتماعی در فرم نظرات وردپرس

برای افزودن قابلیت ورود به شبکه‌های اجتماعی در این فرم وردپرس باید افزونه wordpress social login استفاده کنید.

این افزونه را می‌توانید از مخزن وردپرس نصب و فعال کنید.
پس از نصب و فعال‌سازی افزونه برای پیکربندی تنظیمات افزونه به پیشخوان وردپرس رفته و گزینه wp social login را از منوی تنظیمات انتخاب کنید.

همانطور که در تصویر زیر می‌بینید برای ورود و عضویت با هرشبکه اجتماعی باید api دریافتی آن را وارد نمایید.

برای فعال‌سازی هرشبکه اجتماعی باید گزینه enable را بر روی yes بگذارید تا امکان ورود با آن را فعال کنید. پس از وارد کردن کلید api تغییرات را ذخیره کنید.

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

برای تنظیمات بیشتر و تغییر شکل آیکون های شبکه های اجتماعی به تب widget رفته و تغییرات دلخواه را اعمال کنید.

پس از تغییرات نتیجه همانند تصویر زیر خواهد شد:
img9

انتقال فیلد متن پیام به پایین فرم نظرات وردپرس

در حالت پیش‌فرض در این فرم وردپرس ابتدا فیلد متن پیام و سپس فیلدهای نام و ایمیل و وب‌سایت قرار گرفته است.

اگر قصد دارید؛ تا فیلد متن در پایین فرم قرارگیرد بایستی قطعه کد زیر را در فایل function.php قرار دهید و تغییرات را ذخیره کنید:

function wpbeginner_comment_text_before($arg) {
$arg['comment_notes_before'] = "

از اینکه نظرات خود را برایمان قرار دادید، متشکریم! درنظر داشته باشید نظرات خلاف مقررات حذف خواهد شد <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.
";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

با این قطعه کد فیلد متن پیام به پایین فرم منتقل می‌شود همانند تصویر زیر:
img10

حذف فیلد آدرس سایت از فرم نظرات در وردپرس

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

با قطعه کد زیر می‌توانید؛ فیلد آدرس سایت را از فرم پاک کنید (کد را در فایل function.php قرار دهید.):

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] = "
از اینکه برایمان نظر خودتان را درج کردید ممنونیم. لطفا توجه کنید نظراتی که مخالف قوانین هستند، حذف خواد شد <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.
";
   return $arg;
}
  add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

پس از ذخیره کردن تغییرات نتیجه همانند تصویر زیر می‌شود:
img11

افزودن گزینه اشتراک گذاری در فرم نظرات

زمانی که کاربران شما در سایت نظری می‌دهند، ممکن است بخواهند؛ نظر سایر کاربران را دنبال کنند.

با افزودن گزینه اشتراک گذاری در این فرم این امکان را برای کاربران فراهم می‌کنیم که هر زمان یک نظر جدید در پست گذاشته شد اعلانی دریافت کنند.
برای راه‌اندازی این قابلیت باید افزونه subscribe to comments reloaded را از مخزن وردپرس نصب و فعال کنید.

پس از فعال‌سازی گزینه stcr برای انجام تنظیمات افزونه به پنل مدیریت اضافه می‌شود.
img12

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

با تشکر از این که تا پایان آموزش “استایل دهی فرم نظرات وردپرس” همراه ما بودید.