آموزش استایل دهی فرم دیدگاه ها در وردپرس

آموزش وردپرس وبلاگ وبلاگ آموزشی

آموزش استایل دهی فرم دیدگاه ها در وردپرس

آیا می خواهید استایل نظرات وردپرس را در وب سایت خود تغییر دهید؟ سیستم نظرات نقش مهمی در ایجاد تعامل با کاربران در یک وب سایت را بر عهده دارند.…

توسط علی مسعودخواه
-- آخرین بروزرسانی : 14-06-2019
-- بازدیدها : ۳۹
اشتراک گذاری در :
امتیازدهی به مطلب :
0

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

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

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

تغییر استایل دیدگاه ها در وردپرس :


در داخل بیشتر قالب های وردپرس یک فایل با نام comment.php وجود دارد. این فایل برای نمایش دیدگاه ها و فرم دیدگاه ها در پست های وبلاگ شما استفاده می شود. فرم نظر وردپرس با استفاده از تابع  <؟ 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);
}

 

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

 

شما همچنین می توانید استایل دکمه ارسال  فرم وردپرس را تغییر دهید. به جای استفاده از دکمه ارسال به طور پیش فرض، اجازه دهید آن را با کدهای 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;
}

دیدگاه بگذارید

avatar
  اشتراک  
اطلاع از