✅ Agregar Campos Personalizados al Perfil de Usuario (Sin Plugins) | WordPress

La personalización de perfiles de usuario en WordPress va más allá de los campos estándar proporcionados por defecto. A veces, necesitas recopilar información específica para tu sitio.

En este artículo, exploraremos cómo agregar campos personalizados al perfil de usuario sin depender de plugins adicionales.

Existen varios tipos de campos que puedes añadir, como campos de texto, editores enriquecidos, opciones de radio, selectores y casillas de verificación. Vamos a analizar un código práctico que te permitirá implementar estas funciones de manera eficiente.

Los siguientes códigos tienes que agregarlos en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

Código de Campos Personalizados

Agregar Campos al Perfil de Usuario

// Agregar campos personalizados al perfil de usuario
function agregar_campos_personalizados_usuario($user) {
    ?>
    <h3>Campos Personalizados</h3>

    <table class="form-table">
        <!-- Campo de Texto -->
        <tr>
            <th><label for="campo_texto">Campo de Texto</label></th>
            <td>
                <input type="text" name="campo_texto" id="campo_texto" value="<?php echo esc_attr(get_user_meta($user->ID, 'campo_texto', true)); ?>" class="regular-text" />
            </td>
        </tr>

        <!-- Editor Enriquecido -->
        <tr>
            <th><label for="campo_editor">Editor Enriquecido</label></th>
            <td>
                <?php
                $campo_editor_valor = get_user_meta($user->ID, 'campo_editor', true);
                wp_editor($campo_editor_valor, 'campo_editor', array('textarea_name' => 'campo_editor'));
                ?>
            </td>
        </tr>

        <!-- Opciones de Radio -->
        <tr>
            <th><label for="campo_radio">Opciones de Radio</label></th>
            <td>
                <fieldset>
                    <label><input type="radio" name="campo_radio" value="opcion1" <?php checked('opcion1', get_user_meta($user->ID, 'campo_radio', true)); ?>> Opción 1</label><br>
                    <label><input type="radio" name="campo_radio" value="opcion2" <?php checked('opcion2', get_user_meta($user->ID, 'campo_radio', true)); ?>> Opción 2</label><br>
                </fieldset>
            </td>
        </tr>

        <!-- Selector -->
        <tr>
            <th><label for="campo_select">Selecciona</label></th>
            <td>
                <select name="campo_select">
                    <option value="opcion1" <?php selected('opcion1', get_user_meta($user->ID, 'campo_select', true)); ?>>Opción 1</option>
                    <option value="opcion2" <?php selected('opcion2', get_user_meta($user->ID, 'campo_select', true)); ?>>Opción 2</option>
                </select>
            </td>
        </tr>

        <!-- Casilla de Verificación -->
        <tr>
            <th><label for="campo_checkbox">Casilla de Verificación</label></th>
            <td>
                <label><input type="checkbox" name="campo_checkbox" value="1" <?php checked('1', get_user_meta($user->ID, 'campo_checkbox', true)); ?>> Marcar</label>
            </td>
        </tr>
    </table>
    <?php
}
Lenguaje del código: JavaScript (javascript)

Explicación:

• Este código crea una función (agregar_campos_personalizados_usuario) que imprime los campos personalizados en la página de edición de perfiles del usuario.
• Se utiliza una tabla (<table>) para organizar los diferentes tipos de campos.
• Para cada tipo de campo, se proporciona una etiqueta (<label>), y se utiliza PHP para mostrar o seleccionar el valor guardado previamente en la base de datos de usuario.

Guardar Valores de Campos Personalizados

// Guardar valores de campos personalizados del perfil de usuario
function guardar_campos_personalizados_usuario($user_id) {
    // Actualizar valor del Campo de Texto
    if (isset($_POST['campo_texto'])) {
        update_user_meta($user_id, 'campo_texto', sanitize_text_field($_POST['campo_texto']));
    }

    // Actualizar valor del Editor Enriquecido
    if (isset($_POST['campo_editor'])) {
        update_user_meta($user_id, 'campo_editor', wp_kses_post($_POST['campo_editor']));
    }

    // Actualizar valor del Campo de Radio
    if (isset($_POST['campo_radio'])) {
        update_user_meta($user_id, 'campo_radio', sanitize_text_field($_POST['campo_radio']));
    }

    // Actualizar valor del Campo de Select
    if (isset($_POST['campo_select'])) {
        update_user_meta($user_id, 'campo_select', sanitize_text_field($_POST['campo_select']));
    }

    // Actualizar valor de la Casilla de Verificación
    $checkbox_valor = isset($_POST['campo_checkbox']) ? '1' : '0';
    update_user_meta($user_id, 'campo_checkbox', $checkbox_valor);
}

// Acciones
add_action('show_user_profile', 'agregar_campos_personalizados_usuario');
add_action('edit_user_profile', 'agregar_campos_personalizados_usuario');
add_action('personal_options_update', 'guardar_campos_personalizados_usuario');
add_action('edit_user_profile_update', 'guardar_campos_personalizados_usuario');
Lenguaje del código: PHP (php)

Explicación:

• La función guardar_campos_personalizados_usuario se encarga de actualizar los valores de los campos personalizados cuando se guarda el perfil de usuario.
• Se utiliza update_user_meta para almacenar o actualizar los valores en la base de datos de usuario.
• Los valores se filtran y se procesan para garantizar la seguridad y la integridad de los datos. Por ejemplo, sanitize_text_field se utiliza para campos de texto, y wp_kses_post se usa para el editor enriquecido.

Conclusión

Personalizar el perfil de usuario sin depender de plugins te ofrece un control total sobre la información que recopilas. Este código proporciona una base sólida para agregar y gestionar campos personalizados, desde simples campos de texto hasta opciones más avanzadas como editores enriquecidos y selectores. ¡Experimenta con estos campos personalizados y adapta tu sitio web de WordPress según tus necesidades específicas!

Nos vemos en el siguiente tutorial.

Un saludo