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

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

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

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

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

نحوه ی یافتن کلاس css مورد نیاز برای ویرایش

قبل از طراحی نحوه ی چیدمان نظرات وردپرس چند نکته برای کاربران جدید داریم. مرورگرهای Google Chrome و Firefox دارای ابزار دستی هستند که می توانید برای بهبود مهارتهای توسعه قالب وردپرس از آن استفاده کنید که این ابزار Inspect Element نامیده میشود. در صفحه ی وب روی element کلیک راست کرده و عنصر بازرسی را انتخاب کنید. مرورگر شما به دو ردیف تقسیم میشود که میتوانید در پنجره ی پایین کد منبع عنصر را مشاهده کنید.

همچنین در پنجره پایین، شما قادر به دیدن عناصر CSS و نحوه ی چیدمان آنها می شود. حتی می توانید css را برای آزمایش هدف ویرایش کنید. به یاد داشته باشید که هر چیزی را توسط عنصر بازرسی تغییر دهید فقط برای شما قابل مشاهده است و زمانیکه صفحه را رفرش کنید این تغییرات ناپدید می شوند. برای ایجاد تغییرات دائمی، شما مجبور به استفاده از فایل style.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;
}

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

PHP

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;
}

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