web-dev-qa-db-ja.com

追加のユーザープロファイルフィールドアップロードファイル/画像

私は次のチュートリアルに従ってユーザーフォームへのアップロードフォームを試してみました。 http://www.scribd.com/doc/81666407/Add-and-Remove-WordPress-User-Profile-Fields-and-Display-Them-Within-Your-Theme-

私はこれをもう少し簡単にして、ユーザーが複数のファイルではなく一度に一つのファイルをアップロードすることを可能にするアップロードボタンとテキストボックスを持つことができるようにしたいです。

私はファイルのアップロードを許可するCimy Pluginを使用するつもりでしたが、いくつかのフィールドのために小見出しを追加することは可能ではないようです。

あなたのうちの誰かが素晴らしいであろう何か推薦を持っているならば。

themesusersprofilesuser-metacustomization
2
Storm3y

PHPコード

/*
* 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コードiすべてのコードを作成してファイル名に入れます 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コードiすべてのコードを作成してファイル名に配置する 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;
}

それは次のようになるはずです：

result for this whole code 

1
Razon K.