Hasta ahora solo me había tocado meter un número o un texto y lo hacía directamente con el add_filter user_contactmethods
//agregar campos al user , para guardar usuario de velneo
add_filter( 'user_contactmethods','agregar_campos_user' );
function agregar_campos_user( $arr ) {
$arr['nif'] = __( 'N.I.F: ', 'cyx_control_horario_internacionalizar' );
$arr['horas_jornada'] = __( 'Horas de Jornada: ', 'cyx_control_horario_internacionalizar' );
return $arr;
}
Pero me ha tocado meter un input type = radio
Leyendo otras webs, he hecho este código. Usando actions:
add_action( ‘show_user_profile’, ‘agregar_campos_seccion’ );
add_action( ‘edit_user_profile’, ‘agregar_campos_seccion’ );
y guardando los cambios con
add_action( ‘personal_options_update’, ‘grabar_campos_seccion’ );
add_action( ‘edit_user_profile_update’, ‘grabar_campos_seccion’ );
– https://decodecms.com/agregar-campos-adicionales-al-perfil-de-usuario/
– https://www.codifica.me/campos-perfil-usuario-adicionales-administracion-wordpress/
//Añadimos los campos en una nueva sección
add_action( 'show_user_profile', 'agregar_campos_seccion_OnSAT' );
add_action( 'edit_user_profile', 'agregar_campos_seccion_OnSAT' );
function agregar_campos_seccion_OnSAT( $user ) {
?>
<h3><?php _e( 'Datos OnSAT' ); ?></h3>
<table class="form-table">
<tr>
<th>
<label for="onsat_avatar"><?php _e( 'onsat_avatar' ); ?></label>
</th>
<td>
<?php $onsat_avatar = esc_attr( get_the_author_meta( 'onsat_avatar', $user->ID ) ); ?>
<label><input type="radio" name="onsat_avatar" id="onsat_avatar-r1" class="regular-text"
<?php if ($onsat_avatar === 'hombre' ) { ?>checked="checked"<?php }?>
value="hombre" />
<img src="/wp/wp-content/uploads/2022/06/hombre.png" width="60" alt="hombre" /><br /></label>
<label><input type="radio" name="onsat_avatar" id="onsat_avatar-r2" class="regular-text"
<?php if ($onsat_avatar === 'mujer' ) { ?>checked="checked"<?php }?>
value="mujer" />
<img src="/wp/wp-content/uploads/2022/06/mujer.png" width="60" alt="mujer" /><br /></label>
</td>
</tr>
</table>
<?php
}
//Guardamos los nuevos campos
add_action( 'personal_options_update', 'grabar_campos_seccion_OnSAT' );
add_action( 'edit_user_profile_update', 'grabar_campos_seccion_OnSAT' );
function grabar_campos_seccion_OnSAT( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) {
return false;
}
if( isset($_POST['onsat_avatar']) ) {
$onsat_avatar = $_POST['onsat_avatar'];
update_user_meta( $user_id, 'onsat_avatar', $onsat_avatar );
}
}
Y para mostrarlo en front-end
<div id = "seccion_usuarios_grid" >
<style>
.lista_radio_span{
min-width:100px;
border: 1px solid #aeaeae;
padding: 20px;
}
.lista_radio_label{
min-width: 250px;
padding-top: 50px;
}
sub {
font-size: 0.7rem;
}
</style>
<?php
foreach ($users as $usuario) {
$onsat_avatar = esc_attr( get_the_author_meta( 'onsat_avatar', $usuario->ID ) );
//echo "$onsat_avatar:" . $onsat_avatar;
echo '<span class="lista_radio_span"><label class="lista_radio_label">';
if ( $onsat_avatar === 'mujer' ) {
echo '<img src="/wp/wp-content/uploads/2022/06/mujer.png" width="60" alt="mujer" />';
}
elseif ( $onsat_avatar === 'hombre' ) {
echo '<img src="/wp/wp-content/uploads/2022/06/hombre.png" width="60" alt="hombre" />';
}
else {
echo '<img src="/wp/wp-content/uploads/2022/06/hombre.png" width="60" alt="hombre" />';
}
echo '<input class = "lista_radio" type="radio" name="usuarios_dropdown" value="' . esc_attr ( $usuario->ID ) . '" > ' . esc_attr ( $usuario->display_name ). '</label><sub>' . esc_attr ( $usuario->ID ).'</sub></span><br />';
}
?>
</div>
Me quedaría pendiente añadir algo de css. Tengo guardados estos enlaces para probar.
– https://codepen.io/imohkay/pen/Yzmqer
– https://www.antofernandez.com/personalizar-radio-buttons-css/
