Personalización de comentarios en WordPress - Funcionalidad y apariencia

En WordPress hay diferentes tipos de contenido, como publicaciones, páginas y comentarios, etc. Estos forman los conceptos básicos de WordPress. WordPress es una plataforma altamente personalizable que le permite personalizar los tipos muy básicos en gran medida para adaptarse a su sitio. Uno puede cambiar el aspecto, así como la funcionalidad de los tipos básicos para hacer que se comporten y se vean según el aspecto y la funcionalidad de su sitio. En este artículo vamos a ver cómo podemos cambiar el comportamiento y la apariencia de los comentarios en nuestro sitio de WordPress.


Paso 1 Entendiendo el comment_form Función y sus argumentos

Echemos un vistazo a la función de WordPress comment_form. Este es el responsable de mostrar el formulario de comentarios que se muestra principalmente en una sola página o publicación en WordPress. Una llamada a esta función se verá principalmente en el comentarios.php archivo de su carpeta de temas. Entonces este archivo se incluiría en varios lugares como single.php, page.php, directamente o llamando al comentarios_template función.

Puedes encontrar más detalles sobre comentarios_template en el codex de WordPress.

Si usamos el comment_form Para mostrar el formulario, el formulario se mostrará utilizando los parámetros predeterminados, que serán campos como el nombre, el correo electrónico (ambos son obligatorios), el sitio web y el contenido del comentario. En el tema predeterminado de Twenty Eleven, el formulario se verá como sigue.

Algunos de los argumentos importantes al comment_form función son:

  • campos - Por lo que realmente puede controlar qué campos se muestran en el formulario de comentarios.
  • comment_notes_before y comment_notes_after - Se utilizan para mostrar alguna nota antes o después del formulario de comentarios..
  • Title_reply - Usando esto, puede cambiar el título de la respuesta, que de forma predeterminada es 'Dejar una respuesta'.
  • label_submit - Esto se puede usar para cambiar el texto sobre el botón enviar del comentario.

Paso 2 Personalizando su formulario de comentarios usando la función comment_form

Ahora vamos a personalizar nuestro formulario de comentarios pasando diferentes argumentos a comment_form.

