wake-up-neo.net

Zusätzliches Benutzerprofilfeld Datei/Bild hochladen

Ich habe das folgende Tutorial befolgt, um zu versuchen, ein Upload-Formular für die Benutzerprofile zu erstellen. http://www.scribd.com/doc/81666407/Add-and-Remove-WordPress-User-Profile-Fields-and-Display-Them-Within-Your-Theme-

Ich möchte dies ein wenig einfacher machen und nur eine Upload-Schaltfläche und ein Textfeld haben, mit denen der Benutzer eine Datei anstatt mehrerer Dateien gleichzeitig hochladen kann.

Ich wollte das Cimy-Plugin verwenden, das das Hochladen von Dateien ermöglicht, es scheint jedoch nicht möglich zu sein, Unterüberschriften für einige Felder hinzuzufügen.

Wenn jemand von euch irgendwelche Empfehlungen hat, wäre das genial.

themesusersprofilesuser-metacustomization
2
Storm3y

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 CODE Ich erstelle und platziere den gesamten Code in einem Dateinamen 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 CODE Ich erstelle und platziere den gesamten Code in einem Dateinamen 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;
}

Es sollte so aussehen:

 result for this whole code 

1
Razon K.