Cara Menampilkan Daftar Penulis dengan Avatar di WordPress

14

Saya akan menunjukkan kepada Anda bagaimana menampilkan semua penulis dari situs Anda, namun metode itu hanya bagus jika Anda menginginkan daftar sederhana untuk ditampilkan di sidebar Anda. Jika Anda ingin membuat halaman kontributor yang kaya konten dan berguna, fungsi itu tidak ada gunanya.

Pada artikel ini saya akan menunjukkan bagaimana Anda bisa membuat halaman kontributor yang akan menampilkan daftar penulis dengan avatar atau userphoto dan informasi lainnya yang Anda sukai.

Hal pertama yang perlu Anda lakukan adalah membuat custom page.

Kemudian Anda perlu membuka file functions.php di folder tema Anda dan menambahkan kode berikut:

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>”;
}
}

Dengan menambahkan fungsi ini Anda memberi tahu WordPress untuk membuat sebuah fungsi yang akan menampilkan nama pengarang, dan avatar pengarang. Anda dapat mengubah avatar ke setting plugin foto pengguna dengan hanya mengubah baris berikut:

echo get_avatar($author->ID);

dan menggantinya dengan:

echo userphoto($author->ID);

Anda dapat menambahkan lebih banyak fitur ke fungsi ini seperti menampilkan URL penulis dan informasi lainnya dari profil dengan mengikuti struktur yang digunakan.

Anda juga perlu menambahkan baris berikut ke file CSS Anda:

#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;
}

Setelah selesai menambahkan fungsinya, sekarang Anda perlu menamainya di template halaman Anda. Buka file contributors.php atau apapun nama file anda. Ikuti template halaman yang sama seperti page.php dan dalam lingkarannya, tambahkan saja fungsi ini:

<div id=”authorlist”><ul><?php contributors(); ?></ul></div>

Ini akan memberi Anda halaman kontributor yang kaya konten. Trik ini sangat bagus untuk blog Multi-Author.

Sekarang di sini adalah contoh bagaimana kita menggunakannya:

 

 

Jika Anda ingin memiliki halaman kontributor dengan informasi seperti yang ditunjukkan pada contoh di atas, Anda perlu membuat beberapa perubahan pada fungsi aslinya. Berikut contoh kode yang akan membuat tampilan sepertigambar diatas.

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>”;
}
}

Kode ini memanfaatkan Plugin foto pengguna.

CSS akan terlihat seperti:

#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;
}

Anda dapat menampilkan lebih banyak informasi jika Anda suka dengan menggunakan kode lanjutan sebagai panduan Anda.

Sumber Lainnya.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini