شخصیسازی و تغییر استایل بخش نظرات وردپرس
به صورت پیش فرض استایل نظرات وردپرس جالب نیست و نیازی به تغییر آن دارد. در این مقاله می خواهیم نحوه تغییر استایل و شخصی سازی آن بپردازیم.
برای شروع این کار اول باید فایل comments.php ایجاد کنید و بعد از آن به استایل دهی بخش نظرات اقدام کنید.
به ترتیب زیر پیش بروید:
۱. فایل comments.php ایجاد کنید و کد های زیر را وارد کنید:
<?php
if ( post_password_required() ) {
return;
}
?>
<section class="card mb-3">
<div class="card-body">
<div id="comments" class="c-comments comments-area">
<?php
if ( comments_open() ) :
comment_form( array(
'label_submit' => __('ارسال نظر', 'shoppe'),
'class_submit' => 'btn btn-primary',
'comment_field' => '<p class="comment-form-comment">
<label class="screen-reader-text" for="comment">نظر*</label>
<textarea id="comment" placeholder="نظر شما" class="form-control mb-3" name="comment" cols="45" rows="3" maxlength="20000" required="required" spellcheck="false"></textarea>
</p>',
'fields' => array(
'author' => '<p class="comment-form-author"><label for="author">نام <span class="required">*</span></label> <input class="form-control input-comment-author" id="author" name="author" class="form-control" type="text" value="" size="30" aria-required="true"></p>',
'email' => '<p class="comment-form-email"><label for="email">ایمیل <span class="required">*</span></label> <input class="form-control input-comment-email" id="email" name="email" class="form-control" type="text" value="" size="30" aria-required="true"></p>',
'url' => '',),
),
);
?>
<?php if ( have_comments() ) : ?>
<h2 class="comments-title text-center fs-4">
دیدگاه های شما
</h2>
<ol class="comment-list">
<?php
wp_list_comments(
array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 48,
)
);
?>
</ol>
<?php the_comments_navigation(); ?>
<?php endif; ?>
<?php
the_comments_navigation();
endif;
?>
</div>
</div>
</section>
۲. بعد از آن بخش نظرات استایل دهی کنید.
کد های زیر را در فایل style.css وارد کنید.
.comment-respond,
.entry-pings,
.entry-comments {
color: #444;
padding: 20px 45px 40px 45px;
overflow: hidden;
}
.entry-comments h3{
font-size: 30px;
margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
font-size: 20px;
margin-bottom: 30px;
}
.comment-respond {
padding-bottom: 5%;
margin: 20px 1px 20px 1px;
border-left: none !important;
}
.comment-header {
color: #adaeb3;
font-size: 14px;
margin-bottom: 20px;
}
.comment-header cite a {
border: none;
font-style: normal;
font-size: 16px;
font-weight: bold;
}
.comment-header .comment-meta a {
border: none;
color: #adaeb3;
}
li.comment {
background-color: #fff;
border-right: none;
}
.comment-content {
clear: both;
overflow: hidden;
}
.comment-list li {
font-size: 14px;
padding: 20px 30px 20px 50px;
}
.comment-list .children {
margin-top: 40px;
}
.comment-list li, li.comment, .comment-list li li, .comment-list li li li{
list-style: none;
}
.comment-list li li {
background-color: #f5f5f6;
}
.comment-list li li li {
background-color: #fff;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%;
}
.comment-respond label {
display: block;
margin-right: 12px;
}
.entry-comments .comment-author {
margin-bottom: 0;
position: relative;
}
.entry-comments .comment-author img {
border-radius: 50%;
border: 5px solid #fff;
left: -80px;
top: -5px;
position: absolute;
width: 60px;
}
.entry-pings .reply {
display: none;
}
.form-allowed-tags {
background-color: #f5f5f5;
font-size: 16px;
padding: 24px;
}
.comment-reply-link{
cursor: pointer;
background-color: #444;
border: none;
border-radius: 3px;
color: #fff;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
padding: 4px 10px 4px;
text-transform: uppercase;
width: auto;
}
.comment-reply-link:hover{
color: #fff;
}
.comment-notes{
display:none;
}
پیش نمایش:
وردپرس (Wordpress) نوامبر/07/2022
1070
https://rayium.ir/?p=516