Ảnh hồ sơ người dùng WordPress

Ảnh hồ sơ người dùng là một plugin WordPress miễn phí và dễ sử dụng, cho phép bạn đặt ảnh hồ sơ tùy chỉnh cho người dùng bằng công cụ tải lên phương tiện WordPress tiêu chuẩn. Nó cũng đi kèm với một khối Gutenberg để hiển thị thông tin người dùng và ảnh hồ sơ ở giao diện người dùng

Tải xuống ảnh hồ sơ người dùng MIỄN PHÍ

Cài đặt plugin Ảnh hồ sơ người dùng

Chỉ cần truy cập bảng điều khiển WordPress của bạn, nhấp vào Plugin -> Thêm mới và tìm kiếm Ảnh hồ sơ người dùng. Nhấp vào cài đặt, sau đó kích hoạt

Ảnh hồ sơ người dùng WordPress

Sau đó truy cập hồ sơ của bạn hoặc bất kỳ hồ sơ người dùng nào của bạn và nhấp để chỉnh sửa, tải lên và lưu ảnh hồ sơ mới

Đặt hình ảnh hồ sơ mới

Để đặt hình ảnh hồ sơ mới, chỉ cần truy cập hồ sơ của bạn hoặc bất kỳ hồ sơ người dùng nào của bạn và tìm phần dành cho Hình ảnh hồ sơ

Ảnh hồ sơ người dùng WordPress

Nhấp vào hình ảnh và nó sẽ khởi chạy một phương thức nơi bạn có thể chọn một hình ảnh hồ sơ để đưa vào

Ghi chú. Người dùng phải có khả năng tải lên hình ảnh (thường là vai trò tác giả hoặc cao hơn) để đặt ảnh hồ sơ của họ. Bạn có thể sử dụng plugin Trình tạo hồ sơ và mô-đun Trình chỉnh sửa vai trò của nó để cho phép các vai trò khác (e. g. người đăng ký) khả năng tải lên hình ảnh

Đây là video dưới đây trình bày cách đặt ảnh hồ sơ

Xóa ảnh hồ sơ

Ảnh hồ sơ người dùng WordPress

Có hai cách để xóa ảnh hồ sơ

  • Nhấp vào biểu tượng Thùng rác trên hình ảnh để xóa nó
  • Click vào hình ảnh và chọn Remove Profile Image

Hiển thị hình ảnh hồ sơ

Sử dụng Chức năng Mẫu

Có chức năng mẫu tích hợp sẽ truy xuất và hiển thị ảnh hồ sơ. Nó chấp nhận các đối số giống như get_the_post_thumbnail. Đây là một ví dụ về nó được sử dụng

Đây là video bên dưới giới thiệu khối Gutenberg

Sử dụng Chức năng Mẫu Hộp Tác giả

Cái này dành cho người dùng nâng cao, nhưng bạn có thể bắt chước hộp tác giả Gutenberg bằng cách sử dụng hàm mẫu có tên là mt_author_box. Chi tiết và một ví dụ dưới đây

