طراحی بخش دیدگاه ها در وردپرس

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

دانلود فایل

دانلود قالب آماده بخش نطرات، این فایل را در المنتور خود درون ریزی کنید

دانلود فایل قالب فایل های ضمیمه

دانلود قالب آماده بخش نطرات، این فایل را در المنتور خود درون ریزی کنید

DOWNLOAD

فایل بالا را SAVE کنید

آموزش تغییر ظاهر بخش دیدگاه ها

در بالا به صورت ویدئویی آموزش دادیم که چگونه با استفاده از قالب آماده بخش نظرات و درون ریزی آن در المنتور صفحه دیدگاه های حود را طراحی کنید کالا قطعه کدی در اختیار شما قرار می دهیم که می تواندی در بخش تنظیمات 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;
}
}

52 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

Интерактивные технологии для оснащения переговорной комнаты
оснащение переговорных комнат под ключ [url=https://osnashcheniye-peregovornoy1.ru/]https://osnashcheniye-peregovornoy1.ru/[/url] .

آموزش ها

طراحی سایت

قالب و پوسته

طراحی بخش دیدگاه ها در وردپرس

دانلود فایل قالب فایل های ضمیمه

آموزش تغییر ظاهر بخش دیدگاه ها

مطالب زیر را حتما مطالعه کنید

52 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

درباره علمینه

زیرمجموعه ها

دسترسی سریع

شگفت زده شوید!