一个简单的美化模块，自定义数量并随机获取用户来展示，每次刷新会随机更换背景图片，也可以调用户自己设置的背景，我这里调用的是随机，可以自己选择；如果用户发布了文章则优先展示最近发布的文章，没有发布过文章会获取评论的文章 ，如果都没有就会显示暂无动态。想要获取展示更多内容可以自己增加调用即可。这里只分享一个简单的样式。
效果预览
首先打开b2主题或者子主题的根目录下打开
<?php do_action('b2_index'); ?>在下面添加
<?php get_template_part('/Modules/Index/Index_user'); ?>然后到/Modules/Index/目录下新建
<?php
/**
* Template Name: 用户展示
*/
?>
<?php
$count = 8; //展示用户数量
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$offset = ($paged -1)*$count;
$users = new WP_User_Query( array(
'search_columns' => array(
'display_name',
'user_id'
),
'number'=>$count,
'offset'=>$offset
) );
$users_found = $users->get_results();
$total = $users->get_total();
$pages = ceil($total/$count);
?>
<?php $users = get_random_users(); ?>
<?php if ( ! empty( $users ) ) : ?>
<?php do_action('b2_normal_archive_before'); ?>
<div class="mi-users wrapper">
<div class="mi-user-title"><? echo get_option('Micnt_Modular_Index')['Micnt_user_title'] ?></div>
<div class="archive-row">
<div id="user-list" class="mi-user">
<?php $ids = array(); if($users_found){
echo '<div class="hidden-line"><ul class="user-search-list" ref="searchUser">';
foreach ($users_found as $user) {
$user_data = B2\Modules\Common\User::get_user_public_data($user->ID);
$user_lv = B2\Modules\Common\User::get_user_lv($user->ID);
$user_vip = isset($user_lv['vip']['icon']) ? $user_lv['vip']['icon'] : '';
$user_lv = isset($user_lv['lv']['icon']) ? $user_lv['lv']['icon'] : '';
//$tips = B2\Modules\Common\Comment::get_tips();
//$tips = $tips['title'] ? $tips['title'] : __('这家伙很懒，什么都没留下','b2');
$following = get_user_meta($user->ID,'zrz_follow',true);
$following = is_array($following) ? count($following) : 0;
$followers = get_user_meta($user->ID,'zrz_followed',true);
$followers = is_array($followers) ? count($followers) : 0;
$ids[] = $user->ID;
// 获取用户最近发布的两篇文章
$args = array(
'author' => $user->ID,
'post_type' => 'post',
'posts_per_page' => 2, //展示用户文章数量
'orderby' => 'date',
'order' => 'DESC'
);
$latest_posts = new WP_Query($args);
// 获取用户最近发布的评论
$args = array(
'user_id' => $user->ID,
'number' => 6, //展示用户评论文章数量
'status' => 'approve',
'type' => 'comment',
'orderby' => 'comment_date',
'order' => 'DESC',
);
$latest_comments = get_comments($args);
$background_image = get_random_background_image();
//如需调用B2用户中心背景图，请将下面的$background_image修改成$user_data['cover']
echo '<li>
<div style="background-image: url('.$background_image.'" class="mi-userbg">
<div class="user-s-follow">
<button class="author-has-follow" v-if="follow['.$user->ID.'] === true" v-cloak @click="followAc('.$user->ID.')">'.__('已关注','b2').'</button>
<button class="empty" v-else v-cloak @click="followAc('.$user->ID.')">'.__('关注','b2').'</button>
<button @click="dmsg('.$user->ID.')">'.__('私信','b2').'</button>
</div>
<div class="user-s-info">
<a href="'.$user_data['link'].'" class="link-block">
<div class="user-s-info-avatar avatar-parent">
<img src="'.$user_data['avatar'].'" class="avatar b2-radius" />
'.($user_data['user_title'] ? $user_data['verify_icon'] : '').'
</div>
<div class="user-s-info-name">
<h2>'.$user_data['name'].'</h2>
<p>'.$user_vip.$user_lv.'</p>
</div>
</a>
</div>
<div class="user-s-data">
<div class="">
<span>文章</span>
<p>'.count_user_posts($user->ID,'post').'</p>
</div>
<div class="">
<span>评论</span>
<p>'.B2\Modules\Common\Comment::get_user_comment_count($user->ID).'</p>
</div>
<div class="">
<span>粉丝</span>
<p>'.$followers.'</p>
</div>
<div class="">
<span>关注</span>
<p>'.$following.'</p>
</div>
</div>
<div class="user-s-info-desc">
<div class="user-s-latest latest-posts">
<h3 class="latest-posts-title">TA的动态</h3>';
if ($latest_posts->have_posts()) {
while ($latest_posts->have_posts()) {
$latest_posts->the_post();
$post_thumbnail = get_the_post_thumbnail( $post->ID, 'thumbnail' );
if (!$post_thumbnail) {
$post_thumbnail = '<img src="/wp-content/themes/b2micnt/images/nopic.png" class="mi-user-wis">';
}
$post_categories = get_the_category();
echo '<div class="user-s-latest-post">
<a href="'.get_permalink().'">'.$post_thumbnail.'<h3 class="mi-item-title">'.get_the_title().'</h3></a>
<div class="mi-itemss">';
foreach($post_categories as $category) {
echo '<h4 class="mi-item-meta"><a href="'.get_category_link($category->term_id).'">'.$category->name.'</a></h4>';
}
echo '</div>
</div>';
}
} elseif ($latest_comments) {
echo '<div class="user-s-latest-comment">';
foreach ($latest_comments as $comment) {
$comment_post_id = $comment->comment_post_ID;
$comment_mi = get_comment_link($comment->comment_ID);
echo '<div class="user-s-latest-comments"><a href="'.$comment_mi.'">[评论] '.get_the_title($comment_post_id).'</a></div>';
}
echo '</div>';
}else {
echo '<div class="user-s-latest-none">'.__('暂无动态','b2').'</div>';
}
echo '
</div>
</div>
</div>
</li>';
}
echo '</ul></div>';
?>
<?php }else{
echo B2_EMPTY;
}
unset($users_found);
unset($users);
wp_localize_script( 'b2-js-main', 'b2_search_data', array(
'users'=>$ids
))
?>
</div>
<?php do_action('b2_normal_archive_after'); ?>
</div>
</div>
<?php endif; ?>上方$count =
将下面的CSS文件放入主题的 style.css 里
手机版暂时没做优化，需要的话自己可以改改，或者直接手机版隐藏，下面代码放入style.css：
@media screen and (max-width:768px){
.mi-users {
display: none;
}
}打开主题根目录
// 获取用户列表
function get_random_users() {
$users = get_users( array(
'orderby' => 'rand',
'number' => 8,
) );
return $users;
}
//每次刷新随机背景
function get_random_background_image() {
$images = array(
'b_1.jpg',
'b_2.jpg',
'b_3.jpg',
'b_4.jpg',
'b_5.jpg',
'b_6.jpg',
);
$image_url = B2_CHILD_URI.'/images/bg/' . $images[ array_rand( $images ) ];
return $image_url;
}上方更改为自己的图片路径。
下载文件上传到主题或子主题目录；然后清空浏览器缓存就好了。
来源：详情
!
也想出现在这里？ 联系我们吧
© 版权声明
1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理 ，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。
THE END
![WordPress子比主题美化教程合集[2023/04/17]-狐狸库](https://huliku.com/pic/2023032607024935.png)
![狐狸库自定义子比主题底部footer页脚美化（自适应）[06.26]更新-狐狸库](https://img.huliku.com/pic/2023062610013835.png)
请登录后查看评论内容