Categories Hướng dẫn

Làm thế nào để hiển thị một danh sách tác giả với avatar trong WordPress bên đóng góp Trang

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

Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách bạn có thể tạo trang người đóng góp sẽ hiển thị danh sách tác giả có avatar hoặc userphoto 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 trình độ trung cấp hướng dẫn.

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

Sau đó, bạn sẽ cần phải mở functions.php tập tin trong thư mục chủ đề của bạn và thêm mã sau đây: 

người đóng góp chức năng () {
 global wpdb;

 $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename từ $ wpdb-> người sử dụng ORDER BY display_name");

 foreach ($ tác giả là tác giả $) {
 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 nói với WordPress để tạo ra một chức năng sẽ hiển thị tên của tác giả, và avatar của tác giả. Bạn có thể thay đổi cài đặt plugin avatar thành Userphoto bằng cách đơn giản thay đổi dòng sau: 

    echo get_avatar ($ author-> ID);

    và thay thế nó bằng: 

    echo userphoto ($ tác giả-> ID);

    Bạn có thể thêm nhiều tính năng cho chức năng này như hiển thị URL của tác giả và các 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 tin CSS: 

    #authorlist li {
 rõ ràng: trái;
 phao: trái;
 lề: 0 0 5px 0;
 }

 #authorlist img.photo {
 chiều rộng: 40px;
 chiều cao: 40px;
 phao: trái;
 }

 #authorlist div.authname {
 lề: 20px 0 0 10px;
 phao: trái;
 }

    Một khi bạn đã hoàn thành thêm các chức năng, bây giờ bạn sẽ cần phải gọi nó trong mẫu trang của bạn. Mở tệp contributors.php hoặc bất cứ tên tệp nào bạn đặt tên. Thực hiện theo cùng một mẫu trang như trang.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 đóng góp nhiều nội dung phong phú hơn.  Thủ thuật này là tuyệt vời cho các blog của Multi-Author. 
    

    Bây giờ đây là một ví dụ về cách chúng ta sử dụng nó: 
    

    Ví dụ về Trang Cộng tác viên với Danh sách Tác giả và Thông tin Khác 
    

    Nếu bạn muốn có trang người đóng góp với thông tin như được hiển thị trong ví dụ trên, bạn sẽ cần thực hiện một số thay đổi đối với chức năng ban đầu.  Chúng tôi có một mã ví dụ sẽ làm cho bạn chính xác mọi thứ được hiển thị trong hình ở trên. 
    

    người đóng góp chức năng () {
 global wpdb;

 $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename từ $ wpdb-> người dùng WHERE display_name 'admin' ORDER BY display_name");

 foreach ($ tác giả là tác giả $) {

 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 “/”> Ghé thăm “; 
    the_author_meta (‘display_name’, $ author-> ID); 
    echo “trang tiểu sử”; 
    echo “”; 
    echo “”; 
    echo ” 
    • 

    “; 
    } 
    } 
    

    Mã này sử dụng plugin Người dùng Ảnh.  Trường twitter đang được hiển thị bằng cách sử dụng mẹo chúng tôi đã đề cập trong bài viết Làm thế nào để hiển thị Twitter của tác giả và Facebook trong trang Tiểu sử. 
    

    Ví dụ CSS sẽ như sau: 
    

    #authorlist ul {
 danh sách-phong cách: không có;
 chiều rộng: 600px;
 lề: 0;
 đệm: 0;
 }
 #authorlist li {
 lề: 0 0 5px 0;
 danh sách-phong cách: không có;
 chiều cao: 90px;
 padding: 15px 0 15px 0;
 đường viền dưới cùng: 1px solid #ececec;
 }

 #authorlist img.photo {
 chiều rộng: 80px;
 chiều cao: 80px;
 phao: trái;
 lề: 0 15px 0 0;
 padding: 3px;
 biên giới: 1px solid #ececec;
 }

 #authorlist div.authname {
 lề: 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. 
    

    Nguồn của chức năng này