it-swarm.com.de

Wie kann ich BuddyPress Extended Profile Fields ein Bildfeld hinzufügen?

Ich arbeite mit der erweiterten BuddyPress-Profilkomponente und möchte dem WordPress-Benutzerprofil Bildfelder hinzufügen. Gibt es Code, den ich zur functions.php meines Themas hinzufügen kann, damit die Option "Image" in das Plugin eingefügt wird?

Ich habe die BuddyPress- und WordPress-Codex-Foren durchsucht und bin nicht auf Code gestoßen, der den Betrieb des Plugins abfängt, ohne die Kerndateien zu bearbeiten.

2
KalenGi

Ich habe einen Weg gefunden, wie ich das Bildtypfeld hinzufügen kann, ohne die BuddyPress-Kerndateien zu bearbeiten. Die Lösung beinhaltet das Hinzufügen von Code zur Datei functions.php des Themas, der das Laden, Anzeigen und Speichern des Plugins abfängt. Außerdem wird der WordPress-Upload-Speicherort aktualisiert, um die Profilbilder in ein Unterverzeichnis des Upload-Verzeichnisses zu leiten. Die vollständige Lösung ist hier .

Schritt 1. Fügen Sie einen neuen Feldtyp hinzu:

function bpd_add_new_xprofile_field_type($field_types){
    $image_field_type = array('image');
    $field_types = array_merge($field_types, $image_field_type);
    return $field_types;
}

add_filter( 'xprofile_field_types', 'bpd_add_new_xprofile_field_type' );

Schritt 2. Behandeln Sie das Rendern des neuen Feldtyps im WordPress Admin-Bedienfeld

function bpd_admin_render_new_xprofile_field_type($field, $echo = true){

    ob_start();
        switch ( $field->type ) {
            case 'image':
                ?>
                    <input type="file" name="<?php bp_the_profile_field_input_name() ?>" id="<?php bp_the_profile_field_input_name() ?>" value="" />
                <?php
                break;
            default :
                ?>
                    <p>Field type unrecognized</p>
                <?php
        }

        $output = ob_get_contents();
    ob_end_clean();

    if($echo){
        echo $output;
        return;
    }
    else{
        return $output;
    }

}

add_filter( 'xprofile_admin_field', 'bpd_admin_render_new_xprofile_field_type' );

Schritt 3. Behandeln Sie das Rendern des neuen Feldtyps im WordPress-Frontend

function bpd_edit_render_new_xprofile_field($echo = true){

    if(empty ($echo)){
        $echo = true;
    }

    ob_start();
        if ( bp_get_the_profile_field_type() == 'image' ){
            $imageFieldInputName = bp_get_the_profile_field_input_name();
            $image = WP_CONTENT_URL . bp_get_the_profile_field_edit_value();

        ?>
                <label for="<?php bp_the_profile_field_input_name(); ?>"><?php bp_the_profile_field_name(); ?> <?php if ( bp_get_the_profile_field_is_required() ) : ?><?php _e( '(required)', 'buddypress' ); ?><?php endif; ?></label>
                <input type="file" name="<?php echo $imageFieldInputName; ?>" id="<?php echo $imageFieldInputName; ?>" value="" <?php if ( bp_get_the_profile_field_is_required() ) : ?>aria-required="true"<?php endif; ?>/>
                <img src="<?php echo $image; ?>" alt="<?php bp_the_profile_field_name(); ?>" />

        <?php

        } 

        $output = ob_get_contents();
    ob_end_clean();

    if($echo){
        echo $output;
        return;
    }
    else{
        return $output;
    }

}

add_action( 'bp_custom_profile_edit_fields', 'bpd_edit_render_new_xprofile_field' );

Schritt 4. Greifen Sie auf die in WordPress registrierten Hook-Funktionen zu, um den BuddyPress-Profilspeicher-Handler zu entfernen und einen neuen einzufügen. Dies ist erforderlich, um das Speichern des benutzerdefinierten Felds zu erledigen, bevor die Steuerung an BuddyPress zurückgegeben wird.

function bpd_override_xprofile_screen_edit_profile(){
    $screen_edit_profile_priority = has_filter('bp_screens', 'xprofile_screen_edit_profile');

    if($screen_edit_profile_priority !== false){
        //Remove the default profile_edit handler
        remove_action( 'bp_screens', 'xprofile_screen_edit_profile', $screen_edit_profile_priority );

        //Install replalcement hook
        add_action( 'bp_screens', 'bpd_screen_edit_profile', $screen_edit_profile_priority );
    }
}

add_action( 'bp_actions', 'bpd_override_xprofile_screen_edit_profile', 10 );

