hiển thị một danh sách giả với Avatars trong WordPress Contributors Page

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 các built-in chức năng cho danh sách các tác giả là không đủ. Chúng tôi đã chỉ cho bạn làm thế nào để 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ỉ là 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 một trang nội dung phong phú và đóng góp hữu ích hơn, sau đó chức năng đó là vô ích.

Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào bạn có thể tạo một trang đóng góp đó sẽ hiển thị một danh sách các tác giả với avatar hoặc userphoto và bất kỳ thông tin 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 ra một trang tùy chỉnh sử dụng template,

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 đoạn code sau:

[php]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=";
echo $author->ID;
echo "">";
echo get_avatar($author->ID);
echo "</a>";
echo ‘<div>’;
echo "<a href="".get_bloginfo(‘url’)."/?author=";
echo $author->ID;
echo "">";
the_author_meta(‘display_name’, $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}[/php]

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 mà sẽ hiển thị tên của tác giả, và avatar của tác giả. Bạn có thể thay đổi avatar để userphoto đặt plugin bằng cách thay đổi các dòng sau:


[php]echo</code> <code class="plain">get_avatar(</code><code class="variable">$author</code><code class="plain">->ID);[/php]

và thay thế nó bằng:


[php]echo</code> <code class="plain">userphoto(</code><code class="variable">$author</code><code class="plain">->ID);[/php]

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

Bạn cũng sẽ cần thêm những dòng sau vào file CSS của bạn:

[css]#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;
}[/css]

Một khi bạn đã làm xong việc thêm chức năng, bây giờ bạn sẽ cần phải gọi nó trong trang template của bạn. Mở tập tin contributors.php hoặc bất cứ điều gì bạn đặt tên cho tập tin. Thực hiện theo các 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ị các nội dung:

[php]<div id="authorlist"><ul><?php contributors(); ?></ul></div>[/php]

Điều này sẽ cung cấp cho bạn một trang đóng góp nội dung phong phú hơn. Mẹo này rất tuyệt vời cho nhiều tác giả blog.

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

Ví dụ về một trang cộng tác với Danh sách tác giả và thông tin khác

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

[php]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 "<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 "<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>";
}
}[/php]

Code này được sử dụng tài Ảnh Plugin . Các lĩnh vực twitter đang được hiển thị bằng cách sử dụng trickchú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 hồ sơ .

CSS ví dụ sẽ như:

[css]#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;
}[/css]

Bạn có thể hiển thị nhiều thông tin nếu bạn thích bằng cách sử dụng mã tiên tiến như hướng dẫn của bạn.

 

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 *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.