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

قبل از اینکه شروع به آموزش کنیم ، باید کمی در مورد قالب های وردپرس با شما صحبت کنیم . همان طور که میدانید قالب وردپرس شامل چندین نوع فایل php , Css و جاوا اسکریپت میباشد . هر فایل css وظیفه استایل دهی به قسمتی از سایت شما را بر عهده دارد . شما در صورتی که بخواهید قسمتی از استایل ظاهری سایت خود را ویرایش ، سفارشی سازی و یا بازنویسی کنید میتوانید از طریق فایل های css این کار را انجام دهید . درون فایل های قالب وردپرس فایلی به نام comment.php وجود دارد که در صورتی که بخواهید قالب فایل نظرات را در جای دیگری در نوشته های خود فراخوانی کنید این کار را با استفاده از کد <?php comment_form(); ?> میتوانید انجام دهید .

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

#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

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

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 شما میتوانید خصوصیات محتواهای درون فیلدهای متنی را تغییر دهید ، مانند فونت و اندازه آنها :

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

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