Contents
Introducción
En este artículo se explica, con detalle y ejemplos prácticos, cómo reordenar los campos del formulario de comentarios en WordPress utilizando filtros en PHP. Cubriremos los filtros más relevantes, diferencias entre versiones de WordPress, ejemplos de código para mover el área de comentario arriba o abajo, cómo añadir campos personalizados y cómo validar y guardar esos campos. Todos los fragmentos de código están listos para pegar en el archivo functions.php de tu tema hijo o en un plugin personalizado.
Conceptos clave
- comment_form_fields: filtro (desde WP 4.4) que permite modificar el array completo de campos del formulario de comentarios, incluyendo el campo de comentario (comment). Es ideal para reordenar.
- comment_form_default_fields: filtro que devuelve los campos por defecto (author, email, url, cookies). Se emplea para modificar o añadir a esos campos antes de que se rendericen.
- Prioridad de filtros: algunos temas y plugins pueden alterar los campos si tu reordenación no se aplica, aumenta la prioridad del filtro (valor más alto ejecuta la función después).
- Escaping y localización: usa funciones de traducción como __() o esc_html__() y escaping (esc_attr, esc_html) en los valores que renderices para seguridad.
- Validación y guardado: para campos personalizados, debes validar durante la preprocesación (preprocess_comment) o en comment_post y guardarlos como meta del comentario.
Situación habitual y objetivo
Por defecto, WordPress renderiza los campos de autor, correo y URL antes del área de comentario. Muchas veces se desea mover el área de comentario al principio (para fomentar respuestas rápidas) o reorganizar el orden de nombre/email/url. A continuación se muestran varios enfoques y ejemplos.
1) Reordenar campos: mover el textarea de comentario al principio
Este es el ejemplo más común: colocar el campo de texto del comentario antes de los demás campos. Funciona con el filtro comment_form_fields.
lt?php
// Mover el textarea comment al principio de los campos
add_filter( comment_form_fields, mi_reordenar_campos_comentario , 20 )
function mi_reordenar_campos_comentario( fields ) {
if ( isset( fields[comment] ) ) {
comment_field = fields[comment]
unset( fields[comment] )
// Prepend the comment field
new_fields = array( comment =gt comment_field )
// Merge el resto respetando sus claves
new_fields = array_merge( new_fields, fields )
return new_fields
}
return fields
}
?gt
Explicación rápida: se extrae el campo comment, se elimina de la matriz original y se inserta al principio creando un nuevo array y mezclándolo con los restantes.
2) Reordenar de forma explícita según una lista de orden
Si quieres un orden fijo y robusto (por ejemplo: comment, author, email, url, cookies), usa una lista con el orden deseado. Esto evita dependencias del orden original del tema o plugins.
lt?php
add_filter( comment_form_fields, mi_orden_personalizado_campos, 20 )
function mi_orden_personalizado_campos( fields ) {
// Define el orden deseado (las claves posibles)
order = array( comment, author, email, url, cookies )
new_fields = array()
foreach ( order as key ) {
if ( isset( fields[ key ] ) ) {
new_fields[ key ] = fields[ key ]
unset( fields[ key ] )
}
}
// Si quedan campos no previstos, los añadimos al final
if ( ! empty( fields ) ) {
foreach ( fields as key =gt value ) {
new_fields[ key ] = value
}
}
return new_fields
}
?gt
3) Añadir un campo personalizado y colocarlo donde quieras
Supongamos que quieres añadir un campo teléfono al formulario y colocarlo después del nombre (author). Primero añadimos el campo con comment_form_default_fields o directamente en comment_form_fields, y luego lo posicionamos.
lt?php
// 1) Agregar el campo phone a los default fields
add_filter( comment_form_default_fields, mi_agregar_campo_telefono )
function mi_agregar_campo_telefono( fields ) {
fields[phone] = ltp class=comment-form-phonegtltlabel for=phonegt . esc_html__( Teléfono, text-domain ) . lt/labelgt .
ltinput id=phone name=phone type=text value= /gtlt/pgt
return fields
}
// 2) Reordenar para que phone esté detrás de author
add_filter( comment_form_fields, mi_posicionar_telefono, 20 )
function mi_posicionar_telefono( fields ) {
order = array( comment, author, phone, email, url, cookies )
new = array()
foreach ( order as k ) {
if ( isset( fields[ k ] ) ) {
new[ k ] = fields[ k ]
unset( fields[ k ] )
}
}
if ( ! empty( fields ) ) {
foreach ( fields as k =gt v ) {
new[ k ] = v
}
}
return new
}
// 3) Validar y guardar phone cuando se publique el comentario
add_action( comment_post, mi_guardar_telefono_comentario, 10, 3 )
function mi_guardar_telefono_comentario( comment_ID, comment_approved, commentdata ) {
if ( isset( _POST[phone] ) ) {
phone = sanitize_text_field( wp_unslash( _POST[phone] ) )
if ( !== phone ) {
add_comment_meta( comment_ID, phone, phone, true )
}
}
}
?gt
Notas importantes: valida y sanitiza siempre datos provenientes de _POST. En el ejemplo se usa sanitize_text_field y wp_unslash para seguridad.
4) Validación previa (evitar comentarios sin el nuevo campo si es obligatorio)
Si el campo personalizado es obligatorio, valida antes de insertar el comentario usando el filtro preprocess_comment y devuelve un WP_Error en caso de fallo.
lt?php
add_filter( preprocess_comment, mi_validar_campo_telefono, 10 )
function mi_validar_campo_telefono( commentdata ) {
if ( isset( _POST[phone] ) ) {
phone = trim( wp_unslash( _POST[phone] ) )
if ( empty( phone ) ) {
wp_die( esc_html__( Por favor, añade tu teléfono., text-domain ) )
}
// Validación adicional: solo dígitos y signos - espacios
if ( ! preg_match( /^[0-9 -s] /, phone ) ) {
wp_die( esc_html__( Número de teléfono inválido., text-domain ) )
}
}
return commentdata
}
?gt
5) Orden dinámico según configuración o admin
Puedes permitir que el orden se configure desde el Customizer o desde una opción en la base de datos. La técnica es la misma: obtener la opción, construir la matriz de orden y aplicar la reordenación como se mostró arriba.
Consideraciones de compatibilidad y mejores prácticas
- Compatibilidad de versiones: Antes de WP 4.4 el campo comment no siempre estaba disponible en la matriz que devuelve comment_form_fields si trabajas con versiones antiguas, utiliza comment_form_default_fields y modifica comment_field por separado.
- Prioridades: Si un plugin modifica campos con prioridad 10, usa 20 o 999 para asegurarte de que tu reordenación se aplique después.
- Accesibilidad: Respeta etiquetas ltlabelgt, atributos aria-required y tabindex cuando personalices campos.
- Traducción: Usa funciones __(), _e(), esc_html__() y text-domain de tu tema o plugin.
- Sanitización: Sanitiza todo antes de guardar (sanitize_text_field, sanitize_email, esc_url_raw según el tipo).
- Seguridad: Evita salida sin escapar usa esc_attr() y esc_html() al imprimir valores procedentes de la base de datos o de POST.
Ejemplo avanzado: reordenar respetando campos añadidos por plugins
Un método robusto para reordenar consiste en definir un orden preferido e insertar cualquier campo desconocido al final, tal como mostramos antes. Si quieres que tu reordenación tenga la última palabra incluso cuando otros filtros actúen más tarde, puedes engancharte con una prioridad alta y usar remove_filter si conoces la función que provoca el conflicto.
lt?php
// Reordenación definitiva con prioridad muy alta
add_filter( comment_form_fields, mi_reorden_final, 999 )
function mi_reorden_final( fields ) {
preferred = array( comment, author, email, phone, url, cookies )
result = array()
foreach ( preferred as k ) {
if ( isset( fields[ k ] ) ) {
result[ k ] = fields[ k ]
unset( fields[ k ] )
}
}
// Adjuntar cualquier campo restante (plugins o temas)
foreach ( fields as k =gt v ) {
result[ k ] = v
}
return result
}
?gt
Depuración y pruebas
- Activa WP_DEBUG durante la implementación para detectar errores PHP.
- Prueba en distintos navegadores y dispositivos para comprobar que la interfaz es usable.
- Desactiva temporalmente plugins de comentarios (si hay) para ver si son ellos los que alteran el orden.
- Revisa la base de datos (wp_commentmeta) para verificar que los metadatos se guardan correctamente cuando añades campos personalizados.
Resumen y buenas prácticas
- Usa comment_form_fields para reordenar fácilmente e incluir el campo comment.
- Si solo modificas los campos por defecto (author, email, url), comment_form_default_fields también es válido.
- Asegura prioridad adecuada en tu add_filter para que tu reordenación no sea sobrescrita.
- Valida y guarda correctamente cualquier campo personalizado y recuerda sanitizar y escapar los datos.
- Mantén la accesibilidad (labels, atributos required) y la internacionalización (funciones de traducción).
Ejemplos rápidos de referencia
Resumen de los fragmentos más útiles: mover comentario al principio, ordenar explícitamente y añadir/guardar un campo phone.
Mover comment arriba
lt?php
add_filter( comment_form_fields, function( fields ) {
if ( isset( fields[comment] ) ) {
comment = fields[comment]
unset( fields[comment] )
return array_merge( array( comment =gt comment ), fields )
}
return fields
}, 20 )
?gt
Orden explícito
lt?php
add_filter( comment_form_fields, orden_explicito, 20 )
function orden_explicito( fields ) {
order = array( comment, author, email, url, cookies )
new = array()
foreach ( order as k ) {
if ( isset( fields[ k ] ) ) {
new[ k ] = fields[ k ]
unset( fields[ k ] )
}
}
return array_merge( new, fields )
}
?gt
Agregar campo phone y guardarlo
lt?php
// Añadir phone
add_filter( comment_form_default_fields, function( fields ) {
fields[phone] = ltp class=comment-form-phonegtltlabel for=phonegt . esc_html__( Teléfono, text-domain ) . lt/labelgt .
ltinput id=phone name=phone type=text value= /gtlt/pgt
return fields
})
// Guardar phone
add_action( comment_post, function( comment_ID ) {
if ( isset( _POST[phone] ) ) {
phone = sanitize_text_field( wp_unslash( _POST[phone] ) )
if ( phone !== ) {
add_comment_meta( comment_ID, phone, phone, true )
}
}
} )
?gt
Conclusión
Reordenar campos del formulario de comentarios en WordPress es una tarea relativamente sencilla si se usan los filtros adecuados. Es recomendable trabajar con comment_form_fields para tener control total, respetar la seguridad y accesibilidad, y probar con distintas prioridades si otros elementos del tema o plugins interfieren. Los ejemplos incluidos cubren los casos más comunes: mover el textarea, ordenar explícitamente, añadir campos personalizados y validar/guardar esos datos.
|
|
Acepto donaciones de BAT's mediante el navegador Brave 🙂 |