آموزش ساخت فرم دیدگاه ها در وردپرس در چند گام

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

چگونگی ساخت فرم دیدگاه در وردپرس

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

1- آموزش ایجاد فرم دیدگاه ها در وردپرس با افزونه

یکی از ساده ترین و بهترین روش های تغییر فرم دیدگاه ها، استفاده از افزونه وردپرس می باشد. افزونه ای که ما در این مطلب قصد داریم آن را به شما معرفی کنیم، افزونه Advanced Comment Form می باشد. این افزونه انعطاف پذیر و آسان برای استفاده است. این به شما این امکان را می دهد تا فرم وردپرس را مستقیماً از باطن وب سایت خود سفارشی کنید، بدون اینکه نگران قرار دادن کد در هر جایی باشید. برخی از قابلیت های افزونه عبارت است از:

• فیلدهای فرم را حذف کنید
• تغییر فیلدهای فرم
• تغییر متن
• تغییر سبک های چیدمان
• از کد کوتاه استفاده کنید

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

در ابتدا وارد پیشخوان وردپرس خود شوید و سپس از بخش “افزونه ها” روی گزینه “افزودن” کلیک کنید. سپس نام افزونه را در باکس بالای صفحه وارد و سرچ نمائید. پس از پیدا شدن افزونه آن را نصب و فعال کنید. همچنین اگر با طریقه نصب افزونه آشنایی ندارید می توانید مطلب “چگونه در وردپرس افزونه اضافه کنیم؟ راه های نصب پلاگین در وردپرس” را مشاهده نمائید.

پس از نصب و فعال سازی افزونه در قسمت مدیریت وردپرس وب سایت خود، روی Comments > Form Comment کلیک کنید. با این کار به صفحه تنظیمات اصلی افزونه هدایت خواهید شد. در این قسمت ما قصد داریم یک فرم نظر وردپرس را سفارشی کنیم.

بیشتر بخوانید: معرفی بهترین CDN برای وردپرس در ایران 

در صفحه تنظیمات اصلی افزونه  Advanced Comment Form، می توانید تغییرات مورد نظر خود را اعمال کرده و سفارشی سازی خود را شروع کنید.

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

بخش دوم “متن” می باشد. در این قسمت می توانید متنی را از فرم نظر خود اضافه یا حذف کنید. فیلدهای متنی شامل “متن‌های قبل از فرم و متن‌های بعد از فرم” می باشد.

بخش سوم و آخری که مشاهده می کنید با عنوان “طرح بندی ها” است. در این بخش با کلیک بر روی چک باکس، یک سبک طرح بندی فرم دو ستونی به شما ارائه می شود. به همین سادگی می توانید نظرات خود را سفارشی کنید.

بیشتر بخوانید: آموزش نصب وردپرس در هاست سی پنل (Cpanel) + ویدیو آموزشی

2- طریقه ساخت فرم دیدگاه در وردپرس با کدنویسی

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

– فرم فونت نظرات را تغییر دهید

با استفاده از کلاس‌های CSS، می ‌توانید نحوه نمایش متن‌ها در کادرهای ورودی را تغییر دهید. به عنوان مثال، در کد زیر، فونت نویسنده، آدرس ایمیل و آدرس را تغییر می دهیم. به سادگی کافیست کد را به فایل style.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; 
}

بیشتر بخوانید: مایکروسافت کلاریتی (Microsoft Clarity) چیست؟ رقیب حرفه ای آنالیتیکس 

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

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

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

همچنین برای تغییر نام دکمه ارسال نظر در فرم خود، کافیست کد زیر را در فایل functions.php خود اضافه کرده و یا آن را به افزونه اضافه کنید تا فرم نظر وردپرس را سفارشی نمائید:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
$comments_args = array(
    'fields' =>  $fields,
    'label_submit' => 'Send My Comment'
);
comment_form($comments_args);

بیشتر بخوانید: نحوه غیرفعال کردن نظرات در وردپرس | بستن نظرات کاربران در مطالب سایت وردپرسی

– فیلد URL وب سایت را از فرم نظر حذف کنید

فیلد URL در فرم نظر وردپرس یکی از راه هایی برای ارسال انواع هرزنامه ها به سایت است، بنابراین بهتر است که آن را حذف کنید. علاوه بر این، با حذف این فیلد، ارسال نظر برای کاربران شما بسیار ساده تر می شود. برای حذف فیلد URL وب سایت، کد زیر را در فایل functions.php خود کپی کنید:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
$comments_args = array(
    'fields' =>  $fields
);
comment_form($comments_args);

– افزودن فیلد به فرم نظر

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

به عنوان مثال، در کد زیر فیلد سن را به فرم نظر وردپرس اضافه می کنیم:

function add_comment_fields($fields) {
    $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
        '<input id="age" name="age" type="text" size="30" /></p>';
    return $fields;
}
add_filter('comment_form_default_fields','add_comment_fields'); 

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

– افزودن ری کپچا به فرم نظر وردپرس

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

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

برای استفاده از این افزونه، در ابتدا وارد پیشخوان وردپرس خود شوید و سپس از بخش “افزونه ها” روی گزینه “افزودن” کلیک کنید. سپس نام افزونه را در باکس بالای صفحه وارد و سرچ نمائید. پس از پیدا شدن افزونه آن را نصب و فعال کنید. همچنین اگر با طریقه نصب افزونه آشنایی ندارید می توانید مطلب “چگونه در وردپرس افزونه اضافه کنیم؟ راه های نصب پلاگین در وردپرس” را مشاهده نمائید.

