Cách hiển thị danh sách tác giả với ảnh đại diện trong trang cộng tác viên WordPress 0 (0)

Trong khi làm việc trên trang web của khách hàng, chúng tôi nhận ra rằng chức năng tích hợp để liệt kê các tác giả là không đủ. Chúng tôi đã chỉ cho bạn cách hiển thị tất cả các tác giả từ trang web của bạn , nhưng phương pháp đó chỉ tốt nếu bạn muốn một danh sách đơn giản hiển thị trong thanh bên của mình. Nếu bạn muốn tạo một trang đóng góp hữu ích và phong phú hơn về nội dung, thì chức năng đó là vô dụng.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo trang cộng tác viên, trang này sẽ hiển thị danh sách các tác giả có ảnh đại diện hoặc ảnh người dùng và bất kỳ thông tin nào khác mà bạn thích. Hướng dẫn này là một hướng dẫn trình độ trung cấp .

Điều đầu tiên bạn cần làm là tạo một trang tùy chỉnh bằng cách sử dụng mẫu này.

Sau đó, bạn sẽ cần mở tệp functions.php trong thư mục chủ đề của mình và thêm mã sau:

function contributors() {
 global $wpdb;
 
 $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");
 
 foreach($authors as $author) {
 echo "

“;
echo “ID;
echo “”>”;
echo get_avatar($author->ID);
echo ““;
echo ‘
‘;
echo “ID;
echo “”>”;
the_author_meta(‘display_name’, $author->ID);
echo ““;
echo “

“;
echo “

“;
}
}

Bằng cách thêm chức năng này, bạn đang yêu cầu WordPress tạo một chức năng sẽ hiển thị tên tác giả và hình đại diện của tác giả. Bạn có thể thay đổi hình đại diện thành cài đặt plugin userphoto bằng cách chỉ cần thay đổi dòng sau:

echo get_avatar($author->ID);

và thay thế nó bằng:

echo userphoto($author->ID);

Bạn có thể thêm nhiều tính năng hơn vào chức năng này như hiển thị URL tác giả và thông tin khác từ hồ sơ bằng cách làm theo cấu trúc được sử dụng.

Bạn cũng cần thêm các dòng sau vào tệp CSS của mình:

#authorlist li {
 clear: left;
 float: left;
 margin: 0 0 5px 0;
 }
 
 #authorlist img.photo {
 width: 40px;
 height: 40px;
 float: left;
 }
 
 #authorlist div.authname {
 margin: 20px 0 0 10px;
 float: left;
 }
 

Khi bạn đã hoàn tất việc thêm chức năng, bây giờ bạn cần gọi nó trong mẫu trang của mình. Mở tệp Contributor.php hoặc bất kỳ tên nào bạn đặt tên tệp. Làm theo cùng một mẫu trang như page.php của bạn và trong vòng lặp, chỉ cần thêm chức năng này thay vì hiển thị nội dung:

Điều này sẽ cung cấp cho bạn một trang cộng tác viên giàu nội dung hơn. Thủ thuật này là tuyệt vời cho các blog nhiều tác giả.
 
Bây giờ đây là một ví dụ về cách chúng tôi sử dụng nó:
 
 
Nếu bạn muốn có trang cộng tác viên với thông tin được hiển thị trong ví dụ trên, bạn sẽ cần thực hiện một vài thay đổi đối với chức năng ban đầu. Chúng tôi có một mã ví dụ sẽ giúp bạn có được chính xác mọi thứ được hiển thị trong hình trên.
 
function contributors() {
 global $wpdb;
 
 $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name  'admin' ORDER BY display_name");
 
 foreach ($authors as $author ) {
 
 echo "
 
“;
echo “ID);
echo “/”>”;
echo get_avatar($author->ID);
echo ““;
echo ‘
‘;
echo “ID);
echo “/”>”;
the_author_meta(‘display_name’, $author->ID);
echo ““;
echo “
“;
echo “Website: ID);
echo “/” target=’_blank’>”;
the_author_meta(‘user_url’, $author->ID);
echo ““;
echo “
“;
echo “Twitter: ID);
echo “” target=’_blank’>”;
the_author_meta(‘twitter’, $author->ID);
echo ““;
echo “
“;
echo “ID);
echo “/”>Visit “;
the_author_meta(‘display_name’, $author->ID);
echo “‘s Profile Page”;
echo ““;
echo “
 
“;
echo “
 
“;
}
}
 
Mã này đang sử dụng plugin Ảnh người dùng . Trường twitter đang được hiển thị bằng thủ thuật mà chúng tôi đã đề cập trong bài viết Cách hiển thị Twitter và Facebook của tác giả trong trang Hồ sơ .
 
Ví dụ CSS sẽ trông giống như sau:
 
#authorlist ul{
 list-style: none;
 width: 600px;
 margin: 0;
 padding: 0;
 }
 #authorlist li {
 margin: 0 0 5px 0;
 list-style: none;
 height: 90px;
 padding: 15px 0 15px 0;
 border-bottom: 1px solid #ececec;
 }
 
 #authorlist img.photo {
 width: 80px;
 height: 80px;
 float: left;
 margin: 0 15px 0 0;
 padding: 3px;
 border: 1px solid #ececec;
 }
 
 #authorlist div.authname {
 margin: 20px 0 0 10px;
 }
 
Bạn có thể hiển thị thêm thông tin nếu muốn bằng cách sử dụng mã nâng cao làm hướng dẫn của bạn.