Trong bài viết này dichvuthietkewebwordpress.com sẽ hướng dẫn các bạn cách hiển thị danh sách tác giả kèm theo avatar trong wordpress và bất kỳ thông tin user nào mà bạn muốn.
Đầu tiên bạn tạo một custom page, đặt tên cho file này là contributors.php hay bất kỳ tên gì bạn muốn. Nội dung file hoàn chỉnh các bạn xem ở phía dưới bài viết.
Quay lại trang wp-admin, tạo một page với tên List User hoặc tùy ý với template là custom page vừa tạo
Tiếp theo thêm đoạn code sau vào file functions.php trong theme của bạn
function contributors() {
global $wpdb;
$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");
foreach ($authors as $author ) {
echo "<li>";
echo "<a href=\"".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href=\"".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "<br />";
echo "Website: <a href=\"";
the_author_meta('user_url', $author->ID);
echo "/\" target='_blank'>";
the_author_meta('user_url', $author->ID);
echo "</a>";
echo "<br />";
echo "Twitter: <a href=\"http://twitter.com/";
the_author_meta('twitter', $author->ID);
echo "\" target='_blank'>";
the_author_meta('twitter', $author->ID);
echo "</a>";
echo "<br />";
echo "Facebook: <a href=\"https://facebook.com/";
the_author_meta('facebook', $author->ID);
echo "\" target='_blank'>";
the_author_meta('facebook', $author->ID);
echo "</a>";
echo "<br />";
echo "<a href=\"".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">Visit ";
the_author_meta('display_name', $author->ID);
echo "'s Profile Page";
echo "</a>";
echo "</div>";
echo "</li>";
}
}
Đoạn code trên thông báo với wordpress tạo ra chức năng hiển thị author name, author avatar, facebook, twitter. Hiện trong phần User Profile mặc định của WordPress chưa có info về facebook và twitter nên bạn cần thêm field Twitter và Facebook vào phần Contact info của WordPress
Bạn có thể sử dụng plugin User Photo để thay thế ảnh avatar, nếu sử dụng plugin này bạn cần thay đổi một chút trong code.
Tìm tới dòng 10 trong đoạn code trên
echo get_avatar($author->ID);
Và sau đó, chúng ta thay thế bằng đoạn code sau:
echo userphoto($author->ID);
Tiếp đến ta thêm code sau vào file CSS, thường tên file là style.css
#authorlist {
font-size: 13px;
margin: 0;
line-height: 20px;
}
#authorlist a {
text-decoration: none;
}
#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: 85px;
height: 85px;
float: left;
margin: 0 15px 0 0;
padding: 3px;
border: 1px solid #ececec;
}
#authorlist div.authname {
margin: 20px 0 0 10px;
}
Sau khi đã thực hiện thêm funtion, bây giờ bạn cần gọi nó ra page-template của bạn, mở file contributors.php mà bạn đã tạo ở trên, thêm code sau vào trong vòng lặp (Loop)
<div id="authorlist"><ul><?php contributors(); ?></ul></div>
Sau đây là file ví dụ contributors.php hoàn chỉnh
<?php /* Template Name: VisaonhoT1 */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <div id="authorlist"><ul><?php contributors(); ?></ul></div> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
Cuối cùng, các bạn trở lại trang List User để xem lại kết quả hiển thị avatar trong wordpress. Chúc các bạn thành công!
Cần hỗ trợ inbox ngay tại đây!