Schritt 5. Erstellen Sie die benutzerdefinierte Feldspeicherfunktion

function bpd_screen_edit_profile(){

    if ( isset( $_POST['field_ids'] ) ) {
        if(wp_verify_nonce( $_POST['_wpnonce'], 'bp_xprofile_edit' )){

            $posted_field_ids = explode( ',', $_POST['field_ids'] );

            $post_action_found = false;
            $post_action = '';
            if (isset($_POST['action'])){
                $post_action_found = true;
                $post_action = $_POST['action'];

            }

            foreach ( (array)$posted_field_ids as $field_id ) {
                $field_name = 'field_' . $field_id;

                if ( isset( $_FILES[$field_name] ) ) {
                    require_once( ABSPATH . '/wp-admin/includes/file.php' );
                    $uploaded_file = $_FILES[$field_name]['tmp_name'];

                    // Filter the upload location
                    add_filter( 'upload_dir', 'bpd_profile_upload_dir', 10, 1 );

                    //ensure WP accepts the upload job
                    $_POST['action'] = 'wp_handle_upload';

                    $uploaded_file = wp_handle_upload( $_FILES[$field_name] );

                    $uploaded_file = str_replace(WP_CONTENT_URL, '', $uploaded_file['url']) ;

                    $_POST[$field_name] = $uploaded_file;

                }
            }

            if($post_action_found){
                $_POST['action'] = $post_action;
            }
            else{
                unset($_POST['action']);
            }

        }
    }

    if(!defined('DOING_AJAX')){
        if(function_exists('xprofile_screen_edit_profile')){
            xprofile_screen_edit_profile();
        }
    }

}

Schritt 6. Überschreiben Sie den Speicherort des WordPress-Upload-Verzeichnisses, um einen benutzerdefinierten Speicherort für Bilder anzugeben

function bpd_profile_upload_dir( $upload_dir ) {
    global $bp;

    $user_id = $bp->displayed_user->id;
    $profile_subdir = '/profiles/' . $user_id;

    $upload_dir['path'] = $upload_dir['basedir'] . $profile_subdir;
    $upload_dir['url'] = $upload_dir['baseurl'] . $profile_subdir;
    $upload_dir['subdir'] = $profile_subdir;

    return $upload_dir;
}

Schritt 7. Erstellen Sie eine Javascript-Datei, die Code zum Aktualisieren der Dropdown-Liste für die Feldtypauswahl enthält, um den neuen Feldtyp einzufügen, wenn das Profil-Frontend angezeigt wird. Rufen wir die Datei xprofile-image.js auf und speichern sie am selben Ort wie die Datei functions.php des Themas

(

    function(jQ){
        //outerHTML method (http://stackoverflow.com/a/5259788/212076)
        jQ.fn.outerHTML = function() {
            $t = jQ(this);
            if( "outerHTML" in $t[0] ){
                return $t[0].outerHTML;
            }
            else
            {
                var content = $t.wrap('<div></div>').parent().html();
                $t.unwrap();
                return content;
            }
        }

        bpd =
        {

        init : function(){

                //add image field type on Add/Edit Xprofile field admin screen
               if(jQ("div#poststuff select#fieldtype").html() !== null){

                    if(jQ('div#poststuff select#fieldtype option[value="image"]').html() === null){
                        var imageOption = '<option value="image">Image</option>';
                        jQ("div#poststuff select#fieldtype").append(imageOption);

                        var selectedOption = jQ("div#poststuff select#fieldtype").find("option:selected");
                        if((selectedOption.length == 0) || (selectedOption.outerHTML().search(/selected/i) < 0)){
                            var action = jQ("div#poststuff").parent().attr("action");

                            if (action.search(/mode=edit_field/i) >= 0){
                                jQ('div#poststuff select#fieldtype option[value="image"]').attr("selected", "selected");
                            }
                        }
                    }

                }

            }
        };

        jQ(document).ready(function(){
                bpd.init();
        });

    }

)(jQuery);

Schritt 8. Laden Sie die js-Datei (xprofile-image.js)

function bpd_load_js() {
     wp_enqueue_script( 'bpd-js', get_bloginfo('stylesheet_directory') . '/xprofile-image.js',
                            array( 'jquery' ), '1.0' );
}

add_action( 'wp_print_scripts', 'bpd_load_js' );

Das ist es! Das WordPress-Benutzerprofil unterstützt jetzt zusätzliche Bildfelder über die erweiterte BuddyPress-Profilkomponente.

Dies wäre sehr hilfreich, wenn es in ein Plugin umgewandelt werden könnte.

UPDATE:Ich habe das Plugin erstellt und es ist auf der Seite WordPress Plugins verfügbar:

2
KalenGi