Cómo reorganizar campos en comment_form()

29 abr 2012, 22:33:15
Vistas: 30.3K
Votos: 24

Estoy usando un filtro personalizado para cambiar los campos, pero no logro descubrir cómo cambiar el orden de los campos en el formulario de comentarios.

Orden deseado:

  • campo de comentario (primero/arriba)
  • nombre
  • email
  • sitio web

Este es el código que estoy usando actualmente:

function alter_comment_form_fields($fields){
    $fields['comments'] = 'Test';
    $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Tu nombre, por favor' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                    '<input id="author" name="author" type="text" placeholder="John Smith" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>';
    $fields['email'] = 'siguiente';  // elimina el campo de email
    //$fields['url'] = '';  // elimina el campo de sitio web

    return $fields;
}

add_filter('comment_form_default_fields','alter_comment_form_fields');
0
Todas las respuestas a la pregunta 5
4
15

Es bastante sencillo. Solo tienes que sacar el textarea de los campos predeterminados – filtrando 'comment_form_defaults' – e imprimirlo en la acción 'comment_form_top':

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: T5 Comment Textarea On Top
 * Description: Hace que el textarea sea el primer campo del formulario de comentarios.
 * Version:     2012.04.30
 * License:     MIT
 * License URI: http://www.opensource.org/licenses/mit-license.php
 */

// Usamos una sola función para ambos trabajos.
add_filter( 'comment_form_defaults', 't5_move_textarea' );
add_action( 'comment_form_top', 't5_move_textarea' );

/**
 * Saca el código del textarea de los campos predeterminados y lo imprime arriba.
 *
 * @param  array $input Campos predeterminados si se llama como filtro
 * @return string|void
 */
function t5_move_textarea( $input = array () )
{
    static $textarea = '';

    if ( 'comment_form_defaults' === current_filter() )
    {
        // Copia el campo a nuestra variable interna …
        $textarea = $input['comment_field'];
        // … y lo elimina del array de predeterminados.
        $input['comment_field'] = '';
        return $input;
    }

    print apply_filters( 'comment_form_field_comment', $textarea );
}
30 abr 2012 01:32:24
Comentarios

Buena solución, pero ¿qué pasa si quieres cambiar el orden de 3 o 4 campos?

Brad Dalton Brad Dalton
27 jul 2014 07:13:51

@BradDalton Lo mismo: primero elimina todos los contenidos de los campos, luego imprímelos en el orden deseado en comment_form_top.

fuxia fuxia
27 jul 2014 10:12:32

No sé si el código ha cambiado desde entonces, pero para la versión 4.0 parece que comment_form_before_fields es un mejor hook que comment_form_top

Mark Kaplun Mark Kaplun
26 sept 2014 17:53:43

@MarkKaplun Hoy en día pasaría la posición deseada como argumento a una clase. :)

fuxia fuxia
26 sept 2014 17:59:25
0

Obviamente hay varias formas de lograr esto. Por ejemplo, para mover el campo de comentario al final del formulario, usarías un código como este:

add_filter( 'comment_form_fields', 'move_comment_field' );
function move_comment_field( $fields ) {
    $comment_field = $fields['comment'];
    unset( $fields['comment'] );
    $fields['comment'] = $comment_field;
    return $fields;
}

Si quisieras reorganizar todos los campos:

  1. Elimina todos los campos
  2. Vuelve a agregar los campos al array pero en el orden en que quieres que se muestren

¿Sencillo, verdad? Decidí explicarlo detalladamente para que el próximo novato como yo que encuentre esta página no se quede sin respuestas útiles.

20 feb 2016 19:11:36
1

Me gustó la respuesta de toscho. Sin embargo, quería usar un textarea personalizado, por lo que no funcionó en ese caso. Utilicé los mismos hooks pero con funciones separadas:

add_filter( 'comment_form_defaults', 'remove_textarea' );
add_action( 'comment_form_top', 'add_textarea' );

function remove_textarea($defaults)
{
    $defaults['comment_field'] = '';
    return $defaults;
}

function add_textarea()
{
    echo '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="60" rows="6" placeholder="escribe tu comentario aquí..." aria-required="true"></textarea></p>';
}
23 oct 2012 17:38:20
Comentarios

Ten en cuenta que muchos plugins anti-spam modifican también el textarea. Esto debe probarse muy bien – yo tuve problemas serios con un enfoque similar.

fuxia fuxia
23 oct 2012 18:29:52
1

El CSS exacto para hacer esto dependerá de tu tema, sin embargo, aquí hay una forma:

#commentform {
display:table;
width:100%;   
}

.comment-form-comment {
display: table-header-group; 
}

Los métodos de visualización de tabla te permiten reordenar elementos de altura arbitraria.

Más información: http://tanalin.com/en/articles/css-block-order/

30 abr 2012 02:40:37
Comentarios

Excelente idea Otto. Un enfoque similar podría lograrse usando flexbox: <br>#commentform { display: flex; flex-flow: column; } .comment-form-comment { order: -1; }.

Bryan Willis Bryan Willis
3 dic 2015 14:28:53
0

los campos del formulario de comentarios están en el arreglo $fields dentro de la función comment_form(). Puedes engancharte al filtro comment_form_default_fields y reordenar el arreglo.

También puedes engancharte al filtro comment_form_defaults y cambiar los valores por defecto; deja todos los datos en el arreglo y cambia solo el field del arreglo con tus campos personalizados; incluye el html.

el valor por defecto de $fields es:

      $fields =  array(
          'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Nombre' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                      '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
          'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Correo electrónico' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                      '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
          'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Sitio web' ) . '</label>' .
                      '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
      );
30 abr 2012 01:29:23