En caso de que queramos personalizar los campos del formulario de comentarios, podemos pasar los campos a la comment_form función. Los campos por defecto en el comment_form Las funciones son las siguientes:

 $ fields = array ('author' => '

'. ' '. ($ req? '*': ").'

',' email '=>'

'. ($ req? '*': ").'

',' url '=>'

'. '

',);

Entonces, en caso de que queramos eliminar el campo del sitio web, entonces necesitamos crear los campos sin el campo del sitio web de la siguiente manera y pasarlo a comment_form.

 $ commenter = wp_get_current_commenter (); $ req = get_option ('require_name_email'); $ aria_req = ($ req? "aria-required =" true "": "); $ fields = array ('author' => '

'. ' '. ($ req? '*': ").'

',' email '=>'

'. ($ req? '*': ").'

',); $ comments_args = array ('fields' => $ fields); comment_form ($ comments_args);

Ahora, si vamos y vemos el formulario de comentarios, aparecerá como sigue:

Además de esto, ahora cambiemos el título de la respuesta a 'Por favor dénos su valioso comentario' y también cambiemos el título del botón de publicación de comentario a 'Enviar mi comentario'.

A continuación se presentan los argumentos a los que pasaremos. comment_form lograr esto:

 $ commenter = wp_get_current_commenter (); $ req = get_option ('require_name_email'); $ aria_req = ($ req? "aria-required =" true "": "); $ fields = array ('author' => '

'. ' '. ($ req? '*': ").'

',' email '=>'

'. ($ req? '*': ").'

',); $ comments_args = array ('fields' => $ fields, 'title_reply' => 'Por favor, denos su valioso comentario', 'label_submit' => 'Enviar mi comentario'); comment_form ($ comments_args);

Ahora si vemos el formulario de comentarios se verá como sigue:


Paso 3 Eliminar campos del comentario para usar ganchos

El formulario de comentarios de WordPress se puede personalizar también utilizando ganchos y filtros. La personalización mediante ganchos / filtros es muy útil, especialmente cuando se personaliza a través de un complemento y no se pueden modificar los archivos de temas. El filtro para agregar o eliminar campos del formulario de comentarios es 'comment_form_default_fields'

Ahora eliminemos el campo de URL usando este filtro. El código para hacer esto puede ponerlo en su archivo de complemento si está personalizando a través del complemento o en el funciones.php archivo de su tema.

El código es el siguiente:

 función remove_comment_fields ($ fields) unset ($ fields ['url']); devuelve $ campos;  add_filter ('comment_form_default_fields', 'remove_comment_fields');

En esto sumamos la función. remove_comment_fields sobre el 'comment_form_default_fields'filtrar y luego desarmar la url campo para eliminar el campo del sitio web.


Paso 4 Agregando más datos a tus comentarios usando ganchos

Incluso podemos agregar campos al comentario para usar el 'comment_form_default_fields'filtro. Ahora agreguemos el campo de edad del autor de un comentario usando este filtro y luego almacenemos este campo como un meta de comentario y lo mostramos en el comentario.

Podemos añadir un campo de la siguiente manera:

 función add_comment_fields ($ fields) $ fields ['age'] = '

'. '

'; devuelve $ campos; add_filter ('comment_form_default_fields', 'add_comment_fields');

Una vez que agreguemos el campo según el tema, es posible que deseamos personalizarlo. Mientras uso el tema Twenty Eleven, lo estilo agregando # responder etiqueta de .comment-form-age con las otras etiquetas de estilo como # responder .comment-form-url label etc. de la siguiente manera:

 #responda a la etiqueta .comment-form-author, #etiqueta corresponda a .comment-form-email, #etiqueta com. .comment-form-url, etiqueta #respond. com-.com-form-age, #etiqueta com-respond .comment-form-comment fondo: #eee; -webkit-box-shadow: 1px 2px 2px rgba (204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba (204,204,204,0.8); caja de sombra: 1px 2px 2px rgba (204,204,204,0.8); color: # 555; pantalla: bloque en línea; tamaño de fuente: 13px; izquierda: 4px; ancho mínimo: 60px; relleno: 4px 10px; posición: relativa; superior: 40px; índice z: 1; 

Ahora, si vemos el formulario de comentarios, el campo de edad se verá de la siguiente manera:

Ahora que la edad está almacenada como el meta de comentario, debemos enganchar en 'comment_post'y guarda la edad como meta de comentario de la siguiente manera:

 función add_comment_meta_values ​​($ comment_id) if (isset ($ _ POST ['age'])) $ age = wp_filter_nohtml_kses ($ _ POST ['age']); add_comment_meta ($ comment_id, 'age', $ age, false);  add_action ('comment_post', 'add_comment_meta_values', 1);

Una vez que se guarda el meta, se puede mostrar en el comentario de la siguiente manera:

 comment_ID, 'age', true); ?>

Paso 5 Personalizando Comentarios para Algunos Tipos de Publicaciones Específicas

A veces puede ser útil tener algunos campos de comentarios solo para tipos de publicación específicos. Ahora, hagamos cambios en el código para mostrar el campo de comentario de antigüedad solo si es un tipo de publicación personalizada, como, por ejemplo, reservar.

El código para tener la edad solo para libros tipo de publicación personalizada es:

 función add_comment_fields ($ fields) if (is_singular ('books')) $ fields ['age'] = '

'. '

'; devolver $ fields; add_filter ('comment_form_default_fields', 'add_comment_fields');

Así que aquí agrega el campo solo si es de tipo 'Libros'.


Paso 6 Creando una devolución de llamada para mostrar comentarios

La función wp_list_comments Se utiliza para mostrar los comentarios en una publicación. Puedes leer sobre wp_list_comments en el codex de WordPress.

wp_list_comments tiene un argumento de 'llamar de vuelta'en el que puede especificar la función que se devolverá para mostrar el comentario.

En el tema de Twenty Eleven en comentarios.php Verás una línea:

 wp_list_comments (array ('callback' => 'twentyeleven_comment'));

Esto lo cambiaremos a:

 wp_list_comments (array ('callback' => 'my_comments_callback'));

Entonces la función my_comments_callback será llamado para cada post.


Paso 7 Styling tus comentarios

Ahora vamos a estilizar nuestro post un poco diferente. Solo queremos mostrar el contenido de la publicación y el campo de edad que hemos agregado específicamente. Cambiamos también el color de fondo de los comentarios..

El código para la función 'my_comments_callback' es como sigue:

 function my_comments_callback ($ comment, $ args, $ depth) $ GLOBALS ['comment'] = $ comment; ?> 
  • >

    comment_ID, 'age', true); ?>

    __ ('Responder ',' twentyeleven '),' depth '=> $ depth,' max_depth '=> $ args [' max_depth ']))); ?>
  • También modificamos el color de fondo de la siguiente manera:

     .lista de comentarios> li.comment background: # 99ccff; frontera: 3px sólido #ddd; -moz-border-radius: 3px; radio del borde: 3px; margen: 0 0 1.625em; relleno: 1.625em; posición: relativa; 

    Ahora si vemos los comentarios se verán como sigue:


    Conclusión

    Los comentarios juegan un papel importante ya que uno está construyendo un sitio comunitario. Dependiendo del sitio, la funcionalidad de los comentarios también se puede personalizar adecuadamente. WordPress proporciona un sistema de comentarios flexible y proporciona un buen soporte a través de funciones para cambiar el comportamiento y la apariencia de los comentarios de su sitio. Así que diviértete personalizando tu sitio de WordPress!

    Háganos saber en los comentarios a continuación si tiene alguna otra sugerencia sobre cómo personalizar los comentarios en su sitio de WordPress.