چگونگی تغییر استایل فرم نظرات در وردپرس

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

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

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

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

استایل شت ها ( Stylesheets )حاوی قوانین CSS برای همه عناصر مورد استفاده توسط تم وردپرس شما است . شما می توانید CSS سفارشی خود را اضافه کنید تا قوانین استایل خود را لغو کنید . به غیر از CSS ، شما همچنین ممکن است نیاز به اضافه کردن برخی از توابع برای تغییر ظاهر پیش فرض فرم نظر وردپرس خود را داشته باشید .

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

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

در داخل بیشتر قالب های وردپرس یک فایل با نام comment.php وجود دارد . این فایل برای نمایش نظرات و فرم نظر در پستهای وبلاگ شما استفاده می شود . فرم نظر وردپرس با استفاده از function تولید می شود :

<?php comment_form(); ?>.

به طور پیش فرض این تابع فرم نظر شما را با سه فیلد متنی (نام ، ایمیل و وب سایت)، زمینه فیلد متن برای متن نظر ، جعبه انطباق پذیری 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);
}

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

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

#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; 
}

اگر تصویر زیر را مشاهده کنید ، فونت نام و فیلد  ایمیل تغییر کرده است .

شما همچنین می توانید استایل فرم ارسال وردپرس خود را تغییر دهید .

#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 دارد . پیوندهای مربوط به نحوه دریافت این اطلاعات برای هر پلتفرم را ببینید . پس از وارد کردن کلیدهای API خود ، دکمه تنظیمات ذخیره را برای ذخیره تغییرات خود کلیک کنید . اکنون می توانید از وبسایت خود دیدن کنید تا دکمه های ورود به شبکه های اجتماعی را در بالای فرم نظر خود مشاهده کنید .

اضافه کردن سیاست حفظ حریم خصوصی قبل یا بعد از فرم نظر در وردپرس

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

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

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
    return $arg;
}
  
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

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

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

بعد از تغییرات به شکل زیر میشود :

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

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
    return $arg;
}
  
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

فراموش نکنید که URL را بر اساس آن تغییر دهید ، بنابراین به صفحه سیاست نظر شما به جای example.com بروید .

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

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

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

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
  
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom'

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

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

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

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

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

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

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

افزودن برچسب های سریع در فرم نظر

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

برای اضافه کردن برچسب های سریع ، شما نیاز به نصب و فعال کردن افزونه Basic Comment Quicktags دارید . بعد از اضافه کردن برچسب های سریع فرم نظرات شما به شکل زیر می شود .

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