آموزش نمایش لیست نویسندگان سایت با آواتار در وردپرس

در این مطلب میخواهیم به شما نشان دهیم که چگونه می توانید برگه ای ایجاد کنید که لیستی از نویسنده های سایت به همراه آواتار آنها و دیگر اطلاعاتی که میخواهید را نمایش دهد.

آموزش ایجاد برگه و نمایش لیست نویسنده ها به همراه آواتار

برای شروع ابتدا شما میبایست برگه جدیدی ایجاد کنید. برای انجام این کار میتوانید از آموزشی که تحت عنوان “آموزش ایجاد برگه دلخواه با طرح سفارشی در وردپرس” در سایت موجود است، استفاده کنید.

بعد از آن شما میبایست فایل functions.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>";
}
}

با اضافه کردن این کد به وردپرس گفته میشه تا تابعی ایجاد کند که نام نویسنده و آواتار وی را نمایش خواهد داد.

شما می توانید ویژگی های بیشتری را به این کد اضافه کنید آن هم به اضافه کردن آدرس نویسنده و سایر اطلاعاتی که مربوط به پروفایل کاربر است.

شما همچنین نیاز دارید تا کد زیر را به فایل CSS قالب سایت خود نظیر style.css اضافه کنید:

#authorlist li {
float:right;
clear:right;
margin: 0 0 5px 0;
}

#authorlist img {
width: 40px;
height: 40px;
float: right;
}

#authorlist div {
margin: 10px 0 0 10px;
float: right;
}

به محض اینکه کارتان با اضافه کردن تابع مذکور تمام شد، میتوانید آن را در قالب برگه دلخواه خود فراخوانی کنید. کافی است فایل قالب برگه دلخواه خود را باز کنید. سپس در میان کدهای موجود در قالب مذکور، کد زیر را به آن اضافه کنید:

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

حالا بعد از اضافه کردن کدها و ویرایش قالب میتوانید طرحی ساده مشابه نمونه زیر را مشاهده کنید:

برای ویرایش طرح نمایش آواتار نویسنده ها میتوانید کدهای HTML موجود در تابع را به دلخواه تغییر داده و سپس کدهای CSS مربوط به کلاس های تعریف شده را ویرایش کنید.