Mặc định hộp tác giả

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
$defaults = array(
    'theme'                           => 'regular', /* can be 'regular', 'compact', 'profile', or 'tabbed' */
    'profileAvatarShape'              => 'square', /* Can be 'square' or 'rounded' */
    'padding'                         => 10,
    'border'                          => 1,
    'borderRounded'                   => 5,
    'borderColor'                     => '#000000',
    'profileBackgroundColor'          => '#FFFFFF',
    'profileTextColor'                => '#000000',
    'showName'                        => true,
    'showTitle'                       => false,
    'fontSize'                        => 18,
    'profileName'                     => $user->data->display_name,
    'profileTitle'                    => '',
    'avatarSize'                      => 150,
    'profileImgURL'                   => get_avatar_url( $user_id, isset( $attributes['avatarSize'] ) ? $attributes['avatarSize'] : 150 ),
    'headerFontSize'                  => 24,
    'showDescription'                 => true,
    'showSocialMedia'                 => true,
    'profileContent'                  => get_user_meta( $user_id, 'description', true ),
    'profileFontSize'                 => 18,
    'showViewPosts'                   => true,
    'profileURL'                      => get_author_posts_url( $user_id ),
    'website'                         => '', /* Needs to be a URl */
    'showWebsite'                     => false,
    'showPostsWidth'                  => '100%', /* ignored if website is not empty and true */
    'profileViewPostsBackgroundColor' => '#cf6d38',
    'profileViewPostsTextColor'       => '#FFFFFF',
    'buttonFontSize'                  => 16,
    'profileWebsiteBackgroundColor'   => '#333333',
    'profileWebsiteTextColor'         => '#FFFFFF',
    'profileLinkColor'                => '#000000',
    'showSocialMedia'                 => false,
    'socialWordPress'                 => '',
    'socialFacebook'                  => '',
    'socialTwitter'                   => '',
    'socialInstagram'                 => '',
    'socialPinterest'                 => '',
    'socialLinkedIn'                  => '',
    'socialYouTube'                   => '',
    'socialGitHub'                    => '',
    'socialMediaOptions'              => 'brand', /* can be brand or custom */
    'socialMediaColors'               => '#000000', /* Only applicable if socialMediaOptions is custom */
    'profileCompactAlignment'         => 'center', /* Can be left, center, or right */
    /* Tabbed Attributes */
    'tabbedAuthorProfileTitle'        => '',
    'tabbedAuthorSubHeading'          => '',
    'tabbedAuthorProfile'             => __( 'Author', 'metronet-profile-picture' ),
    'tabbedAuthorLatestPosts'         => __( 'Latest Posts', 'metronet-profile-picture' ),
    'tabbedAuthorProfileHeading'      => __( 'Author Information', 'metronet-profile-picture' ),
    'profileLatestPostsOptionsValue'  => 'white', /* can be none, white, light, black, magenta, blue, green */
    'profileTabColor'                 => '#333333',
    'profileTabPostsColor'            => '#333333',
    'profileTabHeadlineColor'         => '#333333',
    'profileTabHeadlineTextColor'     => '#FFFFFF',
    'profileTabTextColor'             => '#FFFFFF',
    'profileTabPostsTextColor'        => '#FFFFFF',
 
);

Đây là một cách sử dụng ví dụ

1
2
3
4
5
6
7
8
9
10
mt_author_box( $post->post_author, array(
    'theme'              => 'tabbed',
    'profileAvatarShape' => 'round',
    'showWebsite'        => true,
    'website'            => 'https://www.ronalfy.com',
    'showSocialMedia'    => true,
    'socialMediaOptions' => 'brand',
    'socialWordPress'    => 'https://profiles.wordpress.org/ronalfy',
    'socialFacebook'     => 'https://facebook.com/mindefusement',
) );

Điểm cuối API REST

Có ba điểm cuối API REST để bạn sử dụng

Đặt ảnh đại diện cho chính mình

1
2
3
4
5
6
$request = new WP_REST_Request( 'POST', '/mpp/v2/profile-image/me' );
$request->set_param( 'media_id', 3754 ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
 
// Will return JSON of profile image sizes

Đặt ảnh hồ sơ cho người khác

1
2
3
4
5
$request = new WP_REST_Request( 'POST', '/mpp/v2/profile-image/change' );
$request->set_param( 'media_id', 1290 ); 
$request->set_param( 'user_id', 5 ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );

Lấy hình ảnh hồ sơ người dùng

1
2
3
4
5
$request = new WP_REST_Request( 'GET', '/wp/v2/users/15' );
$response = rest_do_request( $request );
$avatars = $response->data[ 'mpp_avatar' ];
 
// Will return JSON of profile image sizes

Những câu hỏi hoặc những bình luận?

Để lại nhận xét bên dưới hoặc giải quyết vấn đề trên GitHub của chúng tôi

Plugin được đề xuất

Trình tạo hồ sơ

Trình tạo hồ sơ là plugin quản lý và đăng ký người dùng tất cả trong một. Bạn có thể tạo các biểu mẫu hồ sơ và đăng ký mặt trước đẹp mắt với các trường tùy chỉnh cho người dùng của mình. Mô-đun trình chỉnh sửa vai trò cho phép bạn chỉnh sửa các khả năng và vai trò người dùng hiện có, cũng như tạo các vai trò tùy chỉnh. Bạn có thể tải về phiên bản miễn phí tại đây

Mạng xã hội cho ảnh hồ sơ người dùng

Plugin Mạng xã hội cho Ảnh hồ sơ người dùng cho phép người dùng thêm, chỉnh sửa và hiển thị các mạng xã hội của họ. Đó là một tiện ích bổ sung cho Ảnh hồ sơ người dùng

Đăng ký thành viên trả phí

Đăng ký thành viên trả phí giúp dễ dàng xây dựng một trang web thành viên. Bạn có thể tạo gói đăng ký, hạn chế nội dung và chấp nhận thanh toán từ người dùng của mình