تغییر فرم دیدگاه در وردپرس

تغییر فرم دیدگاه در وردپرس

تغییر فرم دیدگاه در وردپرس

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

نحوه تغییر فرم دیدگاه در وردپرس

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

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

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

اینگونه است که فرم ما در موضوع بیست و شانزده وردپرس پس از تغییرات به نظر می رسد:

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

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

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

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

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

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

اضافه کردن متن خط مشی نظر قبل یا بعد از فرم نظر

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

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

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

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

پس از آن ، می توانید کد زیر را در پرونده function.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 را متناسب با آن تغییر دهید ، بنابراین به صفحه خط مشی اظهارنظر خود می روید تا مثال.com :)

قسمت متن توضیحات را به پایین منتقل کنید

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

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

اگر می خواهید این کار را انجام دهید ، تنها کاری که باید انجام دهید اینست که کد زیر را به پرونده ی function.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 از فرم اظهار نظر ، کافی است کد زیر را به پرونده function.php یا افزونه اختصاصی سایت خود اضافه کنید.

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

قسمت URL را از فرم نظر حذف کنید

کادر اشتراک در WordPress ، مشترک شوید

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

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

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

مشترک شدن در نظرات بارگذاری مجدد

Quicktag ها را در فرم نظر اضافه کنید

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

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

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

تگ های سریع در قالب اظهار نظر

0 Comments
Inline Feedbacks
View all comments