php - Removing website URL in comments causes misalignment of submit button and tickbox

admin管理员组

文章数量:1122832

I am using Astra free theme, I have created a child theme with functions.php, comments.php, style.css. I have managed to remove the Wesbite URL entry using the following code in functions.php:

function remove_comment_fields( $fields ) {
    unset( $fields['url'] );
    return $fields;
}
add_filter(‘comment_form_field_url’, ‘__return_false’);

However, this causes the form-submit button and the ment-form-cookies-consent checkbox + text to be moved up to be in line (horizontally) to the name and email forms.

Originally I had name , email and website url entry forms on a single horizontal line then below it I had the cookies consent checkbox and below that the submit button.

The entire comments section is heavily customised so I'm not sure if previous styling is causing issues, so I have added the entire style.css code for the comments section below if that helps:

    /* Comment Section Styles */
    
    /* Ensure the width of the comment and reply box match */
    #respond {
        width: 100%;  /* Ensure the reply box takes full width */
        margin-top: 20px;  /* Add space above the reply box */
        margin-bottom: 20px;  /* Add space below the reply box */
    }
    
    /* Styling for the submit button */
    #submit {
        background-color: #ffc857;
        border: none;
        color: black;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
    
    #submit:hover {
        background-color: #e6b437;
    }
    
    /* Comment Body */
    ment-body {
        margin-left: 0;
        padding-left: 0;
        width: 100%; /* Ensure full width */
        background-color: #333; /* Add a background color */
        border-radius: 5px; /* Optional: slight rounding of corners */
        padding: 15px; /* Add padding inside the comment container */
        border: 1px solid #555; /* Add a border to define the container */
        position: relative; /* For proper positioning of child elements */
        margin-bottom: 20px; /* Ensure space below comment body */
    }
    
    /* Avatar adjustments and alignment */
    ment-author .avatar {
        margin-right: 10px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        float: left; /* Ensure it floats next to the content */
        margin-left: 15px; /* Add left margin to move it away from the edge */
    }
    
    /* Remove the "says" text after the username */
    ment-author span.says {
        display: none; /* Hide the "says" text */
    }
    
    /* Adjust the date position to bottom-right */
    ment-meta {
        font-size: 12px;
        color: #ccc;
        position: absolute;
        bottom: 10px; /* Adjust distance from bottom */
        right: 10px; /* Adjust distance from right */
        padding: 5px; /* Remove padding */
    }
    
    /* Adjust the comment form itself */
    #ast-commentform {
        padding: 15px;  /* Ensure padding inside the form */
        margin-top: 30px;  /* Add margin to push the comment form down */
        width: 100%;  /* Ensure the form stays full width */
        background-color: #333; /* Maintain background color */
        border: 1px solid #555; /* Keep the border */
        border-radius: 5px; /* Rounded corners */
    }
    
    /* Remove unwanted outline around the form when clicked */
    #ast-commentform:focus, ment-reply-link, #cancel-comment-reply-link {
        outline: none;
    }
    
    ment-form-cookies-consent {
        margin-top: 10px; /* Space above cookies consent */
    }
    
    ment-form-cookies-consent label {
        color: #ffffff; /* Change to white */
    }
    
    .form-submit {
        margin-bottom: 20px; /* Add space below the submit button */
    }
    /* Maintain the order of comments, form, and navigation */
.single-post #comments {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure full width */
.single-post #respond {
    order: 1;
    width: 100%; /* Ensure the reply form takes full width */
}

.single-post .theme-heading {
    order: 2;
}

.single-post #comments ment-list {
    order: 3;
    width: 100%; /* Ensure the comment list takes full width */
}

.single-post ment-navigation {
    order: 4;
}

ment-number {
    display: none;
}

/* Ensure the comment list is aligned properly */
ment-list {
    margin-left: 0; /* Align to the left */
    padding-left: 0; /* Remove unnecessary padding */
    width: 100%; /* Ensure full width */
}

I have added the comments.php as well below:

<?php
/**
 * The template for displaying comments.
 *
 * This is the template that displays the area of the page that contains both the current comments
 * and the comment form.
 *
 * @link 
 *
 * @package Astra
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// If the post is protected by a password or comments are disabled, return early.
if ( post_password_required() || false === astra_get_option( 'enable-comments-area', true ) ) {
    return;
}

$comment_form_position = astra_get_option( 'comment-form-position', 'below' );
$container_selector    = 'outside' === astra_get_option( 'comments-box-placement' ) ? 'ast-container--' . astra_get_option( 'comments-box-container-width', '' ) : '';

?>
<div id="comments" class="comments-area comment-form-position-<?php echo esc_attr( $comment_form_position ); ?> <?php echo esc_attr( $container_selector ); ?>">
    
    <?php astra_comments_before(); ?>

    <div class="discussion-header">
        <h2>Threads</h2>
        <div class="discussion-header-right">
            <a href="javascript:void(0);" onclick="openMailchimpPopup()">Subscribe To Hidden Scrolls <span>&#x1F4DC;</span></a>
        </div>
    </div>

    <?php
    if ( have_comments() ) :
        astra_markup_open( 'comment-count-wrapper' );
        $title_tag = apply_filters( 'astra_comment_title_tag', 'h3' );
        ?>
        <!-- No comments title displayed -->

        <?php
        astra_markup_close( 'comment-count-wrapper' );

        if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
        ?>
        <nav id="comment-nav-above" class="navigation comment-navigation" aria-label="<?php esc_attr_e( 'Comments Navigation', 'astra' ); ?>">
            <h3 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'astra' ); ?></h3>
            <div class="nav-links">
                <div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'astra' ) ); ?></div>
                <div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'astra' ) ); ?></div>
            </div>
        </nav>
        <?php endif; ?>

        <ol class="comment-list">
            <?php
            wp_list_comments(
                array(
                    'style'       => 'ol',
                    'short_ping'  => true,
                    'avatar_size' => 60,
                )
            );
            ?>
        </ol><!-- ment-list -->

        <?php
        if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
        ?>
        <nav id="comment-nav-below" class="navigation comment-navigation" aria-label="<?php esc_attr_e( 'Comments Navigation', 'astra' ); ?>">
            <h3 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'astra' ); ?></h3>
            <div class="nav-links">
                <div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'astra' ) ); ?></div>
                <div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'astra' ) ); ?></div>
            </div>
        </nav>
        <?php endif; ?>
    <?php endif; // Check for have_comments(). ?>

<?php
    // Output the comment form if it's enabled.
    comment_form(array(
        'title_reply'   => '', // Remove the default title "Leave a Comment"
        'class_form'    => 'comment-form dark-grey-form',
        'label_submit'  => 'Post Comment',
        'comment_field' => '<div class="comment-textarea"><textarea id="comment" name="comment" placeholder="Reply / Post" cols="45" rows="8" aria-required="true"></textarea></div>',
        'submit_field'  => '<p class="form-submit">%1$s %2$s</p>', // Customize submit field
    ));
    ?>

</div><!-- #comments -->

本文标签： phpRemoving website URL in comments causes misalignment of submit button and tickbox