قالب آماده بخش نظرات در وردپرس
طراحی بخش دیدگاه ها در وردپرس
اگر با قالب های خام وردپرسی کار کرده باشید متوجه خواهید شد که استایل بخش دیدگاه ها با المنتور یا صفحه ساز های دیگر قابل ویرایش نیست و حتی خیلی از قالب های وردپرسی دیگر هم بخش نظرات خوبی ندارند، دلیل این موضوع در وردپرس این است که بخش نطرات یا دیدگاه ها در وردپرس با استفاده از HTML و CSS ظاهر آن طراحی می شود و با فحه ساز ها قابل ویرایش نیست، ما در این آموزش به دو روش ساده به شما یاد خواهیم داد که چگونه یک بخش زیبا برای دیدگاه های سایت وردپرسی خود طراحی کنید. روش اول را در ویدئو زیر توضیح داده ایم،در این روش با قالب آماده ای که از قبل برای شما طراحی کرده این می توانید بخش نطرات سایت خود را سفارشی کنید، این آموزش بیشتر برای قالب های خام المنتوری کارایی دارد، قالب های مثل هلو المنتور یا آسترا و برای قالب های غیر المنتور یا قالب هایی که دسترسی به ویرایش بخش نطرات سایت نداری از آموزش متی زیر می توانید استفاده کنید، برای انجام این ترفند احتیاجی به المنتور پرو ندارید و با همان نسخه ی معمولی المنتور قابل انجام می باشد.
دانلود قالب آماده بخش نطرات، این فایل را در المنتور خود درون ریزی کنید
دانلود فایل قالب فایل های ضمیمه
دانلود قالب آماده بخش نطرات، این فایل را در المنتور خود درون ریزی کنید
آموزش تغییر ظاهر بخش دیدگاه ها
در بالا به صورت ویدئویی آموزش دادیم که چگونه با استفاده از قالب آماده بخش نظرات و درون ریزی آن در المنتور صفحه دیدگاه های حود را طراحی کنید کالا قطعه کدی در اختیار شما قرار می دهیم که می تواندی در بخش تنظیمات CSS آن را قرار دهید تا ظاهر دیدگاه های سایت تغییر کند.
برای اینکار کافی ست صفحه ی تک نوشته ی خود را با المنتور باز کرده و روی تنظیات ستون دیدگاه ها کلیک کنید، بعد از آن به تب پیشرفته رفته و روی آخرین گزینه یعنی CSS سفارشی کلیک کنید و کدی که در پایین قرار داده ایم را آنجا وارد کنید.
/*elmineh */
/* 3 Coloumn Comment Revers */
form#commentform {
display: flex;
flex-wrap: wrap;
flex-direction: row
}
p.comment-notes, p.comment-form-comment,p.comment-form-cookies-consent {
flex-basis: 100%;
}
p.comment-form-author,p.comment-form-email,p.comment-form-url {
flex-basis: 33.33%;
padding: 0 5px 0 0;
}
p.comment-form-author {
order: 1;
}
p.comment-form-email {
order: 2;
}
p.comment-form-url {
order: 3;
}
p.comment-form-cookies-consent {
order: 4
}
p.comment-form-comment {
order: 5;
}
p.form-submit {
order: 6;
}
/* Comment Meta */
.comment-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#comments .comment-meta {
flex-wrap: wrap;
justify-content: right;
}
.comment-author.vcard {
margin-left: 20px;
}
span.says {
display: none;
}
/* Comment Style */
textarea#comment,input#email,input#author,input#url {
padding: 0.84em 1.1em;
color: #4a4f55;
border-color: #e3e3e3;
background-color: #ffffff;
}
input#submit {
color: #ffffff;
background-color: #e93314;
border-radius: 5px;
}
body.rtl #comments .comment .comment-body, body.rtl #comments .pingback .comment-body {
padding: 30px 90px 30px 30px;
background-color: #FFF
}
body.rtl #comments .comment .avatar, body.rtl #comments .pingback .avatar {
right: 25px;
top: 20px;
}
.comment-body {
position: relative;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1.7em 2em;
border: 1px solid #ddd;
margin-bottom: 2em;
border-radius: 5px;
border-bottom: 1px solid #ddd!important
}
body.rtl #comments ol.comment-list .children:before {
display: none
}
.comment-author.vcard, .comment-author.vcard a {
color: #0d0d12;
font-size: 17px;
}
.comment-content {
color: #4a4f55;
font-size: 14px;
}
.comment-metadata a {
color: #898b8c;
font-size: 12px;
}
.reply {
width: fit-content;
padding: 8px;
background-color: #f8f5f2;
border-radius: 100px;
font-size: 12px;
color: #4a4f55;
}
a.comment-reply-link {
color: #0d0d12;
}
a.comment-reply-link:hover {
color: #e93314;
}
.reply:after {
content: "\f060";
font-family: FontAwesome;
margin-right: 5px;
opacity: 0;
transition: opacity 0.2s ease-out, right 0.3s ease-out;
}
.reply:hover {
width: 60px;
transition: width 0.3s ease-out;
}
.reply:hover:after {
opacity: 1;
transition: opacity 0.3s ease-out, right 0.3s ease-out;
}
.reply {
padding: 8px;
background-color: #f8f5f2;
border-radius: 100px;
font-size: 12px;
color: #4a4f55;
width: 30px;
display: block;
width: 45px;
height: 2.4em;
line-height: 2.4em;
-webkit-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
transition: all 0.3s ease-out
}
@media (max-width:768px){
body.rtl #comments .comment .comment-body, body.rtl #comments .pingback .comment-body {
padding: 30px 30px 30px 30px;
background-color: #FFF;
}
.comment-author.vcard {
flex-basis: 100%;
}
.comment-metadata {
margin-top: 15px;
}
p.comment-form-author, p.comment-form-email, p.comment-form-url {
flex-basis: 100%;
padding: 0;
}
}
مطالب زیر را حتما مطالعه کنید
آموزش تغییر رنگ محصول
قابلیت جستجوی زنده در المنتور
ساخت نوار ناوبری موبایل شناور با المنتور
آموزش ویدئویی نصب وردپرس خام
آموزش اسکرول با کلیک کردن در المنتور
آموزش دامنه اضافی در سیپنل جدید
6 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
Профессиональное архитектурное бюро в СПб — качественные решения для любого строительства
архитектурное бюро в санкт петербурге [url=https://www.proektnoe-byuro.ru/]https://www.proektnoe-byuro.ru/[/url] .
با سلام.. ممنون از اموزش خوبتون. فایل باز میشه و نمیشه دانلود کرد
سلام
من طبق مراحل رفتم و سایتم بهم ریخت
سلام
تو یه سایت فروشگاهی میخوام نظر بزارم اما نمیشه اولش امتیاز ستاره داره که باید امتیاز بدی بعدش پیام و نام و ایمیل میخواد همه اینا رو میزنم اما میگه یه گزینه امتیاز انتخاب کن در صورتی که امتیاز هم داده شده چجوری میشه رفعش کرد؟ قالب آسترا هست این کاری که گفتید انجام بشه درست میشه؟
ممنون میشم راهنمایی کنید
سلام وقت بخیر
خیر این مشکل ربطی به این فایل آمده نداره
و باید مشکل رو چک کنید
موفق باشید
ممنون تو استرا بعد از نمایش مشخصات محصول یه بخش دارای سه تب میاد که شامل توضیحات، توضیحات تکمیلی و نظرات هست. مشکل در بخش نظرات هست که در پیام اولم عرض شد. میشه بگید چه مواردی باید چک بشه یا اگر امکانش نیست خودتون با هزینه انجام بدید ممنون