v1.7 — 登录态UI优化
- 隐藏 WP admin bar - 导航栏右侧登录用户信息（头像+姓名+下拉菜单） - 导航菜单间距统一 28px - 用户菜单位置修复（inline-flex 居中） - 用户名字号 14px - 笺文评论：只显示输入框+按钮，按钮在右侧，未登录弹窗提示 - 评论无需审核
This commit is contained in:
+38
-40
@@ -15,55 +15,53 @@
|
||||
<a href="/" class="logo-area">
|
||||
<span class="logo"><?php bloginfo('name'); ?></span>
|
||||
</a>
|
||||
<div class="top-bar-right">
|
||||
<nav>
|
||||
<?php
|
||||
if (has_nav_menu('primary')) {
|
||||
wp_nav_menu(array(
|
||||
'theme_location' => 'primary',
|
||||
'container' => false,
|
||||
'menu_class' => 'nav-links',
|
||||
'depth' => 1,
|
||||
));
|
||||
} else {
|
||||
echo '<ul class="nav-links">';
|
||||
echo '<li><a href="/">首页</a></li>';
|
||||
echo '<li><a href="/articles/">笺文</a></li>';
|
||||
echo '<li><a href="/tucao/">微言</a></li>';
|
||||
echo '<li><a href="/photos/">拾影</a></li>';
|
||||
echo '</ul>';
|
||||
}
|
||||
?>
|
||||
</nav>
|
||||
<?php if (is_user_logged_in()) :
|
||||
$current_user = wp_get_current_user();
|
||||
<nav>
|
||||
<?php
|
||||
if (has_nav_menu('primary')) {
|
||||
wp_nav_menu(array(
|
||||
'theme_location' => 'primary',
|
||||
'container' => false,
|
||||
'menu_class' => 'nav-links',
|
||||
'depth' => 1,
|
||||
));
|
||||
} else {
|
||||
echo '<ul class="nav-links">';
|
||||
echo '<li><a href="/">首页</a></li>';
|
||||
echo '<li><a href="/articles/">笺文</a></li>';
|
||||
echo '<li><a href="/tucao/">微言</a></li>';
|
||||
echo '<li><a href="/photos/">拾影</a></li>';
|
||||
echo '</ul>';
|
||||
}
|
||||
?>
|
||||
<div class="user-menu">
|
||||
<button class="user-menu-trigger" type="button" aria-haspopup="true">
|
||||
<?php echo get_avatar($current_user->ID, 28); ?>
|
||||
<span class="user-menu-name"><?php echo esc_html($current_user->display_name); ?></span>
|
||||
<span class="user-menu-arrow">▾</span>
|
||||
</button>
|
||||
<div class="user-menu-dropdown">
|
||||
<a href="/author/<?php echo esc_attr($current_user->user_nicename); ?>/" rel="nofollow">个人资料</a>
|
||||
<a href="/wp-admin/" rel="nofollow">系统后台</a>
|
||||
<a href="/wp-login.php?action=logout" rel="nofollow">退出</a>
|
||||
</div>
|
||||
</nav>
|
||||
<?php if (is_user_logged_in()) :
|
||||
$current_user = wp_get_current_user();
|
||||
?>
|
||||
<div class="user-menu">
|
||||
<button class="user-menu-trigger" type="button">
|
||||
<?php echo get_avatar($current_user->ID, 24, '', '', array('class' => 'user-menu-avatar')); ?>
|
||||
<span class="user-menu-name"><?php echo esc_html($current_user->display_name); ?></span>
|
||||
<span class="user-menu-arrow">▾</span>
|
||||
</button>
|
||||
<div class="user-menu-dropdown">
|
||||
<a href="/author/<?php echo esc_attr($current_user->user_nicename); ?>/">个人资料</a>
|
||||
<a href="/wp-admin/">系统后台</a>
|
||||
<a href="/wp-login.php?action=logout">退出</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
<script>
|
||||
(function(){
|
||||
var trigger = document.querySelector('.user-menu-trigger');
|
||||
var menu = document.querySelector('.user-menu');
|
||||
if (trigger && menu) {
|
||||
trigger.addEventListener('click', function(e) {
|
||||
var t = document.querySelector('.user-menu-trigger');
|
||||
var m = document.querySelector('.user-menu');
|
||||
if (t && m) {
|
||||
t.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
menu.classList.toggle('open');
|
||||
m.classList.toggle('open');
|
||||
});
|
||||
document.addEventListener('click', function() {
|
||||
menu.classList.remove('open');
|
||||
m.classList.remove('open');
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -200,7 +200,7 @@ Text Domain: kj-weji
|
||||
|
||||
/* 个人资料 */
|
||||
.profile-header { display:flex; gap:32px; align-items:flex-start; padding-bottom:32px; border-bottom:1px solid var(--border-light); margin-bottom:32px; }
|
||||
.avatar { width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg, #e8dccf 0%, #d5c4aa 100%); display:flex; align-items:center; justify-content:center; font-size:40px; flex-shrink:0; border:2px solid var(--border); box-shadow:0 2px 12px var(--shadow); }
|
||||
.profile-header .avatar { width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg, #e8dccf 0%, #d5c4aa 100%); display:flex; align-items:center; justify-content:center; font-size:40px; flex-shrink:0; border:2px solid var(--border); box-shadow:0 2px 12px var(--shadow); }
|
||||
.profile-info h2 { font-size:24px; font-weight:600; letter-spacing:0.08em; margin-bottom:4px; }
|
||||
.profile-info .handle { font-size:13px; color:var(--ink-lighter); margin-bottom:8px; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
|
||||
.profile-info .bio { font-size:14px; color:var(--ink-light); line-height:1.9; max-width:500px; }
|
||||
@@ -501,7 +501,7 @@ echo "done"
|
||||
.tucao-comment-author { font-size:13px; font-weight:600; }
|
||||
.tucao-comment-avatar { border-radius:50% !important; }
|
||||
|
||||
.tucao-comment { align-items: baseline; }
|
||||
.tucao-comment { align-items: center; }
|
||||
.tucao-comment-avatar { position: relative; top: 3px; }
|
||||
|
||||
.tucao-comment-body { line-height: 16px; }
|
||||
@@ -526,3 +526,35 @@ echo "done"
|
||||
.tucao-comment-text { display:block; font-size:13px; color:var(--ink-light); line-height:1.6; margin-left:20px; }
|
||||
|
||||
.tucao-reply-to { font-size:11px; color:var(--cinnabar); margin:0 2px; }
|
||||
|
||||
/* 用户菜单 */
|
||||
.user-menu { position:relative; }
|
||||
.user-menu-trigger { display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
|
||||
.user-menu-avatar { width:24px !important; height:24px !important; border-radius:50% !important; object-fit:cover !important; }
|
||||
.user-menu-name { font-size:14px; color:var(--ink-light); }
|
||||
.user-menu-arrow { font-size:10px; color:var(--ink-lighter); }
|
||||
.user-menu-dropdown { display:none; position:absolute; top:100%; right:0; margin-top:8px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 2px 12px var(--shadow); min-width:120px; z-index:200; }
|
||||
.user-menu.open .user-menu-dropdown { display:block; }
|
||||
.user-menu-dropdown a { display:block; padding:8px 16px; font-size:13px; color:var(--ink-light); text-decoration:none !important; white-space:nowrap; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
|
||||
.user-menu-dropdown a:hover { background:var(--paper-warm); color:var(--cinnabar); }
|
||||
|
||||
/* 评论按钮靠右 */
|
||||
.comment-form .form-submit { text-align:right; }
|
||||
.comment-form .submit { background:var(--cinnabar) !important; color:#fff !important; border:none !important; padding:8px 24px !important; border-radius:20px !important; cursor:pointer !important; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif !important; font-size:13px !important; }
|
||||
.comment-form .submit:hover { background:#a03a32 !important; }
|
||||
|
||||
.user-menu-avatar { width:18px !important; height:18px !important; border-radius:50% !important; object-fit:cover !important; }
|
||||
.user-menu-trigger { display:inline-flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; padding:0; color:var(--ink-light); font-size:13px; }
|
||||
.user-menu-trigger:hover { color:var(--cinnabar); }
|
||||
.user-menu-dropdown { right:0; left:auto; text-align:left; }
|
||||
|
||||
.user-menu-dropdown { right:0 !important; left:auto !important; z-index:9999 !important; }
|
||||
.user-menu .user-menu-dropdown { position:absolute !important; right:0 !important; left:auto !important; top:100% !important; }
|
||||
|
||||
.top-bar nav { margin-left:auto; }
|
||||
.user-menu { margin-left:28px; }
|
||||
|
||||
.user-menu-trigger { line-height:22px; }
|
||||
|
||||
.user-menu-trigger { vertical-align:middle; display:inline-flex !important; align-items:center !important; }
|
||||
.user-menu { display:inline-flex; align-items:center; }
|
||||
|
||||
Reference in New Issue
Block a user