خانهآموزش وردپرسطراحی فرم نظرات وردپرس با استایل زیبا بدون نیاز به افزونه
https://rayawp.ir/?p=19875

طراحی فرم نظرات وردپرس با استایل زیبا بدون نیاز به افزونه

طراحی فرم نظرات وردپرس با استایل زیبا بدون نیاز به افزونه – سلام رفیق رایا وردپرسیم! 🌟 امیدوارم حالت توپ باشه. امروز با یه مقاله کاربردی و فوق‌العاده در خدمتت هستم که مطمئناً برات مفید

طراحی فرم نظرات وردپرس با استایل زیبا بدون نیاز به افزونه – سلام رفیق رایا وردپرسیم! 🌟 امیدوارم حالت توپ باشه. امروز با یه مقاله کاربردی و فوق‌العاده در خدمتت هستم که مطمئناً برات مفید خواهد بود. تو این آموزش می‌خوام برم سراغ طراحی فرم نظرات یا کامنت‌های سایتت و یه دستی به سر و روش بکشم تا از حالت پیش‌فرض و بی‌روح دربیاد و استایلی جذاب و دلپذیر پیدا کنه. پس چشم برندار و تا آخر آموزش با من همراه باش! 🙂

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

با این آموزش، نه تنها ظاهر سایتت رو شیک و جذاب‌تر می‌کنی، بلکه تجربه کاربری بهتری برای بازدیدکنندگان سایتت فراهم می‌کنی و به این ترتیب سایتت جذاب‌تر و کاربرپسندتر میشه. اگه آماده‌ای برای این آموزش، پس بزن که بریمممم 😁😊

🤔چرا باید فرم ارسال نظر وردپرس رو شخصی‌ سازی کنیم؟

شخصی‌سازی فرم ارسال نظر وردپرس می‌تونه چند تا دلیل مهم داشته باشه که به افزایش کیفیت سایت و تجربه کاربری کمک می‌کنه:

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

  1. ظاهر جذاب‌ تر و حرفه‌ای‌تر: فرم‌ های پیش‌فرض وردپرس ممکنه خیلی ساده و تکراری باشن. وقتی فرم نظرات رو شخصی‌سازی می‌کنی، سایتت ظاهر شیک و جذاب‌تری پیدا می‌کنه که باعث جلب توجه بیشتر کاربران میشه.
  2. تجربه کاربری بهتر: با طراحی بهتر و راحت‌تر فرم نظرات، کاربرها بیشتر تمایل دارن روی پست هات نظرشون رو ثبت کنن. مثلاً می‌تونی فیلدها رو به شکل منطقی‌تر مرتب کنی یا المان‌های مختلف رو طوری تنظیم کنی که استفاده از فرم راحت‌تر بشه.
  3. افزایش تعامل کاربران: وقتی فرم نظرات برای کاربران جذاب و راحت باشه، احتمال این که بیشتر ازش استفاده کنن و با سایت تعامل داشته باشن، بیشتر میشه. این یعنی بازخورد و تعاملات بیشتر که برای رشد سایت خیلی مفیده.
  4. سفارشی‌سازی بیشتر امکانات: وقتی فرم نظرات رو شخصی‌سازی می‌کنی، می‌تونی ویژگی‌هایی مثل کپچا، فیلدهای دلخواه و حتی تاییدیه‌های ایمیل رو اضافه کنی تا امنیت و کاربردی بودن فرم رو بالا ببری.
  5. سازگاری با برندت: این امکان رو بهت می‌ده که فرم نظرات رو با رنگ‌ها، فونت‌ها و استایل‌های برندت هماهنگ کنی. اینطوری می‌تونی تجربه یکپارچه و حرفه‌ای رو به بازدیدکنندگان سایتت بدی.

در کل، شخصی‌سازی فرم نظرات به سایتت شخصیت میده، جذابیتش رو بیشتر می‌کنه و از همه مهم‌تر، باعث میشه کاربران راحت‌تر و با اشتیاق بیشتری با سایتت تعامل کنن! 😎

