2016-08-31 1 views

Antwort

2

Um das Profilfoto der Benutzer im Admin-Panel von WordPress zu ändern, ist die Verwendung des Plugins die beste und einfachste Option.

Individuelles Benutzerprofil Foto

In ein individuellen Benutzerprofil Foto an ein Wordpress-Benutzerprofil

https://wordpress.org/plugins/custom-user-profile-photo/

WP User Avatar

Verwenden jedes Bild von Ihren Wordpress Medien Bibliothek als benutzerdefinierter Benutzeravatar. Fügen Sie Ihren eigenen Standard-Avatar hinzu.

https://wordpress.org/plugins/wp-user-avatar/

+0

@Will Nicholls. Haben Sie Ihre Ausgabe wie in der Frage angegeben benötigt, indem Sie die Plugins wie vorgeschlagen verwenden. :) Wenn Sie ein Hindernis mit mir teilen, werde ich Ihnen helfen. –

1

verwendet standardmäßig Wordpress Gravatar für mit Gravatar registriert basierend auf Ihrer E-Mail-ID Benutzer-Profile Bild angezeigt wird. WordPress hat eine Benutzerprofilseite im Dashboard, die eine Anzahl von Feldern zum Eingeben von Benutzerdaten enthält, aber kein Bildfeld zum Hinzufügen eines benutzerdefinierten Benutzeravatars.

Wir können in folgenden Schritten Benutzer Avatar anpassen:

Schritt 1: Skript Seite hinzufügen.

In diesem Schritt werden wir den Admin-Seiten notwendiges Javascript hinzufügen. Zuerst rufen wir wp_enqueue_media auf, das alle Skripte, Stile, Einstellungen und Vorlagen in die Warteschlange stellt, die für die Verwendung aller Medien-JavaScript-APIs erforderlich sind.

Ein anderes Skript wird sein, um den Medien-Uploader beim Klicken auf die Schaltfläche zu öffnen und die Anhangs-ID in DOM einzufügen.

bitte folgende Skript in eine Datei und den Namen kopieren, die als uploader.js Datei

jQuery(document).ready(function() { 

    /* WP Media Uploader */ 
    var _shr_media = true; 
    var _orig_send_attachment = wp.media.editor.send.attachment; 

    jQuery('.shr-image').click(function() { 

     var button = jQuery(this), 
       textbox_id = jQuery(this).attr('data-id'), 
       image_id = jQuery(this).attr('data-src'), 
       _shr_media = true; 

     wp.media.editor.send.attachment = function(props, attachment) { 

      if (_shr_media && (attachment.type === 'image')) { 
       if (image_id.indexOf(",") !== -1) { 
        image_id = image_id.split(","); 
        $image_ids = ''; 
        jQuery.each(image_id, function(key, value) { 
         if ($image_ids) 
          $image_ids = $image_ids + ',#' + value; 
         else 
          $image_ids = '#' + value; 
        }); 

        var current_element = jQuery($image_ids); 
       } else { 
        var current_element = jQuery('#' + image_id); 
       } 

       jQuery('#' + textbox_id).val(attachment.id); 
           console.log(textbox_id) 
       current_element.attr('src', attachment.url).show(); 
      } else { 
       alert('Please select a valid image file'); 
       return false; 
      } 
     } 

     wp.media.editor.open(button); 
     return false; 
    }); 
}); 

Nun Noth Skripte in Admin wie folgt hinzufügen.

function shr_add_admin_scripts(){ 
     wp_enqueue_media(); 
     wp_enqueue_script('shr-uploader', get_stylesheet_directory_uri().'/js/uploader.js', array('jquery'), false, true); 
    } 
    add_action('admin_enqueue_scripts', 'shr_add_admin_scripts'); 

Bitte beachten Sie, dass uploader.js in js Ordnern in diesem Thema gespeichert, so dass Sie sich richtigen Pfad gelten die nach Lage der uploader.js in Ihrem Thema.

Schritt 2: Hinzufügen einer übergeordneten Schaltfläche zum Bearbeiten der Profilseite.

function shr_extra_profile_fields($user) { 

    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'shr_pic', true): false; 

    if(!empty($profile_pic)){ 
     $image = wp_get_attachment_image_src($profile_pic, 'thumbnail'); 

    } ?> 

    <table class="form-table fh-profile-upload-options"> 
     <tr> 
      <th> 
       <label for="image"><?php _e('Main Profile Image', 'shr') ?></label> 
      </th> 

      <td> 
       <input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" /> 
       <input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" /> 
       <img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo empty($profile_pic) ? 'display:none;' :'' ?> max-width: 100px; max-height: 100px;" /> 
      </td> 
     </tr> 
    </table><?php 

} 
add_action('show_user_profile', 'shr_extra_profile_fields'); 
add_action('edit_user_profile', 'shr_extra_profile_fields'); 
add_action('user_new_form', 'shr_extra_profile_fields'); 

In obigen Code, show_user_profile, edit_user_profile und user_new_form Haken verwendet Upload-Button hinzuzufügen, so dass Taste, um vorhandene Benutzer-Profilseite sowie bei der Erstellung neuer Benutzer sichtbar.

Eingabe-Schaltfläche ist WordPress Medien-Uploader auf klicken zu öffnen. Eingabe versteckten Feld ist die Anlage ID von Insersted oder ausgewählte Bild von Media Uploader von WordPress zu speichern.

Schritt 3: Speichern Sie die Bild-ID des Anhangs in UserMeta-Tabelle in WordPress.

Usermeta Tabelle in WordPress ist zusätzliche Informationen zum Benutzer zu speichern, hier werden wir Anlage ID des Bildes für den Benutzer speichern. Mit dieser Anhangs-ID können wir alle Daten des betreffenden Bildes abrufen.

Zum Speichern der Anhang-ID verwenden wir die Profil-Hooks profile_update und user_register, die ausgelöst werden, wenn ein neuer Benutzer erstellt oder ein bestehender Benutzer aktualisiert wird.

Das war es und Sie haben Profilbild-Uploader-Button erfolgreich zur Profilseite im Dashboard von WordPress hinzugefügt.

Referenz: http://sharethingz.com/wordpress/custom-user-avatar-in-wordpress/

Verwandte Themen