این سرویس توسط گوگل پشتیبانی می شود. بنابراین، باید یک حساب کاربری در Google reCAPTCHA ایجاد کنید:

• در ابتدا وارد وب سایت “https://www.google.com/recaptcha/admin/create” شوید.
• سپس اطلاعات مورد نیاز را برای اتصال ری کپچا به حساب خود وارد کنید.

• سپس با کلیک بر روی Submit ثبت نام کنید.

پس از اتمام مراحل ثبت نام، یک کلید سایت و کلید مخفی برای شما نمایش داده می شود که باید آن را در جایی یادداشت کنید، زیرا به آن نیاز خواهید داشت. در مرحله بعد باید ویژگی های مورد نظر خود را فعال کنیم. برای اینکار به داشبورد وردپرس و سپس Invisible reCAPTCHA Settings  مراجعه کنید.

چند تب در تنظیمات وجود دارد. برای فعال کردن ری کپچا در بخش نظرات، باید “Enable Comments From Protection” را علامت بزنید. در نهایت تغییرات را ذخیره کنید.

بیشتر بخوانید: غیرفعال کردن نظرات در بخش محصولات ووکامرس

– عنوان بخش نظرات خود را تغییر دهید

اگر قصد دارید عنوانی را که در بالای فرم دیدگاه های سایت وردپرس قرار دارد را تغییر دهید، باید کد زیر را به فایل functions.php یا افزونه ای که برای سفارشی کردن فرم نظر وردپرس استفاده می کنید، اضافه نمائید:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
$comments_args = array(
    'fields' =>  $fields,
    'title_reply'=>'Please give us your valuable comment',
);
comment_form($comments_args);

– فیلد متن را به پایین فرم منتقل کنید

به صورت پیش فرض بعد از وردپرس نسخه 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;
}

بیشتر بخوانید: آپلود عکس در نظرات وردپرس | چگونه در بخش دیدگاه وردپرس فایل و عکس آپلود کنیم؟

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

در مرحله بعدی از نحوه ساخت فرم دیدگاه در وردپرس ، قصد داریم آموزش افزودن اشتراک ایمیل به نظرات وردپرس را در اختیار شما قرار دهیم. برای افزودن این قابلیت به سایت خود، ساده ترین روش استفاده از افزونه Subscribe to Comments Reloaded میباشد. بعد از نصب و فعال کردن افزونه، روی گزینه Subscribe to Comments کلیک کنید تا وارد بخش پیکربندی افزونه شوید.

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

– اضافه کردن ویرایشگر متن به بخش نظرات وردپرس

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

برای استفاده از این قابلیت، بهترین و ساده ترین روش استفاده از افزونه Comment Form Quicktags می باشد. سپس در تنظیمات بر روی بحث ها کلیک کنید و به دنبال Quicktags بگردید و آن را فعال کنید. در نهایت تغییرات خود را ذخیره کنید.

بیشتر بخوانید: آموزش نصب جوملا روی هاست سی پنل

– نحوه اضافه کردن سبک به نظرات

اگر قصد دارید CSS بخش نظرات خود را تغییر دهید، کد زیر را در فایل style.css کپی و جایگذاری نمائید:

/* ## Comments
--------------------------------------------- */
.comment-respond,
.entry-pings,
.entry-comments {
    color: #444;
    padding: 20px 45px 40px 45px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    border-left: 4px solid #444;
}
.entry-comments h3{
    font-size: 30px;
    margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
    font-size: 20px;
    margin-bottom: 30px;
}
.comment-respond {
    padding-bottom: 5%;
    margin: 20px 1px 20px 1px;
        border-left: none !important;
}
.comment-header {
    color: #adaeb3;
    font-size: 14px;
    margin-bottom: 20px;
}
.comment-header cite a {
    border: none;
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
}
.comment-header .comment-meta a {
    border: none;
    color: #adaeb3;
}
li.comment {
    background-color: #fff;
    border-right: none;
}
.comment-content {
    clear: both;
    overflow: hidden;
}
.comment-list li {
    font-size: 14px;
    padding: 20px 30px 20px 50px;
}
.comment-list .children {
    margin-top: 40px;
    border: 1px solid #ccc;
}
.comment-list li li {
    background-color: #f5f5f6;
}
.comment-list li li li {
    background-color: #fff;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
    width: 50%;
}
.comment-respond label {
    display: block;
    margin-right: 12px;
}
.entry-comments .comment-author {
    margin-bottom: 0;
    position: relative;
}
.entry-comments .comment-author img {
    border-radius: 50%;
    border: 5px solid #fff;
    left: -80px;
    top: -5px;
    position: absolute;
    width: 60px;
}
.entry-pings .reply {
    display: none;
}
.bypostauthor {
}
.form-allowed-tags {
    background-color: #f5f5f5;
    font-size: 16px;
    padding: 24px;
}
.comment-reply-link{
    cursor: pointer;
    background-color: #444;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 4px 10px 4px;
    text-transform: uppercase;
    width: auto;
}
.comment-reply-link:hover{
    color: #fff;
}
.comment-notes{
    display:none;   
}

سوالات متداول

بیشتر بخوانید: نحوه حذف نظرات وردپرس؛ آموزش مدیریت، ویرایش و حذف دیدگاه ها در وردپرس

جمع بندی: آموزش ساخت فرم دیدگاه ها در وردپرس

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

منبع: betterstudio