چگونه استایل بخش نظرات وردپرس را تغییر دهیم؟

در این آموزش از دکتر گرافیک، به سوال “چگونه استایل بخش نظرات وردپرس را تغییر دهیم؟” پاسخ خواهیم داد.

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

برای این مثال ما قالب وردپرس پیش‌فرض Twenty Twelve را در این مقاله اصلاح می‌کنیم. این مقاله برای مبتدیان طراحی قالب وردپرس و کاربرانی که فهم درستی از HTML و CSS دارند می‌باشد.

ممکن است شما هم تمایل داشته باشید که در وب‌سایت خود یک استایل خاص به بخش نظرات دهید و تغییر استایل بخش نظرات وردپرس را با کدنویسی دلخواه خود انجام دهید. برای انجام این کار باید مراحلی را طی کنید که ما در اینجا برای شما توضیح می‌دهیم. اگر می‌خواهید که این کار را انجام دهید باید همان‌طور که گفتیم با HTML و CSS و کد نویسی آشنا باشید.

برای مطالعه مطالب بیشتر، به صفحه بلاگ سایت دکتر گرافیک مراجعه کنید.

چگونه استایل بخش نظرات وردپرس را تغییر دهیم؟

بخش نظرات وب‌سایت از اهمیت بالایی برخوردار است و شما باید به این بخش توجه ویژه‌ای داشته باشید. استایل این بخش می‌تواند تأثیر زیادی در جذب کاربران و ثبت نظرات آن‌ها داشته باشد. اینکه کاربران شما بتونند که با شما ارتباط برقرار کنند برای بهبود عملکرد وب‌سایت شما اهمیت زیادی دارد.

چراکه وب‌سایت شما بدون کاربران و مخاطبان هیچ ارزشی ندارد و شما باید بتوانید از کوچک‌ترین جزئیات هم استفاده کنید تا هرروزه تعداد بیشتری از کاربران وب به سمت سایت شما جذب شوند. شما باید از روش‌های مختلفی استفاده کنید که از نظر مخاطب یک وب‌سایت حرفه‌ای داشته باشید.

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

در این مقاله هم می‌خواهیم یک روش خوب برای استایل دهی به این قسمت به شما معرفی کنیم.

مقالات مرتبط با بخش نظرات سایت وردپرسی:

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

– محدود کردن طول متن نظرات وردپرس

– آموزش افزودن فیلد به فرم نظرات وردپرس با افزونه Comments Fields

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

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

.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 مورد نظر

با استفاده از کدهای 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>' : '' );

این کد Post Author را به اطلاعات متای نظرات اضافه می‌کند. بسته به اینکه قالب وردپرس نظرات را با پست نویسنده چگونه بکار گیرد می‌توانید آن را به هر چیزی که می‌خواهید تغییر دهید.

اگر از قالب‌های مختلف به‌جای 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;
}

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

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

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

کلاس پیش‌فرض 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;
}

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

منابع: wikipedia – wordpress.org – mihanwp – youtube