Cómo personalizar WordPress comment_form();

8 minutos de lectura

avatar de usuario
carpeta

Actualmente estoy desarrollando mi propio tema de WordPress y recientemente he estado trabajando en un tema personalizado comments_template();. He leído que usando el wp_list_comments(); El método es la mejor práctica para extraer y mostrar los comentarios por página/publicación. Personalicé con éxito la forma en que se extraen los comentarios a través de ese método y se muestran.

También he leído que usando el comment_form(); El método es la mejor práctica para mostrar el formulario de comentarios. Sin embargo, realmente estoy luchando para tratar de personalizar esto. Estoy un poco confundido entre el $argumentos, filtros y comportamiento.

Esencialmente, me gustaría cambiar drásticamente partes del formulario de comentarios. ¿Cómo podría cambiar partes del formulario de comentarios sin dejar de utilizar las mejores prácticas con el comment_form(); ¿método?

Todo lo que realmente necesito hacer es envolver varios de los existentes <p> etiquetas en <divs>. La lista de actualizaciones que estoy tratando de hacer está a continuación:

  1. ajustar el <h3> encabezado a <h2 class="comments-header">Tell us about you!</h2>
  2. Envolver campos de formulario en <fieldset></fieldset>
  3. Envolver <label> en <div class="label"></div>
  4. Envolver <input> en <div class="field"></div>
  5. Hacer <p class="form-allowed-tags"></p> monitor antes de el comentario <textarea> en lugar de después
  6. Cambiar formulario Enviar botón para usar el <button> elemento en lugar de <input>

Por favor, consulte el código de abajo para una explicación más detallada…

formulario_comentario predeterminado(); código que se emite:

<div id="respond">
    <h3 id="reply-title">Leave a Reply</h3>
    <form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform">
        <p class="comment-notes">
            Your email address will not be published. Required fields are marked
            <span class="required">*</span>
        </p>
        <p class="comment-form-author">
            <label for="author">Name</label>
            <span class="required">*</span>
            <input id="author" name="author" type="text" value="John Doe" size="30" aria-required="true">
        </p>
        <p class="comment-form-email">
            <label for="email">Email</label>
            <span class="required">*</span>
            <input id="email" name="email" type="text" value="[email protected]" size="30" aria-required="true">
        </p>
        <p class="comment-form-url">
            <label for="url">Website</label>
            <input id="url" name="url" type="text" value size="30">
        </p>
        <p class="comment-form-comment">
            <label for="comment">Comment</label>
            <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
        </p>
        <p class="form-allowed-tags">
            You may use these HTML tags and attributes...
        </p>
        <p class="form-submit">
            <input name="submit" type="submit" id="submit" value="Post Comment">
            <input type="hidden" name="comment_post_ID" value="22" id="comment_post_ID">
            <input type="hidden" name="comment_parent" id="comment_parent" value="0">
        </p>
    </form>
</div> <!-- #respond -->

Código que estoy tratando de generar:

<div id="respond">
    <h2 class="comments-header">Tell us about you!</h2>
    <form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform">
        <fieldset>
            <div class="label"><label for="author">Name <span class="required">*</span></label></div>
            <div class="field"><input id="author" name="author" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div>
        </fieldset>
        <fieldset>
            <div class="label"><label for="email">E&ndash;mail (will not be published) <span class="required">*</span></label></div>
            <div class="field"><input id="email" name="email" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div>
        </fieldset>

        <p class="form-allowed-tags">
            You may use these HTML tags and attributes...
        </p>

        <fieldset>
            <div class="field"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></div>
        </fieldset>

        <p class="form-submit">
            <button class="story-submit-btn" type="submit" name="submit" id="sub">Post your story</button>
            <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" id="comment_post_ID">
            <input type="hidden" name="comment_parent" id="comment_parent" value="0">
        </p>
    </form>
</div> <!-- #respond -->

¡Cualquier ayuda es muy apreciada!

  • Los más grandes que absolutamente necesito modificar son los números 1, 2, 5 y 6 en mi lista anterior. Los otros creo que podría apuntar correctamente a través de CSS. Sin embargo, necesito cambiar el texto del encabezado, envolver mis campos en <fieldsets>cambie el orden en que las etiquetas HTML <p> se muestra en y cambiar el <input> a un <button>.

    – carpeta de kaffles

    4 de julio de 2012 a las 18:18

avatar de usuario
krishna cantar

Ejemplo simple de cómo cambiar algunos campos del formulario de comentarios.

$comments_args = array(
        // change the title of send button 
        'label_submit'=>'Send',
        // change the title of the reply section
        'title_reply'=>'Write a Reply or Comment',
        // remove "Text or HTML to be displayed after the set of comment fields"
        'comment_notes_after' => '',
        // redefine your own textarea (the comment body)
        'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);

comment_form($comments_args);

Para más información: documentación comment_form() en WordPress Codex

Si todo lo demás falla, en comments.php en su directorio de temas, cambie comment_form($args); a

ob_start();
comment_form($args);
$comment_form = ob_get_clean();
//insert code to modify $comment_form
echo $comment_form;

Usé esto para cambiar el botón de enviar a un botón de imagen.

yo suelo functions.php para modificar la visualización de comentarios. No sé si es así como se hacen las cosas ahora (el último sitio que estaba desarrollando con WP y necesitaba comentarios fue en 2009 ;)), pero aquí está (colocarlo en functions.php ¡expediente!:

function THEMENAME_comment($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  *your comment display code*
}

Recuerde crear también un tema de pingback. Lo haces de forma similar a los comentarios, la única diferencia es la primera línea:

función THEMENAME_pings($comentario, $argumentos, $profundidad)

Otra forma puede estar usando comentarios_plantilla.

avatar de usuario
krishna cantar

En Single.php después del contenido de la publicación

Úselo para formularios de comentarios personalizados html y diseño

    <?php $comments_args = array(
        // change the title of send button 
        'label_submit'=>'Submit',
        // change the title of the reply section
        'title_reply'=>'Add a comment',
        // remove "Text or HTML to be displayed after the set of comment fields"
        'comment_form_top' => 'ds',
        'comment_notes_before' => '',
        'comment_notes_after' => '',
        // redefine your own textarea (the comment body)
        'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" placeholder="Your Comment* " aria-required="true"></textarea></p>',
        'fields' => apply_filters( 'comment_form_default_fields', array(

    'author' =>
      '<p class="comment-form-author">'  .
      '<input id="author" class="blog-form-input" placeholder="Your Name* " name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>',

    'email' =>
      '<p class="comment-form-email">'.
      '<input id="email" class="blog-form-input" placeholder="Your Email Address* " name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>',

    'url' =>
      '<p class="comment-form-url">'.
      '<input id="url" class="blog-form-input" placeholder="Your Website URL" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>'
    )
  ),
);

comment_form($comments_args);?>

¿Revisaste el códice? http://codex.wordpress.org/Function_Reference/comment_form

No es fácil de personalizar pero es factible

avatar de usuario
Harry

function THEMENAME_comment($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  *your comment display code*
}

avatar de usuario
nikksan

Mi tema usaba la función predeterminada comment_form, así que hice un cambio en el tema secundario.

    if(function_exists('glutton_comment_form'))
        glutton_comment_form(); //custom function for displaying comments, defined in glutton-child/functions.php
    else
        comment_form();

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad