شخصی‌سازی و تغییر استایل بخش نظرات وردپرس

به صورت پیش فرض استایل نظرات وردپرس جالب نیست و نیازی به تغییر آن دارد. در این مقاله می خواهیم نحوه تغییر استایل و شخصی سازی آن بپردازیم.

برای شروع این کار اول باید فایل 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;   
}

پیش نمایش:

22/11/07 13 بازدید 0 2

, , , , , , , ,
اضافه کردن Lazy Loading به تصاویر وردپرس / قسمت پایانی
85 بازدید 0
فعال سازی نظرات پست سفارشی (PostType) در وردپرس
572 بازدید 0
افزودن دکمه پسندیدن نوشته ها در وردپرس
197 بازدید 0
چگونه اسلایدر اختصاصی در وردپرس ایجاد کنیم؟
226 بازدید 0

دیدگاهتان را بنویسید

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