no-img
اِمیلا - سلام کاربر مهمان. امروز پنجشنبه ۸ اسفند ۱۳۹۸

ادامه مطلب

انتشار؛ ۲۰ دی ۱۳۹۸،
47 روز پیش
حمایت از emila.ir

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

انتشار؛ ۲۰ دی ۱۳۹۸ - 47 روز پیش
2

کدهای HTML برای ترکیب و زیبایی به کدهای CSS نیازمنداند. بسیاری از زیبایی های سایت وردپرسی شما بستگی به ترکیب کدهای CSS با HTML و مهارت کد نویسی شما دارد.

فرم نظرات وردپرس به طور پیش فرض تابع comments_template نام دارد که به طور پیش فرض به توابع comment_form و wp_list_comments متکی است.

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

 <?php comments_template(); ?> 

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

برای اضافه کردن استایل فوق به قالب وردپرستان کافی است کد css زیر را به فایل استایل قالب خود اضافه کنید. دقت کنید که استایل قبلی فرم نظرات قالب را حذف نمایید تا با کدهای جدید تداخل نکند.

#respond {
margin: 5% 0;
}
#comments { display: inline-block; clear: both; width: 100%; font-size: 0.8em;
}
ol.commentlist { padding: 0; margin: 5% 0; list-style-type: none;
}
ul.children { list-style-type: none; padding-left: 5%;
}
article.comment { margin: 5% 0; padding-left: 80px;
}
.children article.comment { padding-left: 60px;
}
.comment footer { font-size: 0.8em; }
.comment p { margin: 0.25em 0; line-height: 1.2; color: #000; font-family: chaparral-pro, serif;
}
img.avatar { float: left; position: absolute; margin-left: -80px;
}
.children article.comment img.avatar { margin-left: -60px;
}
.form-allowed-tags { display: none;
}
#commentform label { display: none;
}
p.comment-subscription-form { clear: both;
}
.comment-subscription-form label { display: inline-block !important;
}
input#subscribe_comments { padding: 0!important; margin: 0!important; margin-right: 0.5em!important; float: none !important;
}
#commentform p {margin: 0; }
#commentform input, #commentform textarea { width: 95%; padding: 2.5%; background: #f7f7f7; border: none; margin: 2% 0; font-size: 1em; border-bottom: 2px dashed #d7d7d7; font-family: chaparral-pro, serif;
}
#commentform input#submit, .button { color: #fff; border: none !important; background: #3dd6b7; -webkit-appearance: none;
}
#commentform input#submit:hover, .button:hover { background: #81edd7;
}
#commentform input#submit:active, .button:active { background: #2baa90;
}
@media ( min-width: 700px ) { #commentform input { width: 25%; float: left; } .comment-form-author input, .comment-form-email input { margin-right: 5% !important; }
}
@media ( max-width: 700px ) { #commentform input#submit { width: 100%!important; }
}

کلیه کلاس های پیش فرض نظرات وردپرس

به طور پیش فرض کلاس کلی عناصر بخش نظرات وردپرس به صورت زیر است:

/Comment Output/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {} cancel-comment-reply {} cancel-comment-reply a {}

هیچ نظری وجود ندارد

    فرم گزارش را به دقت تکمیل نمایید...
    از همکاری شما پیشاپیش سپاسگذاریم