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

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

قبلا در مورد استایل دهی به نظرات نویسنده در وردپرس توضیحاتی دادیم. در این مقاله ما از کلاسهای پیش فرض برای نمایش نحوه ی چیدمان نظرات وردپرس استفاده میکنیم. برای این مثال ما قالب وردپرس پیش فرض Twenty Twelve را در این مقاله اصلاح میکنیم. این مقاله برای مبتدیان طراحی قالب وردپرس و کاربرانی که فهم درستی از HTML و 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 {}

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

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

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

اضافه کردن رنگهای زوج و فرد پس زمینه برای نظرات

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

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

طراحی نظرات نویسندگان و اطلاعات متا

وردپرس همچنین کلاس را به عناصر نمایش داده شده در هر هدر نظر اضافه میکند که به طراحان قالب اجازه ی سفارشی کردن نمایش اطلاعات نویسنده و نظرات متا مانند تاریخ و ساعت نظرات را میدهد. در اینجا یک کد برای کپی کردن در قالب فایل style.css وجود دارد. در این مثال رنگ زمینه را در متای نظرات با فاصله اضافه میکنیم:

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

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

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

برای مثال Twenty Twelve از خط زیر در تابع پاسخ به تماس () twentytwelve_comment استفاده میکند:

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

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

این کد <span>Post Author</span> را به اطلاعات متای نظرات اضافه میکند. بسته به اینکه قالب وردپرس,نظرات را با پست نویسنده چگونه بکار گیرد میتوانید آنرا به هر چیزی که میخواهید تغییر دهید. اگر از قالبهای مختلف به جای Twenty Twelve استفاده کنید سپس نیاز دارید نحوه ی بکار گرفتن نظرات را در قالب پیدا کنید. براحتی فایل قالب comments.php را باز کنید. اگر قالب شما در تابع پاسخ به تماس استفاده شده سپس باید آنرا در تابع wp_list_comments مانند زیر ببینید:

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

در مثال بالا قالبی که در twentytwelve_comment استفاده شده را بعنوان تابع پاسخ به تماس ببینید. اگر این تابع مشخص شده باشد سپس محل محتملتری برای یافتن این تابع در قالب فایل functions.php میباشد. در این مثال ما تابع را برای نمایش ویرایشگر به جای پست نویسنده تغییر داده ایم. برای اینکار باید تابع پاسخ به تماس را مانند زیر اصلاح کنیم:

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

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

همچنین با کد زیر در قالب style.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;
}

 طراحی لینک پاسخ در نظرات وردپرس

اغلب قالبهای وردپرس یک لینک پاسخ در زیر نظرات دارند. این عملکرد فقط زمانیکه موضوع نظرات فعال باشد نمایش داده میشود. برای فعال کردن موضوع نظرات به بخش مدیریت وردپرس صفحه ی تنظیمات>Discussion بروید و موضوع نظرات را فعال کنید. کلاس پیش فرض css توسط وردپرس برای لینک پاسخ  comment-reply-link تولید شده است. ما از این کلاس برای اصلاح لینک پاسخ و تبدیل به دکمه ی CSS استفاده میکنیم.

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

دکمه ویرایش نظرات

در اغلب قالبهای وردپرس کاربران با قابلیت ویرایش نظرات وارد میشوند که میتوانند لینک ویرایش نظرات را در زیر هر نظر ببینند. در زیر یک کد CSS مورد استفاده در کلاس پیش فرض comment-edit-link برای تغییر ظاهر لینک آمده است.

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

لغو کردن لینک پاسخ نظرات

در اغلب قالبهای وردپرس خوب با کلیک روی لینک Reply فرم نظرات در زیر بخش نظرات برای پاسخ و با یک لینک لغو پاسخ نظرات باز میشود. لینک لغو پاسخ به نظرات را با استفاده از کد پیش فرض CSS ID cancel-comment-reply اصلاح کنید.

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