آموزش کدهای وردپرس, آموزش وردپرس, کدهای کاربردی

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

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

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

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

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

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

برای اضافه کرددن Css کافی است نمایش > سفارشی سازی کلیک کنید.

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

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

در داخل بیشتر تم های وردپرس یک قالب با نام comment.php وجود دارد. این فایل برای نمایش نظرات و فرم نظر در پستهای سایت شما استفاده می شود. فرم نظر وردپرس با استفاده از تابع: <?php comment_form(); ?>. تولید می شود.

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

این همان شیوه ی ما در WordPress Twenty Sixteen Theme پس از تغییرات بود:

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

با استفاده از این کلاس ها می توانید رفتار نحوه نمایش متن درون جعبه های ورودی(فونت) را تغییر دهید. ما در ادامه سبک متن نام و فیلد 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; 
}

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

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

شما همچنین می توانید سبک ارسال فرم وردپرس را تغییر دهید. به جای استفاده از دکمه ارسال به طور پیش فرض،  آن را به برخی از شیب CSS3 و سایه جعبه تغییر دهید.

#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 را بر اساس صفحه قوانین سایت خود تغییر دهید.

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

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

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

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

در صورتی که می خواهید بخش نرات سایت خود را کملا متفاوت و جذاب کنید می توانید از افزونه commentator استفاده کنید.

 

(1) نظرات کاربران

  1. reza گفت:

    مرسی

نظرات بسته شده است.