highlight-authors-comments-in-wordpress

 در این مطلب شما یاد می گیرید که چگونه در سایت وردپرسی خود با استایل های پیش فرض نظرات کاربران را نمایش دهید.کد های css ای که در زیر نمایش می دهیم را در فایل css خود قرار داده و نظرات را به زیبایی نمایش دهید.

در زیر class ها و id های پیشفرض css وردپرس را می بینید.

/*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 {}

 

که می توانید نظرات کاربران خود را استایل دهی نمایید.

حال اگر طراح html با کد های css دیگری نظرات را استایل داده  باشد می توانید  از طریق کلیک راست کردن و Inspect Elemen گرفتن کد های css مربوطه را بگیرید و استایل دهید.


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

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}


با استفاده از کلاس های زیر می توانید متا داده های نظرات مانند تاریخ و یا نام نویسنده  را استایل دهی نمایید

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

 

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

 

// If current post author is also comment author, make it known visually.

if (( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

وبرای استایل دادن به آن از کد css زیر استفاده کنید

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}


برای نمایش لیست کامنت ها می توانید کد زیر را  در قسمت مربوطه بزنید

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

 


بعد از استایل دادن به نظرات می خواهیم به پاسخ نظر استایل بدهیم.با استفاده از کد زیر می توانید پاسخ ها را نیز استایل دهید.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}


استایل دهی به ویرایش نظر 

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}


ویرایش دکمه انصراف از نظر 

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}


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

تاریخ آخرین بروزرسانی : ۱۷ آبان ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

8نظر برای

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


  1. با سلام و عرض خسته نباشید خدمت شما سوالی داشتم در خصوص اینکه چگونه میشه نظرات کاربران را در صفحه اول سایت نمایش داد ممنون میشم اگه منو در این مورد راهنمایی بفرماید

  2. ممنون استفاده کردم

  3. omid

    سلام – ممنون از مطلب خوبتون
    من از کدی که برای استایل بخش مدیر سایتاستفاده کردم ولی متاسفانه ارور میده syntax – ممنون میشم اگر پاسخ دهید

    • با سلام و تشکر.کد مورد نظر اصلاح شد شما کد زیر را جایگزین کد مربوطه نمایید

      if (( $comment->user_id === $post->post_author ) ? ‘ ‘ . __( ‘Post author’, ‘twentytwelve’ ) . ‘‘ : ” );

  4. omid

    سلام ممنون از پاسختون
    -چجوری میشه وقتی کاربر خواست به یکی از نظرات پاسخ بده فرم پاسخش زیر همون نظری که میخواد پاسخ بده باز بشه ؟
    کدی هم که داید ارور میده – مگه نباید در فانکشن قرار داد – کد بخش لیست کامنت ها هم ارور میده

    • شاید قالبی که استفاده می کنید از استایل دهی پیشفرض وردپرس نباشه.که اکثر طراحی ها هم همنطور هست.شما کدوم کد رو استفاده کردید؟ 

  5. omid

    قالب رو خودم درست کردم – همه چیش اوکیه فقط رو کامنتش موندم – کامنت هم بخوبی اجرا میشه – فقط میخوام اون سوال بالام حل بشه

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.