一个简单的B2美化模块，自定义数量并随机获取用户来展示，每次刷新会随机更换背景图片，也可以调用户自己设置的背景，我这里调用的是随机，想要获取展示更多内容可以自己增加调用即可。这里只分享一个简单的样式
首先打开b2主题或者子主题的根目录下打开 index.php 查找：
<?php do_action('b2_index'); ?>在下面添加
然后到/Modules/Index/目录下新建 Index_user.php (先在Modules目录下新建Index目录) 将下面的代码复制到 Index_user.php 里保存
<?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'].'" rel="external nofollow" 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().'" rel="external nofollow" >'.$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).'" rel="external nofollow" >'.$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.'" rel="external nofollow" >[评论] '.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 = 8; 代表调用8个用户的信息，可自行更改，获取文章数也可以自己改，这里默认是2篇文章。
将下面的CSS文件放入主题的 style.css 里
/*用户推荐*/
.mi-users {
padding-bottom: 30px;
}
.mi-user {
border-radius: 10px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.mi-user .user-search-list li {
position: relative;
width: auto;
}
.mi-user a {
display: block;
position: relative;
}
.mi-user .a {
width: 100%;
border-radius: 999px;
}
.mi-user .mi-user-wis {
height: 70px;
width: 120px;
border-radius: 10px;
}
.mi-user .latest-posts,
.mi-user .latest-comments {
padding: 10px 5px;
font-size: 12px;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.mi-user .latest-posts .latest-posts-title,
.mi-user .latest-comments .latest-posts-title {
font-size: 14px;
color: #c0bdbd;
font-weight: normal;
margin-bottom: 1.25em;
}
.mi-user .latest-posts img,
.mi-user .latest-comments img {
height: 70px;
width: 120px;
border-radius: 10px;
}
.mi-user .latest-posts .mi-item-title,
.mi-user .latest-comments .mi-item-title {
font-size: 14px;
overflow: hidden;
font-weight: normal;
color: #323232;
margin-bottom: 1.15em;
width: 150px;
float: right;
height: 40px;
margin-top: 5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.mi-user .latest-posts .mi-item-meta,
.mi-user .latest-comments .mi-item-meta {
font-size: 12px;
color: rgba(0, 0, 0, 0.3);
font-weight: normal;
}
.mi-user .latest-posts .mi-itemss, .mi-user .latest-comments .mi-itemss {
margin-top: -15px;
position: absolute;
right: 0;
}
.mi-user .latest-posts li,
.mi-user .latest-comments li {
padding: 0 0 20px 0;
}
.mi-user-title {
font-size: 22px;
font-weight: bold;
letter-spacing: 2px;
color: #4a4a4a;
margin-bottom: 20px;
width: 100%;
}
.mi-user .user-post {
position: absolute;
margin-top: -15px;
margin-left: 60px;
font-size: 12px;
}
.mi-user .user-s-follow {
padding: 10px 10px 0 0;
text-align: center;
float: right;
position: relative;
}
.mi-user .user-s-info {
display: flex;
flex-wrap: wrap;
position: relative;
padding: 30px 0 0 0;
}
.mi-user .user-s-info-name {
margin-top: 10px;
display: flex;
flex-flow: column;
margin-left: 14px;
}
.mi-user .user-s-info h2 {
color: #fff;
width: 100px;
height: 22px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.mi-user .user-s-follow button {
color: #fff;
border: 1px solid #ff7819;
background: #ff7819;
}
.mi-user .user-s-data {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px;
font-size: 12px;
color: #ffffff;
text-align: center;
margin-top: 20px;
}
.mi-user .user-s-data p {
color: #fff;
}
.mi-user .lv-icon {
font-size: 12px;
font-weight: 400;
color: #ffffff;
}
.mi-user .user-s-info .user-s-info-name {
margin-top: -50px;
display: flex;
flex-flow: column;
margin-left: 95px;
}
.mi-user .user-s-info .avatar {
width: auto;
border-radius: 10px;
}
.mi-user .user-search-list .user-s-info-desc {
height: auto;
background: #ffffff;
}
.mi-user .post-categories {
right: 0;
top: 45px;
position: absolute;
/* display: none; */
}
.mi-user .user-s-latest-post {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
padding: 10px 0 0 0;
}
.mi-user .user-s-latest-comment {
width: 270px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.mi-user .user-s-latest-comments {
padding: 10px 0 0 0 ;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.mi-user .latest-posts a:hover .mi-item-title,
.mi-user .user-s-latest-comments a:hover {
color: #ef8d8d;
}
.mi-user .mi-userbg {
border-radius: 10px;width: 310px;
}手机版暂时没做优化，需要的话自己可以改改，或者直接手机版隐藏，下面代码放入style.css
@media screen and (max-width:768px){
.mi-users {
display: none;
}
}打开主题根目录 functions.php 最下面加入
// 获取用户列表
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;
}上方更改为自己的图片路径。
下载文件上传到主题或子主题目录；然后清空浏览器缓存就好了。
重要提示
如有解压密码： 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性： 建议具有一定思考和动手能力的用户购买。
请谨慎考虑： 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知： 虚拟类商品，一经购买打赏赞助，不支持退款。请谅解，谢谢合作！
© 版权声明
THE END
暂无评论内容