مراحل سفارشی سازی فرم ارسال نظر (دیدگاه) وردپرس بدون افزونه 😎

خب حالا که متوجه شدی چقدر فرم ارسال نظر می‌تونه مهم باشه و چطور می‌تونه تجربه کاربری سایت رو بهتر کنه، وقتشه که بریم سراغ اصل ماجرا و این فرم رو طبق سلیقه خودمون شخصی‌سازی کنیم. برای این کار، کافیه مراحل رو یکی یکی طبق آموزش دنبال کنی و با من پیش بری. مطمئن باش که توی این مسیر، هر چیزی که نیاز داری رو بهت می‌گم پس اگه کدنویسی هم بلد نیستی اصلاً نگران نباش 😊

وجه تمایز این فرم کامنت با فرم معمولی ارسال کامنت وردپرس به این صورته:

  • اضافه شدن دکمه کپی: این فرم دکمه کپی داره که به کاربر این امکان رو می‌ده تا به راحتی لینک کامنت مدنظرش رو کپی کنه.
  • طراحی مدرن و جذاب: برخلاف فرم‌های پیش‌فرض وردپرس که ساده و بی‌روح هست، این فرم با طراحی جذاب و استایل‌های ویژه ظاهر شیک‌تری داره.
  • نمایش نقش کاربری مدیر: در این فرم، نقش کاربری (مدیر سایت) در کامنت‌ها نمایش داده می‌شه. این کار باعث میشه که تجربه کاربری بهبود پیدا کنه و کاربر بتونه به راحتی تشخیص بده که این کامنت از طرف مدیر یا نویسنده پست هست.
  • تاریخ ارسال کامنت به صورت ‘X روز پیش’: در این فرم، تاریخ ارسال کامنت به‌صورت نسبی نمایش داده میشه، مثلاً به‌جای نمایش تاریخ میلادی یا شمسی، نوشته میشه ‘2 روز پیش’. این ویژگی باعث میشه که تاریخ درج کامنت‌ها سریع‌تر برای کاربر قابل درک باشه و تجربه کاربری بهتری ایجاد بشه.

1️⃣ویرایش فایل comments.php

