¿Cómo agregar una clase al botón de envío de comentarios?

10 jun 2011, 19:01:47
Vistas: 29K
Votos: 7

¿Cómo puedo agregar una clase al botón de envío de comentarios? La función simplificada comment_form(array('id_submit'=>'buttonPro')); obviamente solo cambia el id y class_submit parece no existir.

He leído las explicaciones tanto de Otto como de Beau pero sin éxito.

0
Todas las respuestas a la pregunta 7
1
16

A partir de la versión 4.1 de WordPress (ticket de trac #20446), ahora se puede pasar tu propia clase como argumento de comment_form($args) utilizando la clave del array 'class_submit':

$args = array( 'class_submit' => 'btn btn-default' );

No es necesario hacer trabajo adicional. (También editado el Codex) :)

28 feb 2015 16:07:47
Comentarios

Esta debería ser la respuesta correcta.

Christine Cooper Christine Cooper
11 abr 2015 22:00:01
3

Estoy trabajando con el framework Foundation. He encontrado que la forma más fácil de agregar una clase a un elemento no filtrable es hacerlo con jQuery.

jQuery(document).ready(function($) { //envoltorio noconflict
    $('input#submit').addClass('button');
});//fin noconflict
30 jul 2012 20:55:41
Comentarios

Nunca lo había pensado. Es un poco truculento, pero más limpio que modificar el núcleo. ¡Copiando tu código ahora mismo!

ageektrapped ageektrapped
1 nov 2012 21:28:12

Ya tengo un sitio que usa mucho jQuery. Así que agregar este fragmento de código fue realmente fácil y funcionó de maravilla.

Jamie Jamie
10 feb 2013 06:03:09

Solo una nota para futuros lectores, es muy posible que tu estilo se vea muy distorsionado en cada carga de página dependiendo del tiempo de carga del js, evitaría hacer este tipo de modificación de clases cuando sea posible

Cacoon Cacoon
30 may 2018 00:53:18
2

Si revisas el código fuente de la función comment_form(), verás que ni siquiera imprime una clase en el input;

<input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />

Supongo que necesitas agregar una clase para estilizar. ¿Por qué no modificas tu CSS simplemente con esto?

input.submit, #buttonPro {
    /* algún estilo genial */
}

De lo contrario, supongo que la solución "más fácil" sería copiar la función en tu functions.php, renombrarla, agregar un argumento de clase e imprimirlo, y usar eso en su lugar - lo cual puedes encontrar aquí ;)

10 jun 2011 19:14:34
Comentarios

Gracias por el consejo y el formulario de comentarios. :) Tengo una opción de tema que ayuda a dar estilo al tema según si es una interfaz clara u oscura. Si hubiera una función simple que pudiera agregar una clase, podría envolver esa función en una declaración del tipo if:isdark. Tendré que mirar más de cerca la función longform que proporcionaste.

MTT MTT
10 jun 2011 19:22:31

En mi Tema Oenology, genero CSS personalizado basado en si el esquema de color actual es oscuro o claro. Aquí está el \functions\options.php file que hace todo el trabajo pesado.

Chip Bennett Chip Bennett
10 jun 2011 19:43:18
9

¿Por qué necesitas una clase en el botón de enviar? Puedes asignarle un ID, como ya has descubierto, y eso es todo lo que necesitas para darle estilo.

comment_form(array('id_submit'=>'buttonPro'));

Luego, para darle estilo:

input#buttonPro {...}

Simple. O, si prefieres usar solo clases por algún motivo:

.form-submit input {...}

No veo ninguna ventaja, desde ningún ángulo, en poner una clase en el botón de enviar del formulario de comentarios.

10 jun 2011 19:37:05
Comentarios

Absolutamente. Si necesitas mayor especificidad, dirige tus selectores CSS más arriba en la jerarquía. Observa el ID o la clase del contenedor que alberga el formulario de respuesta a comentarios, o que contiene todo el marcado de comentarios. Además, solo debería haber un formulario de respuesta a comentarios en cualquier página dada, así que no veo el problema en dirigirse al ID del botón de enviar, pasado como argumento, para aplicar CSS.

Chip Bennett Chip Bennett
10 jun 2011 19:41:27

Con todo respeto, no estoy de acuerdo. Tengo un sitio web + blog. He definido una clase y la he usado para todos los botones. También tengo diferentes estados para los botones (normal, hover). Si no aplicara una clase al botón de comentario, eso significaría que tendría que dirigirme al botón de comentarios del blog por ID y comenzar a agregar el selector justo al lado de la clase ya definida (separada por comas). Eso significa que no puedo aprovechar la clase ya definida y esto no es preferible. Simplemente aplicar el nombre de clase al botón hace la vida mucho más fácil sin tener que agregar el ID manualmente y lo mantiene simple.

Devner Devner
16 nov 2012 21:19:15

Devner: Estás usando CSS exactamente al revés de como está diseñado para usarse. Los nombres de clase y los ID deben definirse semánticamente, no según cómo quieras que se vean estilizados. El objetivo principal es poder cambiar el CSS en lugar de cambiar el HTML, porque el HTML a menudo se genera automáticamente, mientras que el CSS es mucho más fácil de modificar.

Otto Otto
17 nov 2012 02:28:48

Algunos frameworks como Bootstrap proporcionan estilos de botones en la clase, por ejemplo .btn - aunque no es un gran problema, facilitaría las cosas si se pudiera agregar una clase.

henrywright henrywright
18 sept 2013 19:11:27

Sé que esto ya tiene varios años, pero me sorprende esta afirmación: "No veo ninguna ventaja, desde ningún ángulo, en poner una clase en el botón de enviar del formulario de comentarios". ¿Por qué agregar un ID adicional a la hoja de estilos cuando una clase existente (por ejemplo, para estilos de botón) puede proporcionar el estilo que necesitas?

