Hotline : 0908.103.092

Hướng dẫn chèn code hiển thị danh sách Author kèm Avatar trong WordPress

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 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&nbsp;";
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ả. Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

CHÚNG TÔI MANG ĐẾN
WEBSITE WORDPRESS CHUYÊN NGHIỆP
VỚI ĐẦY ĐỦ TÍNH NĂNG ƯU VIỆT
ZoomWorld giới thiệu tới khách hàng dịch vụ thiết kế website bán hàng chuyên nghiệp với tính sẵn sàng luôn đáp ứng yêu cầu của khách hàng mọi lúc mọi nơi một cách nhanh chóng nhất kết hợp với tính tùy biến cao có khả năng thay đổi website phù hợp theo từng hoàn cảnh của Doanh nghiệp bạn.
thiet ke website wordpress
0908 103 092