توجه! همیشه قبل از هر تغییری توی هر فایلی از هاست، یه بکاپ از اون فایله بگیر تا خیالت راحت باشه اگه مشکلی پیش اومد بتونی فایل اصلی رو جایگزین و مشکل رو برطرف کنی 🙂

    برای شخصی‌ سازی فرم ارسال نظر در وردپرس، باید فایل comments.php رو ویرایش کنی. این فایل مسئول نمایش فرم نظرات در پست‌ها و برگه‌های سایته. ویرایش این فایل بهت اجازه میده تا ظاهر و ساختار فرم نظرات رو به دلخواه تغییر بدی😊🚀

    برای دسترسی به فایل comments.php، باید این مراحل رو دنبال کنی:

    • وارد کنترل پنل هاستت بشو.
    • به مسیر wp-content/themes/your-theme برو تو این صفحه یه فایل php با نام کامنت میبینی محتوای فایل رو پاک کن کامل و کدهای زیر رو داخلش قرار بده و روی ذخیره تغییرات کلیک کن.
    <?php
    /**
     * The template for displaying the list of comments and the comment form.
     *
     * @package HelloElementor
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
        exit; // Exit if accessed directly.
    }
    
    if ( ! post_type_supports( get_post_type(), 'comments' ) ) {
        return;
    }
    
    if ( ! have_comments() && ! comments_open() ) {
        return;
    }
    
    // Comment Reply Script.
    if ( comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
    
    $approved_comments = get_comments( array(
        'status' => 'approve',
        'post_id' => get_the_ID(),
    ) );
    $approved_comments_count = count( $approved_comments );
    ?>
    <section id="comments" class="comments-area">
    
        <section class="vwcm" id="comment_form">
            <header>
                <h2>    
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" style="width: 20px; height: 20px;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0=" />
                    </svg>
                    ارسال نظر
                    <span> ( <?php echo $approved_comments_count; ?> نظر تایید شده )</span>
                </h2>
            </header>
            <div id="cancel_replay" style="display:none;">
                <button type="button" id="cancel_reply_button">لغو پاسخ</button>
            </div>
            <div class="vcreviews">
                <div id="cancel_replay"></div>
                <form action="<?php echo esc_url( home_url( '/' ) ); ?>wp-comments-post.php" method="post" id="commentform" class="comment-form" name="commform">
                    <?php wp_nonce_field( 'post_comment', 'comment_nonce' ); ?>
                    <div class="form-fields">
                        <?php if ( ! is_user_logged_in() ) : ?>
                        <div class="name-email">
                            <input type="text" name="author" placeholder="نام" id="author" value="" required>
                            <input type="email" name="email" placeholder="ایمیل" id="email" value="" required>
                        </div>
                        <?php endif; ?>
                        <textarea id="comment" placeholder="نظر خود را بنویسید ..." name="comment" required style="width: <?php echo is_user_logged_in() ? '100%' :'60%'; ?>;"></textarea>                
                    </div>
                    <div class="submit-section">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" style="width: 20px; height: 20px;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                            </svg> 
                            نظرات پس از رویت و تایید مدیران نمایش داده می‌شود
                        </span>
                        <button aria-label="ارسال نظر" type="submit">ارسال نظر</button>
                    </div>
                    <input type="hidden" name="comment_post_ID" value="<?php echo get_the_ID(); ?>">
                    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
                </form>
            </div>
        </section>
    
        <?php if ( have_comments() ) : ?>
            <?php the_comments_navigation(); ?>
    
            <ol class="comment-list">
                <?php
                wp_list_comments(
                    [ 
                        'style'       => 'ol',
                        'short_ping'  => true,
                        'avatar_size' => 42,
                        'callback'    => 'custom_comment_callback', 
                    ]
                );
                ?>
            </ol>
    
            <?php the_comments_navigation(); ?>
    
        <?php endif; ?>
    
    </section>
    <?php
    // Custom callback function to display comments
    function custom_comment_callback( $comment, $args, $depth ) {
        $GLOBALS['comment'] = $comment;
        $user = get_userdata( $comment->user_id );
        $is_admin = in_array( 'administrator', (array) $user->roles );
    
        $comment_time = human_time_diff( get_comment_time( 'U' ), current_time( 'timestamp' ) );
    
        $parent_comment = $comment->comment_parent;
        $reply_to = '';
    
        if ( $parent_comment ) {
            $parent_comment_obj = get_comment( $parent_comment );
            $reply_to = '@ در پاسخ به ' . get_comment_author( $parent_comment_obj );
        }
        ?>
        <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
            <div class="comment-body">
                <div class="comment-author" style="display: flex; align-items: center; justify-content: space-between;">
                    <div style="display: flex; align-items: center;">
                        <div class="comment-avatar">
                            <?php echo get_avatar( $comment, 42 ); ?>
                        </div>
                        <span class="comment-author-name" style="margin-right: 10px;"><?php comment_author(); ?></span>
    
                        <?php if ( $is_admin ) : ?>
                            <span class="role-button" style="margin-left: 10px; font-weight: bold; color: #007bff;">مدیر سایت</span>
                        <?php endif; ?>
                    </div>
    
                    <div class="reply-button">
                        <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
                    </div>
                </div>
    
                <span class="comment-date"><?php echo esc_html( $comment_time . ' پیش' ); ?></span>
    
                <?php if ( $reply_to ) : ?>
                    <div class="reply-to-container" style="background-color: #007bff; color: white; padding: 5px 10px; margin-top: 10px; font-size: 0.9em; display: inline-block;">
                        <?php echo $reply_to; ?>
                    </div>
                <?php endif; ?>
    
                <div class="comment-content" style="margin-top: 10px;">
                    <?php comment_text(); ?>
                </div>
    
    <!-- Copy button positioned just to the left of the reply button -->
    <div class="copy-container" style="text-align: right; display: flex; justify-content: flex-end;">
        <button class="copy-article-link" data-comment-id="<?php echo comment_ID(); ?>" aria-label="کپی لینک کامنت" style="cursor: pointer; background: none; border: none;">
            <img src="https://www.rayawp.ir/wp-content/uploads/2024/09/copy-3-svgrepo-com-1.svg" alt="کپی لینک کامنت" width="25" height="25" />
        </button>
    </div>
    
    
        </li>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const copyButtons = document.querySelectorAll('.copy-article-link');
            copyButtons.forEach(function(button) {
                button.addEventListener('click', function (event) {
                    event.preventDefault();
                    
                    const commentId = button.getAttribute('data-comment-id');
                    const commentLink = '<?php echo get_permalink( get_the_ID() ); ?>#comment-' + commentId;
                    
                    navigator.clipboard.writeText(commentLink)
                        .then(() => {
                            Swal.fire({
                                icon: 'success',
                                title: 'لینک کامنت با موفقیت کپی شد!',
                                showConfirmButton: false,
                                timer: 2000
                            });
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطا در کپی کردن لینک!',
                                text: err.toString()
                            });
                        });
                });
            });
        });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const replyButtons = document.querySelectorAll('.comment-reply-link');
        const commentForm = document.getElementById('comment_form');
        const commentFormTitle = commentForm.querySelector('header h2');
        const cancelReplyButton = document.getElementById('cancel_reply_button');
        const cancelReplayDiv = document.getElementById('cancel_replay');
        const commentParentInput = document.getElementById('comment_parent');
    
        replyButtons.forEach(function(button) {
            button.addEventListener('click', function(event) {
                event.preventDefault();
    
                const parentCommentID = button.closest('.comment').id.replace('comment-', '');
                const parentCommentAuthor = button.closest('.comment').querySelector('.comment-author-name').innerText;
                commentParentInput.value = parentCommentID;
                cancelReplayDiv.style.display = 'block';
                commentFormTitle.innerText = 'در حال پاسخ به کامنت ' + parentCommentAuthor;
                commentForm.scrollIntoView({ behavior: 'smooth' });
            });
        });
    
        cancelReplyButton.addEventListener('click', function() {
            commentParentInput.value = 0;
            cancelReplayDiv.style.display = 'none';
            commentFormTitle.innerText = 'ارسال نظر';
        });
    });
    </script>
    <?php
    }
    ?> 

    2️⃣ استایل دهی به فرم ارسال نظر وردپرس

    بعد از این نوبت میرسه به استایل دهی فرم باید کدهای CSS زیر رو در style.css قالب سایتت قرار بدی تا اون شکل و استایل مدنظر رو ی فرم ارسال نظرت اعمال بشه 🙂

    /* styles for Comment form by RayaWp.ir */
        #comment_form {
            background-color: #ff7a00;
            padding: 20px;
            border-radius: 10px;
            color: #fff;
            width: 100%;
        }
    
        /* Header style */
        #comment_form header h2 {
            font-size: 1.5em;
            display: flex;
            align-items: center;
            color: #fff;
            margin-bottom: 15px;
        }
    #comment_form header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    #comment_form header h2 {
        flex-grow: 1;
        font-size: 1.5em;
        display: flex;
        align-items: center;
        color: #fff;
        margin-bottom: 15px;
    }
    
    #cancel_replay {
        display: flex;
        align-items: center;
    }
    
    #cancel_reply_button {
        background-color: #ff5f00;
        color: white;
        border: none;
        padding: 5px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    #cancel_reply_button:hover {
        background-color: #e64a00;
    }
    
        #comment_form header h2 svg {
            margin-left: 10px; 
            fill: #fff; 
            width: 25px; 
            height: 25px; 
        }
    
        /* Styling for the fields */
        .form-fields {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    
        .name-email {
            display: flex;
            flex-direction: column;
            width: 35%;
        }
    /* Comment form */
    #comment_form{
    	margin-bottom:30px;
    background: #0b486b ;}
    
    /* Comment */
    #comment{
    	border-width:0px !important;
    	background-color:rgba(236,240,241,0.05) !important;
    	color:#ffffff !important;
    }
    .children .comment-author-admin .comment-body{
    	background-color:#ebf6fe !important;
    	
    }
    /* Comment reply link (hover) */
    .comment-list .thread-even .comment-reply-link:hover{
    	background-color:#03a9f4 !important;
    	color:#ffffff;
    }
    
    /* Link (hover) */
    .comment-author-admin .comment-body a:hover{
    	background-color:#03a9f4 !important;
    	color:#ffffff;
    }
    
    /* Comment reply link (hover) */
    .comment-list .thread-odd .comment-reply-link:hover{
    		background-color:#03a9f4 !important;
    	color:#ffffff;
    	
    }
    
    /* Comment */
    #comment{
    	border-width:0px !important;
    	background-color:rgba(236,240,241,0.05) !important;
    	color:#ffffff !important;
    }
    
    /* Author */
    #author{
    	background-color:rgba(236,240,241,0.05);
    	border-width:0px;
    	border-radius:10px;
    		color:#ffffff;
    
    }
    
    /* Email */
    #email{
    	background-color:rgba(236,240,241,0.05);
    	border-width:0px;
    		border-radius:10px;
    
    		color:#ffffff;
    
    }
    #commentform .submit-section button:hover{
    	background-color:rgba(41,102,193,0.95);
    	
    }
    /* Button */
    #commentform .submit-section button{
    	background-color:#3f51b5;
    }
    
    /* Comment body */
    .elementor-element-9e21b98 .elementor-container .elementor-top-column .elementor-widget-wrap .elementor-widget-post-comments .elementor-widget-container #comments .comment-list .thread-odd .comment-body{
    	border-bottom-style:none !important;
    }
    
    /* Comment reply link */
    .comment-list .thread-odd .comment-reply-link{
    		background-color:rgba(0,156,225,0.15) !important;
    	color:#2196f3;}
    
    /* Comment reply link */
    .comment-list .thread-even .comment-reply-link{
    		background-color:rgba(0,156,225,0.15) !important;
    	color:#2196f3;}
    
    /* Link */
    .comment-author-admin .comment-body a{
    		background-color:rgba(0,156,225,0.15) !important;
    	color:#2196f3;}
    
    /* Role button */
    .comment-author-admin div .role-button{
    	border-top-left-radius:5px !important;
    	border-top-right-radius:5px !important;
    	border-bottom-left-radius:5px !important;
    	border-bottom-right-radius:5px !important;
    	padding-top:5px;
    	padding-bottom:5px;
    	
    }
    
    /* Comment date */
    .comment-author-admin .comment-body .comment-date{
    	border-bottom-color:rgba(44,62,80,0.12);
    	border-bottom-style:solid !important;
    	border-bottom-width:1px;
    	padding-bottom:15px !important;
    }
    
    /* Comment date */
    .comment-list .thread-even .comment-date{
    	border-bottom-color:rgba(44,62,80,0.12);
    	border-bottom-style:solid !important;
    	border-bottom-width:1px;
    	padding-bottom:25px !important;
    }
    
    /* Comment date */
    .comment-list .thread-odd .comment-date{
    	border-bottom-color:rgba(44,62,80,0.12);
    	border-bottom-style:solid !important;
    	border-bottom-width:1px;
    	padding-bottom:25px !important;
    }
    
    /* Avatar */
    .comment-list .thread-even .avatar{
    	border-top-left-radius:25% !important;
    	border-top-right-radius:25% !important;
    	border-bottom-left-radius:25% !important;
    	border-bottom-right-radius:25% !important;
    	padding-bottom:0px;
    	margin-bottom:5px;
    }
    
    /* Avatar */
    .comment-list .thread-odd .avatar{
    	border-top-left-radius:25% !important;
    	border-top-right-radius:25% !important;
    	border-bottom-left-radius:25% !important;
    	border-bottom-right-radius:25% !important;
    }
    
    /* Image */
    .comment-author-admin div img{
    	border-top-left-radius:25% !important;
    	border-top-right-radius:25% !important;
    	border-bottom-left-radius:25% !important;
    	border-bottom-right-radius:25% !important;
    }
    
    
    /* Button */
    #commentform .submit-section button{
    	background-color:#3f51b5;
    }
    
    
        .name-email input {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1em;
            outline: none;
        }
    
        .name-email input:focus {
            border-color: #ff5f00;
        }
    
        #comment {
            width: 60%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1em;
            outline: none;
            resize: none;
        }
    
        #comment:focus {
            border-color: #ff5f00;
        }
    
        /* Submit section */
        .submit-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }
    
        .submit-section button {
            background-color: #ff5f00;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
    
        .submit-section button:hover {
            background-color: #e64a00;
        }
    
        .submit-section span {
            font-size: 0.9em;
            color: #fff;
        }
    
        /* Button for admin only */
        .role-button {
            background-color: #007bff;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 1em;
        }
    
        /* Remove cursor pointer for admin button */
        .role-button {
            cursor: default;
        }
    
        /* Display the comment date */
        .comment-date {
            font-size: 0.9em;
            color: #888;
            margin-left: 15px; 
            display: inline-block;
        }
    
        /* Style the comment author area */
        .comment-author {
            display: flex;
            align-items: center;
        }
    
        .comment-author img {
            margin-right: 10px;
        }
    
        /* Style to display the date under the author's name */
        .comment-author .comment-date {
            display: block;
            margin-top: 5px;
            font-size: 0.9em;
            color: #888;
        }
    @media (max-width: 767px) {
        #comments .children {
            padding-inline-start: 0 !important;
        }
    }
        .comment-body {
            padding-right: 50px; 
        }
    
        /* Ensure the comment content, author name, and date get the same padding */
        .comment-content,
        .comment-author-name,
        .comment-date {
            padding-right: 50px;
        }
    
        /* Optional: If you want to align comment text more neatly, you can add some more specific styles here */
        .comment-content {
            padding-right: 50px;
            margin-top: 10px;
        }
        .comment-list .thread-even .comment-date{
        margin-right:14px;
    }
    
    /* Comment author */
    .comment-list .thread-even .comment-author{
        margin-right:6px !important;
    }
    
    /* Paragraph */
    .comment-list .thread-even p{
        margin-right:14px;
    }
    
    /* Comment date */
    .comment-author-admin .comment-body .comment-date{
        padding-right:50px;
        margin-right:14px;
    }
    
    /* Comment author */
    .comment-author-admin .comment-body .comment-author{
        margin-right:4px !important;
    }
    
    /* Comment date */
    .comment-list .thread-odd .comment-date{
        margin-right:11px;
    }
    
    /* Comment author */
    .comment-list .thread-odd .comment-author{
        margin-right:2px !important;
        margin-bottom:5px;
    }
    
    /* Division */
    .comment-author-admin .comment-body .comment-author > div{
        padding-bottom:5px;
    }
    /* Comment body */
    .comment-list .thread-even .comment-body{
        	background-color:#ebf6fe !important;
    }
    
    
    /* Comment body */
    .hentry .elementor-element-9e21b98 .elementor-container .elementor-top-column .elementor-widget-wrap .elementor-widget-post-comments .elementor-widget-container #comments .comment-list .thread-odd .comment-body{
        border-width:1px !important;
        	background-color:#ebf6fe !important;
    
    }
    .comment-body{
    	margin-top:1.5rem;
    	
    }
    /* Reply container */
    .comment-author-admin .comment-body .reply-to-container{
    	width:9vw;
    }
    
    /* 991px and smaller screen sizes */
    @media (max-width:991px){
    
    	/* Reply container */
    	.comment-author-admin .comment-body .reply-to-container{
    		width:18vw;
    	}
    	
    }
    
    /* 767px and smaller screen sizes */
    @media (max-width:767px){
    
    	/* Reply container */
    	.comment-author-admin .comment-body .reply-to-container{
    		width:20vw;
    	}
    	
    }
    
    /* 575px and smaller screen sizes */
    @media (max-width:575px){
    
    	/* Reply container */
    	.comment-author-admin .comment-body .reply-to-container{
    		width:25vw;
    	}
    	
    }
    
    /* 479px and smaller screen sizes */
    @media (max-width:479px){
    
    	/* Reply container */
    	.comment-author-admin .comment-body .reply-to-container{
    		width:45vw;
    		
    	}
    	
    }
    
    /* Comment date */
    .comment-author-admin .comment-body .comment-date{
        border-bottom-width:1px;
        border-bottom-style:dotted;
        margin-bottom:0px;
        margin-top:0px;
        padding-top:0px;
        padding-bottom:12px;
    }
    
    /* Comment date */
    .comment-list .thread-even .comment-date{
        border-bottom-width:1px;
        border-bottom-style:dotted;
        margin-bottom:0px;
        margin-top:0px;
        padding-top:0px;
        padding-bottom:20px;
    }
    
    /* Comment date */
    .comment-list .thread-odd .comment-date{
            border-bottom-width:1px;
        border-bottom-style:dotted;
        margin-bottom:0px;
        margin-top:0px;
        padding-top:0px;
        padding-bottom:12px;   
    }
    /* Role button */
    .comment-author-admin div .role-button{
        background-color:#3498db;
        color:#ffffff !important;
        background-image:linear-gradient(to right, #fc466b 0%, #3f5efb 100%);
        margin-right:8px;
        border-top-left-radius:50px;
        border-top-right-radius:50px;
        border-bottom-left-radius:50px;
        border-bottom-right-radius:0px;
    }
    body.rtl #comments ol.comment-list .children:before,
    html[dir=rtl] #comments ol.comment-list .children:before {
        content: none !important; 
        left: auto;
        right: 0;
    }
     #comments .comment .avatar {
        position: set !important;
        }
       #comments .comment .avatar {
        position: set !important;
            float: left
        }  
        /* List */
    #comments .comment-list ol{
    	padding-right:0px !important;
    	
    }
    /* Comment author */
    .comment-list .thread-even .comment-author{
    	margin-bottom:8px;
    }
    
    /* Comment date */
    .comment-list .thread-odd .comment-date{
    	margin-bottom:8px !important;
    	
    }
    /* Reply container */
    .comment-author-admin .comment-body .reply-to-container{
    	display:inline-flex !important;
    	border-top-left-radius:5px;
    	border-top-right-radius:5px;
    	border-bottom-left-radius:5px;
    	border-bottom-right-radius:5px;
    	background-color:#ffffff !important;
    	color:#020202 !important;
    	text-align:center;
    }

    بعد از قرار دادن کدهای بالا استایل فرم ارسال نظر به شکل زیر تغییر خواهد کرد 🙂

    “🎉 عالی شد! حالا فرم ارسال نظرت به یه فرم حرفه‌ای و منحصر به فرد تبدیل شده که علاوه بر اینکه خیلی شیک و مدرن شده، تجربه کاربری سایتت رو هم خیلی بهتر کرده! 😎💬 حالا که فرم کامنت‌هات جذاب‌تر و کاربرپسندتر شدن، منتظرم نظرات فوق‌العاده و خلاقانه‌ت رو زیر این پست ببینم! 👏🙏 بهم بگو چطور شد و اگه هر سوالی داشتی، حتما تو کامنت‌ها مطرح کن! من همیشه آماده‌ام تا بهت کمک کنم! 😉”

    5/5 - (3 امتیاز)

    اگه از مطالب سایت خوشت اومده و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک کمک کنی بهتر و قوی‌ترش کنیم! هر مبلغی که کمک کنی، مستقیم میره برای توسعه سایت و تولید محتوا و آموزش های جذاب‌ تر. 🌟

    ارسال نظر ( 0 نظر تایید شده )

    نظرات پس از رویت و تایید مدیران نمایش داده می‌شود

    📖 آنچه خواهید خواند

    Toggle
      🔥
      18 نفر در حال مطالعه این مقاله
      Picture of SaeID
      SaeID

      عاشق یادگیری وردپرس و کلن طراحی سایت هستم. سعی میکنم دانش و تجربیات خودمو در رایا وردپرس باهاتون به اشتراک بزارم :)

      مقالات بیشتر
      بستن