Chris Ferdinandi Chris Ferdinandi
15 oct 2013 17:51:37

Chris: Porque el HTML debe ser semántico. Las hojas de estilo deben cambiarse para modificar el "aspecto" de las cosas, mientras que el HTML debe describir el contenido. Cambiar el HTML para lograr un cambio en el "aspecto" es precisamente lo que las hojas de estilo se crearon para evitar en primer lugar.

Otto Otto
16 oct 2013 15:35:13

Otto, sinceramente no puedo entender que tu punto de vista después de todos estos años parezca seguir siendo el mismo. ¿Qué hay de Bootstrap, Foundation y otros frameworks? Ellos usan <button> o una clase "button". Hay numerosos parches que simplemente agregan una clase, ¿cuál es el gran problema? ¿Por qué este tema parece estar retenido por unas pocas personas (tercas), claramente arruinándolo para el resto? ¿Qué sentido tiene que yo tenga que copiar todo el archivo que @TheDeadMedic tan amablemente ha puesto a disposición? ¡En lugar de eso, ustedes podrían resolver el problema agregando 2 líneas en el núcleo y listo! ¡Qué raro!

User User
5 jun 2014 16:33:38

@Otto no entiendo cómo estoy retrocediendo. Aparte de las razones que especifiqué anteriormente, no deseo usar IDs en ningún lugar de mi hoja de estilos ya que quiero evitar problemas de especificidad que puedan surgir por usarlos. Estoy intentando simplemente reutilizar las clases que ya he definido sin tener que hacer nada adicional. Sí, si agregar un atributo de clase me ayuda a no preocuparme por problemas de especificidad y mantener mi código consistente, opto por ellas. Las clases existen por una razón y estoy hablando a favor de esas razones. Además, no veo cómo agregar nombres de clase lo hará no semántico.

Devner Devner
23 sept 2014 16:06:50

Estás retrocediendo porque estás intentando modificar tu código HTML para lograr un cambio en la presentación. Alterar la presentación es trabajo de la hoja de estilos y debería ser lo que intentas cambiar aquí.

Otto Otto
23 sept 2014 19:38:15
Mostrar los 4 comentarios restantes
0

Estaba buscando la misma solución y al final la encontré, el siguiente código funcionó perfectamente para mí. Quería agregar la clase "btn btn-primary" al botón de enviar en el formulario de comentarios.

ob_start();
comment_form( $args );
$form = ob_get_clean(); 
$form = str_replace('class="comment-form"','class="comment-form"', $form);
echo str_replace('id="submit"','class="btn btn-primary"', $form);

Los argumentos $args que usé son

$args = array(
'comment_field' => '<p class="comment-form-comment"><label for="comment">Comentario</label> <textarea class="form-control" id="comment" name="comment" cols="35" rows="12" aria-required="true"></textarea></p>',
'fields'        => array(
    'author' => '<p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input class="form-control input-comment-author" id="author" name="author" type="text" value="" size="30" aria-required="true"></p>',
    'email'  => '<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input class="form-control input-comment-email" id="email" name="email" type="text" value="" size="30" aria-required="true"></p>',
    'url'    => '<p class="comment-form-url"><label for="url">Sitio web</label> <input class="form-control input-comment-url" id="url" name="url" type="text" value="" size="30"></p>',
),
'cancel_reply_link' => '<button class="btn btn-danger btn-xs">Cancelar respuesta</button>',
'label_submit' => 'Publicar comentario',);
17 dic 2013 12:31:35
0

Sugiero a aquellos que tengan este problema que establezcan un estilo para el ID "post-comment", como lo hice yo:

#post-comment {
background: none repeat scroll 0 0 transparent;
border: 1px solid #FFFFFF;
padding: 8px 20px;
float: left;}

¡Buena suerte! :)

8 jul 2012 12:47:13
3
-3

Voy a responder (tarde) porque estaba buscando una respuesta a esto y decidí solucionarlo yo mismo.

Primero, para responder a la pregunta "¿por qué añadir una clase?"... En mi caso, elegí usar un framework de UI llamado Foundation para diseñar mi tema más reciente para mi blog personal. Lo elegí precisamente porque me gusta su estilo para botones. Sin embargo, requiere que el desarrollador añada una clase a un botón <input>, ¡y no me di cuenta de que no se podía hacer en WP hasta que casi había terminado completamente el tema!

Así que, esto es lo que hice. Tuve que editar el archivo /wp-includes/comment-template.php, así que úsalo bajo tu propio riesgo porque podría borrarse durante una actualización de WP.


Después de la línea 1540 (en la versión 3.2.1) añade la siguiente línea:

'class_submit'         => 'submit',

Luego cambia la línea 1576 por lo siguiente:

<input name="submit" class="<?php echo esc_attr( $args['class_submit'] ); ?>" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />

Ahora tienes un nuevo valor por defecto llamado class_submit que puede incluirse en el parámetro de array $args de la función comment_form():

<?php comment_form(
        array(              
            'class_submit' => __('XXX'),
        )
    ); ?>

¡Feliz WordPress!

19 oct 2011 05:07:35
Comentarios

es una mala idea modificar el núcleo y en este sitio algunas personas se lo toman personal. Como eres nuevo aquí, voy a eliminar tu voto negativo que alguien dejó. Pero ahora ya lo sabes.

MTT MTT
19 oct 2011 14:50:20

Alex, Taylor tiene razón. ¡NUNCA modifiques archivos del núcleo! ¡NUNCA JAMÁS!

Devner Devner
16 nov 2012 21:23:16

Nunca, modifiques, archivos del núcleo.

Rantiev Rantiev
17 ago 2014 21:25:42