Extra User Profile Field Télécharger un fichier/une image

Question

J'ai suivi le didacticiel suivant pour essayer un formulaire de téléchargement vers les profils d'utilisateurs. http://www.scribd.com/doc/81666407/Add-and-Remove-WordPress-User-Profile-Fields-and-Display-Them-Within-Your-Theme-

J'aimerais pouvoir simplifier un peu les choses et ne disposer que d'un bouton de téléchargement et d'une zone de texte permettant à l'utilisateur de télécharger un fichier à la fois plutôt que plusieurs.

J'allais utiliser Cimy Plugin, qui permet le téléchargement de fichiers, mais il ne semble pas possible d'ajouter de sous-titres pour certains champs.

Si l'un d'entre vous a des recommandations, ce serait génial.

Answer 1

PHP CODE

/*
* Load style & scripts
*/
function itclanbd_admin_load_scripts( $hook ) {
    $allowed = ['profile.php', 'user-new.php', 'user-edit.php'];
    if ( ! in_array( $hook, $allowed ) ) {
        return;
    }
    wp_enqueue_media();
    wp_enqueue_style('finance2sell', plugins_url('css/style.css', __FILE__), array(), null);
    wp_enqueue_script('finance2sell', plugins_url('js/scripts.js', __FILE__), array(), '1.3', true);
}
add_action( 'admin_enqueue_scripts', 'itclanbd_admin_load_scripts' );

/**
 * Create custom fields
 * @param $user
 */
function itclanbd_add_custom_user_profile_fields($user) {
    $itclanbd_attachment_id = (int)get_user_meta( (int)$user->ID, 'itclanbd_attachment_id', true );
    ?>
    <table class="form-table">
        <tbody>
            <tr>
                <th>
                    <label for="itclanbd-add-media"><?php _e('Avatar', 'finance2sell'); ?></label>
                </th>
                <td>
                    <input type="number" name="itclanbd_attachment_id" class="itclanbd-attachment-id" value="<?php echo $itclanbd_attachment_id; ?>" />
                    <div class="itclanbd-attachment-image">
                        <?php echo get_avatar($user->ID); ?>
                    </div>
                    <div class="wp-media-buttons">
                        <button class="button itclanbd-add-media" id="itclanbd-add-media"><?php _e('Select', 'finance2sell'); ?></button>
                        <button class="button itclanbd-remove-media"><?php _e('Remove', 'finance2sell'); ?></button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <?php
}
add_action( 'show_user_profile', 'itclanbd_add_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'itclanbd_add_custom_user_profile_fields' );
add_action( 'user_new_form', 'itclanbd_add_custom_user_profile_fields' );

/** 
 * Update custom fields
 * @param $user_id
 * @return bool
 */
function itclanbd_update_custom_user_profile_fields($user_id) {
    if( !current_user_can('edit_user', (int)$user_id) ) return false;

    delete_user_meta( (int)$user_id, 'itclanbd_attachment_id') ; //delete meta

    if( //validate POST data
        isset($_POST['itclanbd_attachment_id'])
        && is_numeric($_POST['itclanbd_attachment_id'])
        && $_POST['itclanbd_attachment_id'] > 0
    ) {
        add_user_meta( (int)$user_id, 'itclanbd_attachment_id', (int)$_POST['itclanbd_attachment_id'] ); //add user meta
    } else {
        return false;
    }

    return true;
}
add_action('user_register', 'itclanbd_update_custom_user_profile_fields');
add_action('profile_update', 'itclanbd_update_custom_user_profile_fields');


// Get custom field value
$attachment_id = get_user_meta( (int)$user_id, 'itclanbd_attachment_id', true );
$image = wp_get_attachment_image_src((int)$attachment_id, 'thumbnail');
echo $image[0]; // image url

JavaScript CODEi crée et place tout le code dans un nom de fichier scripts.js

function wpMediaEditor() {
    wp.media.editor.open();
    wp.media.editor.send.attachment = function(props, attachment) {
        jQuery('input.itclanbd-attachment-id').val(attachment.id);
        jQuery('div.itclanbd-attachment-image img').remove();
        jQuery('div.itclanbd-attachment-image').append(
            jQuery('<img>').attr({
                'src': attachment.sizes.thumbnail.url,
                'class': 'itclanbd-attachment-thumb',
                'alt': attachment.title
            })
        );
        jQuery('button.itclanbd-remove-media').fadeIn(250);
    };
}

function simpleUserAvatar() {
    var buttonAdd = jQuery('button.itclanbd-add-media');
    var buttonRemove = jQuery('button.itclanbd-remove-media');

    buttonAdd.on('click', function(event) {
        event.preventDefault();
        wpMediaEditor();
    });

    buttonRemove.on('click', function(event) {
        event.preventDefault();
        jQuery('input.itclanbd-attachment-id').val(0);
        jQuery('div.itclanbd-attachment-image img').remove();
        jQuery(this).fadeOut(250);
    });

    jQuery(document).on('click', 'div.itclanbd-attachment-image img', function() {
        wpMediaEditor();
    });

    if(
        jQuery('input.itclanbd-attachment-id').val() === 0
        || !jQuery('div.itclanbd-attachment-image img').length
    ) buttonRemove.css( 'display', 'none' );
}

jQuery(document).ready(function() {
    simpleUserAvatar();

    jQuery('table.form-table tr.user-profile-picture').remove();
});

CSS CODEi crée et place tout le code dans un nom de fichier style.css

@charset "UTF-8";

table.form-table tr.user-profile-picture,
input.itclanbd-attachment-id {
    display: none;
}

div.itclanbd-attachment-image img {
    background-color: white;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    cursor: pointer;
    height: auto;
    margin-bottom: 10px;
    padding: 3px;
    width: 96px;
}

button.button.itclanbd-remove-media:hover,
button.button.itclanbd-remove-media {
    background-color: #990000;
    border-color: #560303;
    box-shadow: 0 1px 0 #560303;
    color: white;
}

button.button.itclanbd-remove-media:hover {
    background-color: #b40000;
}

Cela devrait ressembler à: