效果图

修改前

修改后

教程开始

进入/wp-content/themes/zibll/inc/functions/zib-header.php(子比主题的导航文件)

找到下面的框起来的代码部分(因为我这是自己修改过源码的文件 所以不要看代码行数)

修改为

$sign_but = is_user_logged_in()?'<li><a href="javascript:;" class="btn' . ($user_id ? '' : ' signin-loader') . '">' . zib_get_avatar_box($user_id, 'avatar-img-diy', true, false).'</a>
                            <ul class="sub-menu">
                            ' . $user_sub . '
                            </ul>
                        </li>':'<li><a href="javascript:;" class="btn' . ($user_id ? '' : ' signin-loader') . '">' . zib_get_svg('user', '50 0 924 924') . '</a>
              <ul class="sub-menu">
              ' . $user_sub . '
              </ul>
            </li>';

子比主题设置-全局-自定义代码-自定义css，添加下面代码 设置头像的样式

.avatar-img-diy {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    --this-size: 30px;
    width: var(--this-size);
    height: var(--this-size);
}