Contents
Cómo añadir campos al formulario de comentarios de WordPress y validarlos en PHP — guía completa
Este tutorial explica, paso a paso y con ejemplos prácticos, cómo extender el formulario de comentarios de WordPress añadiendo campos personalizados (por ejemplo: teléfono y valoración), validarlos en el servidor con PHP, guardarlos como meta de comentario y mostrarlos en el front y en el panel de administración. Incluye también validación client-side con JavaScript y recomendaciones de seguridad y buenas prácticas. Todo el código mostrado está pensado para incluirse en el archivo functions.php de un tema hijo o en un plugin propio.
Requisitos y recomendaciones previas
- Usar un tema hijo o crear un plugin para no perder cambios al actualizar el tema.
- Tener activados los comentarios en el post o tipo de post donde quieras los campos.
- Conocer lo básico de PHP, hooks de WordPress y cómo editar archivos del tema.
- Validar siempre en servidor la validación JavaScript es complementaria (mejora UX).
Resumen del flujo que implementaremos
- Añadir los campos al formulario: mediante hooks de WordPress (comment_form_after_fields y comment_form_logged_in_after).
- Proteger el envío con un nonce para evitar CSRF.
- Validar los datos en el servidor: usar el hook preprocess_comment o pre_comment_on_post para detener envíos inválidos.
- Guardar los datos como meta de comentario con update_comment_meta en el hook comment_post.
- Mostrar esos metadatos en el front-end (por ejemplo, añadidos al texto del comentario) y opcionalmente en el listado de comentarios en el admin.
- Agregar validación client-side mediante script encolado para mejor experiencia de usuario.
1) Añadir campos al formulario de comentarios
Usaremos las acciones comment_form_after_fields (para usuarios no registrados) y comment_form_logged_in_after (para usuarios registrados). También inyectaremos un nonce para seguridad.
lt?php
// Añadir campos custom al formulario de comentarios
add_action(comment_form_after_fields, mi_tema_campos_comentario)
add_action(comment_form_logged_in_after, mi_tema_campos_comentario)
function mi_tema_campos_comentario() {
// Nonce para proteger el envío
wp_nonce_field(mi_tema_campos_comentario_nonce, mi_tema_campos_comentario_nonce_field)
// Campo teléfono (obligatorio)
echo ltp class=comment-form-phonegt
echo ltlabel for=phonegtTeléfono ltspan class=requiredgtlt/spangtlt/labelgt
echo ltinput id=phone name=phone type=text value= size=30 /gt
echo lt/pgt
// Campo valoración (opcional)
echo ltp class=comment-form-ratinggt
echo ltlabel for=ratinggtValoraciónlt/labelgt
echo ltselect id=rating name=ratinggt
echo ltoption value=gt--lt/optiongt
echo ltoption value=5gt5lt/optiongt
echo ltoption value=4gt4lt/optiongt
echo ltoption value=3gt3lt/optiongt
echo ltoption value=2gt2lt/optiongt
echo ltoption value=1gt1lt/optiongt
echo lt/selectgt
echo lt/pgt
}
?gt
Coloca este código en functions.php (tema hijo) o en tu plugin. Los ID y name del campo serán usados después para validar y guardar.
2) Validación en servidor (PHP)
La validación en servidor es obligatoria: no confíes en la validación JavaScript. Aquí usamos el filtro preprocess_comment para inspeccionar los datos antes de crear el comentario. Si detectamos un error, terminamos la petición con wp_die mostrando un mensaje claro.
lt?php
// Validar campos del comentario antes de insertarlo
add_filter(preprocess_comment, mi_tema_validar_comentario)
function mi_tema_validar_comentario(comment_data) {
// Verificar nonce
if ( ! isset(_POST[mi_tema_campos_comentario_nonce_field])
! wp_verify_nonce(_POST[mi_tema_campos_comentario_nonce_field], mi_tema_campos_comentario_nonce) ) {
wp_die(Error de seguridad: token no válido.)
}
// Teléfono obligatorio
if ( empty(_POST[phone]) ) {
wp_die(Por favor, introduce tu teléfono.)
}
// Sanitizar teléfono y validar formato básico (solo números, espacios, y -)
phone = sanitize_text_field(_POST[phone])
if ( ! preg_match(/^[0-9 -]{7,20}/, phone) ) {
wp_die(Formato de teléfono no válido.)
}
// Validar rating si viene: debe ser entero entre 1 y 5
if ( isset(_POST[rating]) _POST[rating] !== ) {
rating = intval(_POST[rating])
if ( rating < 1 rating > 5 ) {
wp_die(Valoración no válida.)
}
}
// Si todo OK, devolvemos comment_data para que WordPress inserte el comentario
return comment_data
}
?gt
Observaciones:
- Usamos wp_die para detener el proceso con un mensaje. Alternativamente podrías redirigir o devolver un WP_Error según tu flujo.
- sanitize_text_field limpia la entrada además aplicamos una expresión regular simple para teléfono. Ajusta la regex según tus necesidades.
3) Guardar los valores como meta de comentario
Después de que WordPress inserte el comentario, guardamos los campos personalizados con update_comment_meta en el hook comment_post.
lt?php
// Guardar meta de comentario al crearse
add_action(comment_post, mi_tema_guardar_meta_comentario, 10, 3)
function mi_tema_guardar_meta_comentario(comment_id, comment_approved, comment_data) {
if ( isset(_POST[phone]) ) {
phone = sanitize_text_field(_POST[phone])
update_comment_meta(comment_id, phone, phone)
}
if ( isset(_POST[rating]) _POST[rating] !== ) {
rating = intval(_POST[rating])
update_comment_meta(comment_id, rating, rating)
}
}
?gt
4) Mostrar los metadatos junto al comentario
Una forma simple es añadir los metadatos al final del texto del comentario usando el filtro comment_text. Alternativamente puedes modificar el callback de comentarios de tu tema para imprimir los datos donde prefieras.
lt?php
// Añadir teléfono y valoración al texto del comentario
add_filter(comment_text, mi_tema_mostrar_meta_comentario, 10, 2)
function mi_tema_mostrar_meta_comentario(comment_text, comment) {
phone = get_comment_meta(comment->comment_ID, phone, true)
rating = get_comment_meta(comment->comment_ID, rating, true)
if ( phone ) {
comment_text .= ltp class=comment-phonegtltbgtTeléfono:lt/bgt . esc_html(phone) . lt/pgt
}
if ( rating ) {
comment_text .= ltp class=comment-ratinggtltbgtValoración:lt/bgt . esc_html(rating) . / 5lt/pgt
}
return comment_text
}
?gt
5) Validación client-side (JavaScript) — opcional pero recomendable
La validación del lado del cliente mejora la experiencia del usuario evitando recargas innecesarias. Aún así, recuerda que siempre debe existir la validación en servidor (ya implementada arriba).
lt?php
// Encolar script de validación para comentarios
add_action(wp_enqueue_scripts, mi_tema_enqueue_comment_validation_script)
function mi_tema_enqueue_comment_validation_script() {
if ( is_singular() comments_open() ) {
wp_enqueue_script(
mi-tema-comment-validation,
get_stylesheet_directory_uri() . /js/comment-validation.js,
array(jquery),
1.0,
true
)
wp_localize_script(mi-tema-comment-validation, MiTemaMsg, array(
phoneRequired =gt Por favor, introduce tu teléfono.,
phoneInvalid =gt Formato de teléfono no válido.
))
}
}
?gt
// Archivo: js/comment-validation.js
document.addEventListener(DOMContentLoaded, function() {
var form = document.getElementById(commentform)
if (!form) return
form.addEventListener(submit, function(e) {
var phoneEl = form.querySelector(#phone)
if (phoneEl) {
var phone = phoneEl.value.trim()
if (phone === ) {
e.preventDefault()
alert(MiTemaMsg.phoneRequired)
phoneEl.focus()
return false
}
// Validación simple: números, espacios, y -
var re = /^[0-9 -]{7,20}/
if (!re.test(phone)) {
e.preventDefault()
alert(MiTemaMsg.phoneInvalid)
phoneEl.focus()
return false
}
}
})
})
6) Mostrar columnas personalizadas en el admin (lista de comentarios)
Si quieres ver rápidamente el teléfono o la valoración desde el panel de administración, añade columnas personalizadas en la lista de comentarios.
lt?php
// Añadir columna personalizada en la lista de comentarios del admin
add_filter(manage_edit-comments_columns, mi_tema_columnas_comentarios)
function mi_tema_columnas_comentarios(columns) {
columns[phone] = Teléfono
columns[rating] = Valoración
return columns
}
add_action(manage_comments_custom_column, mi_tema_columna_comentarios_contenido, 10, 2)
function mi_tema_columna_comentarios_contenido(column, comment_ID) {
if (column === phone) {
phone = get_comment_meta(comment_ID, phone, true)
echo esc_html(phone)
}
if (column === rating) {
rating = get_comment_meta(comment_ID, rating, true)
if (rating) {
echo esc_html(rating) . / 5
}
}
}
?gt
7) Buenas prácticas, seguridad y consejos
- Sanitizar siempre: usar sanitize_text_field, esc_html, intval, etc., según el tipo de dato.
- Validar siempre en servidor: la validación JavaScript puede mejorar la UX pero es fácilmente eludible.
- Usar nonce: evita envíos CSRF y asegura que el formulario proviene de tu sitio.
- No confiar en los nombres de los campos: verifica existencia y formato en el servidor antes de guardar.
- Almacenamiento: usa comment meta (update_comment_meta / get_comment_meta) para no tocar el contenido del comentario y facilitar búsquedas y consultas.
- Compatibilidad con otro plugin: ten en cuenta que otros plugins que modifiquen el proceso de comentarios pueden interferir documenta tus hooks y prioridades.
- Internacionalización: si vas a distribuir el código, usa funciones __() y _e() para las cadenas y prepara para localización.
Notas finales
Con lo anterior dispones de un sistema completo: campos añadidos al formulario, protección con nonce, validación en servidor, almacenamiento en meta y visualización en front y admin, además de una validación JavaScript opcional. Adapta nombres de campos, reglas de validación y la presentación según tus necesidades. Para proyectos más complejos considera implementar el conjunto como plugin reutilizable y con i18n.
|
|
Acepto donaciones de BAT's mediante el navegador Brave 🙂 |