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

596 بازدید
چهارشنبه ۳۰ تیر ۱۳۹۵

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

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

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

در این آموزش به عنوان نمونه از قالب Twenty Twelve (دو هزار و دوازده) وردپرس استفاده می کنیم. توجه داشته باشید که این آموزش مناسب کاربران مبتدی تا متوسط در امر طراحی قالب می باشد. همچنین کاربرانی که اطلاعات کمی از CSS و 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 مد نظرمان را برای ویرایش پیدا کنیم؟

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

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

این هم نتیجه اش:

استایل دهی به سربرگ نظرات

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

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

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

بعضی از پوسته های وردپرس از تابع فراخوانی خاص خود برای نمایش دیدگاه ها استفاده می کنند. با استفاده از این تابع فراخوانی, پوسته قادر خواهد بود که یکسری اطلاعات اضافی را به دیدگاه مدیر سایت اضافه نماید. به عنوان مثال پوسته دو هزار و دوازده از از تکه کد زیر در تابع فراخوانی دیدگاه twentytwelve_comment() استفاده می کند (این تابع در فایل functions.php قالب قرار گرفته):

// 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> را به اطلاعات متای دیدگاه ها اضافه می کند.

اگر شما از قالب دیگری به غیر از دو هزار و دوازده استفاده می کنید, نیاز دارید نحوه نمایش دیدگاه توسط آن قالب را بیابید. فایل comment.php قالب را باز کنید. اگر قالب شما از تابع فراخوانی خاص خود استفاده کند, میتوانید آن را در تابع wp_list_comments ببینید. مانند زیر:

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

در نمونه بالا می بینید که قالب از twentytwelve_comment به عنوان تابع فراخوانی استفاده می کند. زمانی که یک تابع فراخوانی تعریف شده باشد, محتمل ترین مکان ممکن برای پیدا کردن این تابع, در فایل functions.php قالبتان است.

در مثال زیر سعی می کنیم کاری کنیم که در دیدگاه های مدیر سایت به جای نوشته ی “Post author” عبارت “Editor” قرار گیرد. برای انجام اینکار, تابع فراخوانی دیدگاه را به صورت زیر در می آوریم:

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

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

همچنین سعی میکنیم استایل خاصی به این عبارت “Editor” درون دیدگاه مدیر بدهیم. کافیست کد زیر را به فایل استایل قالب (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;
}

نتیجه اش به شکل زیر است:

استایل دهی به دیدگاه مدیر سایت

استایل دهی به دکمه “پاسخ” در نظرات وردپرس

اغلب پوسته های وردپرس دارای دکمه “پاسخ” درون دیدگاه های شان هستند. این قابلیت فقط در صورتی فعال می شود که وردپرس شما از دیدگاه های تو در تو پشتیبانی کند. برای فعال کردن این امکان, به بخش تنظیمات » گفت و گو ها از منوی وردپرس بروید. سپس در صفحه باز شده در بخش “دیگر تنظیمات دیدگاه ها” گزینه “فعال کردن دیدگاه های تو در تو با عمق …” را فعال کنید.

کلاس های پیشفرض وردپرس که برای استایل دهی به دکمه “پاسخ” تعیین شده اند reply و comment-reply-link هستند. ما از این کلاس ها استفاده خواهیم کرد تا به لینک “پاسخ” استایل بدهیم و آن را به شکل یک دکمه در بیاوریم.

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

نتیجه را در زیر می بینید:

استایل دهی به دکمه ویرایش دیدگاه

استایل دهی به دکمه انصراف از پاسخ

در بیشتر قالب های خوب وردپرس هنگامی که روی دکمه پاسخ کلیک می کنید یک دکمه جهت انصراف از پاسخ دادن برای شما نمایان می شود. اجازه دهید این دکمه انصراف از پاسخ را با استفاده کلاس CSS پیشفرض وردپرس (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;
}

نتیجه به شکل زیر خواهد بود:

استایل دهی به دکمه انصراف از پاسخ

سخن آخر

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

تبلیغات

نویسنده (مدیر سایت)

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

5 دیدگاه برای “استایل دهی به نظرات در وردپرس”

  1. ممصطفی گفت:

    با سلام و عرض تشکر
    از زحمتی که بابت ترجمه و انتشار مقاله کشیدی واقعا تشکر میکنم…
    گره از کارم باز کرد.
    موفق و پیروز باشید 🙂

    1. جواد نبوی گفت:

      خواهش می کنم دوست من. لطف دارید

  2. یک فراکاو گفت:

    یه مقاله عالی و کاربردی

    یه دنیا سپاس از شما

  3. کیا گفت:

    ممکنه بفرمایید برای فرم دیدگاه سایتتان از افزونه استفاده کردید؟ و چه افزونه ای؟ با تشکر

    1. جواد نبوی گفت:

      خیر. بخش نظر دهی وب تستر بدون افزونه و فقط درون قالب طراحی شده است.
      با آرزوی موفقیت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *