web-dev-qa-db-fra.com

Afficher les champs de commentaires dans deux colonnes

J'utilise comment_form (); dans le fichier loop-single.php pour afficher le formulaire de commentaire. J'ai les champs suivants: Nom, Email, Site Web, Titre, Commentaire. Actuellement, tous ces champs de formulaire s'affichent l'un en dessous de l'autre. J'ai essayé de modifier le formulaire de manière à ce que toutes les valeurs de zone de texte apparaissent dans la colonne de gauche et que seul le texte apparaît dans la colonne de droite.

J'ai essayé d'utiliser comment_notes_after, comment_notes_before, comment_form_top, etc. jusqu'à présent, mais cela n'a pas abouti. Alors, comment puis-je y parvenir (tout code de travail sera grandement apprécié)?

plugin-developmentcommentscomment-form
2
Devner

Vous avez besoin de deux nouveaux conteneurs: un pour les champs de ligne unique, un pour les zones de texte. En regardant le formulaire de commentaire par défaut, nous pouvons voir où leurs balises de début et de fin doivent apparaître. J'ai ajouté quelques commentaires pour que cela soit plus facile à voir:

<form action="<?php echo site_url( '/wp-comments-post.php' ); ?>" method="post" id="<?php echo esc_attr( $args['id_form'] ); ?>">
    <?php do_action( 'comment_form_top' ); ?>
    <?php if ( is_user_logged_in() ) : ?>
        <?php echo apply_filters( 'comment_form_logged_in', $args['logged_in_as'], $commenter, $user_identity ); ?>
        <?php do_action( 'comment_form_logged_in_after', $commenter, $user_identity ); ?>
    <?php else : ?>
        <?php echo $args['comment_notes_before']; ?>
        <?php
        do_action( 'comment_form_before_fields' );
        // Fields: author, email, url
        foreach ( (array) $args['fields'] as $name => $field ) {
            echo apply_filters( "comment_form_field_{$name}", $field ) . "\n";
        }
        do_action( 'comment_form_after_fields' );
        ?>
    <?php endif; ?>
    <?php 
    // Field: textarea
    echo apply_filters( 'comment_form_field_comment', $args['comment_field'] ); ?>
    <?php echo $args['comment_notes_after']; ?>
    <p class="form-submit">
        <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
        <?php comment_id_fields( $post_id ); ?>
    </p>
    <?php do_action( 'comment_form', $post_id ); ?>
</form>
  • Nous avons besoin de la première balise de démarrage sur 'comment_form_top'. Pas plus tard, car nous devons intercepter le cas d'un utilisateur connecté.
  • Nous fermons cette balise et ouvrons la seconde sur 'comment_form_after_fields'.
  • Enfin, nous fermons la dernière balise après 'comment_form_field_comment'. Celui-ci est un filtre, pas une action.

Dans l'exemple de code suivant, je jette un élément style dans le balisage. Dans votre thème, vous devriez mettre le CSS dans la feuille de style. Et vous devriez utiliser un gestionnaire de clearfix de votre choix, pas le balisage que j'ai utilisé ici. :)

add_action( 'comment_form_top', 'wpse_67805_open_tag' );
function wpse_67805_open_tag()
{
    ?>
<style>
@media screen and (min-width: 800px) {
    .wpse-67805-comment-fields,
    .logged-in-as {
        float: left;
        width: 280px;
    }
    .wpse-67805-comment-textarea {
        float: right;
        width: 280px;
    }
    .wpse-67805-textarea-after {
        clear: both;
    }
}
</style>
<div class="wpse-67805-comment-fields">
    <?php
    }
    add_action( 'comment_form_after_fields', 'wpse_67805_open_close_tag' );
    add_action( 'comment_form_logged_in_after', 'wpse_67805_open_close_tag' );
    function wpse_67805_open_close_tag()
    {
        ?></div><div class="wpse-67805-comment-textarea"><?php
    }
    add_filter( 'comment_form_field_comment', 'wpse_67805_close_tag' );
    function wpse_67805_close_tag( $textarea )
    {
        return "$textarea</div><div class='wpse-67805-textarea-after'></div>";
    }

Résultat dans TwentyEleven

enter image description here

Pas vraiment beau, il faut ajuster le CSS. Mais la voie générale devrait être claire maintenant.

1
fuxia