kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(header): align publish and VIP CTAs with reference theme

Browse Source 
The top-nav publish chip and open-membership chip carried an AKSRT-only
class layer (navbar-cta / navbar-cta-text / navbar-newposts /
navbar-vip-hover) plus a matching set of CSS overrides that replaced the
legacy .but geometry: margin 0.4em -> 0, an extra min-height and flex gap,
an FA5 pencil glyph that is not the reference pencil, and label text
wrapped in a span. The VIP hover card also had its own positioning
override instead of the reference static position.

Drop that layer and emit the reference class combination verbatim so the
already byte-identical legacy stylesheet owns the geometry again:

- publish chip renders newadd-btns but nowave <skin> [radius] btn-newadd
  with the label echoed as saved (no injected icon, no span)
- VIP chip renders pay-vip|signin-loader but jb-red radius payvip-icon
  with the vip_1 SVG at em12 mr3, inside span.hover-show.inline-block
- user-card CTA uses the vip_1 SVG (em12 mr6) instead of fa-gem and drops
  vip-level, matching zib_get_header_payvip_icon()
- both buttons now honour Settings::close_sign(), matching the reference
  zib_is_close_sign() gate and the floating publish button
- header-userbox.css keeps one rule that restores the hover wrapper to a
  plain block container so .sub-vip-card takes its reference static
  position; every other override is gone
- nav_newposts_text default drops the duplicated fas and uses the FA5
  spelling of the reference pencil (fa-pencil-alt, not fa-pen)

Dead code removed: aksrt_normalize_header_cta_label(), the unreachable
multi-type dropdown branch of aksrt_render_new_add_btns() (only 'post' is
supported and only ['post'] is ever passed), and the
newadd-btns__toggle / newadd-btns__item / drop-newadd markup it emitted.

ml10 is no longer set on the VIP anchor: .aksrt-navbar-actions already
supplies the 10px gap the reference gets from ml10, and keeping both
would double it to 20px.

No migration for sites that already stored the old nav_newposts_text.

Verified: node --test across tests/ (603 passing), php -l on the changed
PHP files, and a stubbed render of every publish/VIP branch.
This commit is contained in:
kate522
2026-10-15 11:54:54 +08:00
parent ce6fbb4e39
commit 4f2edebab6
7 changed files with 81 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/build/public.css
+6 -40
View File
@@ -2757,29 +2757,6 @@ main.container,
float: none;
}
.navbar-top .aksrt-navbar-actions .navbar-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 29px;
margin: 0;
padding: .3em 1em !important;
border-radius: var(--radius-btn, 4px);
font-size: .8em;
line-height: 1.44;
}
.navbar-top .aksrt-navbar-actions .navbar-cta.radius {
border-radius: 50px;
}
.navbar-top .aksrt-navbar-actions .navbar-cta > .icon {
width: 1.2em;
height: 1.2em;
flex: 0 0 auto;
}
.navbar-top .aksrt-nav-icon,
.navbar-top .aksrt-nav-avatar {
display: inline-flex !important;
@@ -2822,23 +2799,12 @@ main.container,
margin: 0;
}
/* Anchor the VIP preview to the full navigation row instead of relying on
* the absolute panel's static position beside the compact CTA. */
.navbar-top .aksrt-navbar-actions .navbar-vip-hover {
position: relative;
align-self: stretch;
align-items: center;
overflow: visible;
}
.navbar-top .aksrt-navbar-actions .navbar-vip-hover > .sub-vip-card {
top: 100%;
right: 0;
left: auto;
width: max-content;
max-width: calc(100vw - 24px);
margin: 0;
z-index: 1002;
/* The reference keeps the publish/VIP hover wrapper a plain inline-block, so the
* absolutely positioned .sub-vip-card takes its normal-flow static position.
* The shared action cluster otherwise forces inline-flex on every child, which
* would move that static position to the flex container's cross-start. */
.navbar-top .aksrt-navbar-actions > .hover-show {
display: inline-block;
}
/* Keep the drop-down search panel above a fixed header (z-index: 999). */
assets/css/build/public.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/frontend/header-userbox.css
+6 -40
View File
@@ -50,29 +50,6 @@
float: none;
}
.navbar-top .aksrt-navbar-actions .navbar-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 29px;
margin: 0;
padding: .3em 1em !important;
border-radius: var(--radius-btn, 4px);
font-size: .8em;
line-height: 1.44;
}
.navbar-top .aksrt-navbar-actions .navbar-cta.radius {
border-radius: 50px;
}
.navbar-top .aksrt-navbar-actions .navbar-cta > .icon {
width: 1.2em;
height: 1.2em;
flex: 0 0 auto;
}
.navbar-top .aksrt-nav-icon,
.navbar-top .aksrt-nav-avatar {
display: inline-flex !important;
@@ -115,23 +92,12 @@
margin: 0;
}
/* Anchor the VIP preview to the full navigation row instead of relying on
* the absolute panel's static position beside the compact CTA. */
.navbar-top .aksrt-navbar-actions .navbar-vip-hover {
position: relative;
align-self: stretch;
align-items: center;
overflow: visible;
}
.navbar-top .aksrt-navbar-actions .navbar-vip-hover > .sub-vip-card {
top: 100%;
right: 0;
left: auto;
width: max-content;
max-width: calc(100vw - 24px);
margin: 0;
z-index: 1002;
/* The reference keeps the publish/VIP hover wrapper a plain inline-block, so the
* absolutely positioned .sub-vip-card takes its normal-flow static position.
* The shared action cluster otherwise forces inline-flex on every child, which
* would move that static position to the flex container's cross-start. */
.navbar-top .aksrt-navbar-actions > .hover-show {
display: inline-block;
}
/* Keep the drop-down search panel above a fixed header (z-index: 999). */
inc/helpers/aksrt-header-menu-buttons.php
+30 -107
View File
@@ -37,102 +37,33 @@ if (!function_exists('aksrt_get_new_add_actions')) :
}
endif;
if (!function_exists('aksrt_normalize_header_cta_label')) :
/**
* Normalize CTA label HTML: map FA5 classes and keep a single leading icon.
*/
function aksrt_normalize_header_cta_label(string $label, string $fallback_icon = 'fa fas fa-pen'): string {
$label = trim($label);
if ($label === '') {
return '<i class="' . esc_attr($fallback_icon) . '" aria-hidden="true"></i> ' . esc_html__('发布', 'aksrt');
}
if (stripos($label, '<i') === false) {
// No space between icon and label — spacing via CSS margin (legacy .but > .fa).
$label = '<i class="' . esc_attr($fallback_icon) . '" aria-hidden="true"></i><span class="navbar-cta-text">' . esc_html(wp_strip_all_tags($label)) . '</span>';
} else {
$label = preg_replace(
'/(<\/i>)\s*([^<].*)$/u',
'$1<span class="navbar-cta-text">$2</span>',
$label
) ?? $label;
}
return $label;
}
endif;
if (!function_exists('aksrt_render_new_add_btns')) :
/**
* Multi-type publish button (legacy newadd-btns).
* Publish chip (legacy newadd-btns, single action).
*
* Mirrors the single-button branch of the reference zib_get_new_add_btns():
* the paint classes ride on the anchor itself and the label is emitted
* verbatim. Only the post action exists, so there is no dropdown branch.
*
* @param string[] $types
*/
function aksrt_render_new_add_btns(array $types, string $class = '', string $label = ''): string {
if (class_exists('\AKSRT\Settings\Settings') && \AKSRT\Settings\Settings::close_sign()) {
return '';
}
$actions = aksrt_get_new_add_actions($types);
if (!$actions) {
// Last resort: keep a write-post entry so the top-nav chip is never blank.
$fallback = function_exists('aksrt_get_new_post_url') ? (string) aksrt_get_new_post_url() : '';
if ($fallback === '') {
$fallback = admin_url('post-new.php');
}
$actions = [[
'type' => 'post',
'url' => $fallback,
'label' => __('写文章', 'aksrt'),
'icon' => 'fa fas fa-file-alt',
]];
return '';
}
$a = $actions[0];
if ($label === '') {
$label = __('发布', 'aksrt');
}
$label_html = aksrt_normalize_header_cta_label((string) $label, 'fa fas fa-pen');
// Split paint classes vs wrapper tokens.
$class_tokens = preg_split('/\s+/', trim($class), -1, PREG_SPLIT_NO_EMPTY) ?: [];
$cta_tokens = [];
$wrap_tokens = ['newadd-btns'];
foreach ($class_tokens as $token) {
if ($token === 'newadd-btns') {
continue;
}
if ($token === 'btn-primary' || $token === 'but' || $token === 'navbar-cta' || $token === 'radius' || $token === 'main-radius' || $token === 'mini-radius' || str_starts_with($token, 'jb-') || str_starts_with($token, 'b-')) {
$cta_tokens[] = $token;
continue;
}
$wrap_tokens[] = $token;
}
if (!$cta_tokens) {
$cta_tokens[] = 'jb-blue';
}
if (!in_array('but', $cta_tokens, true)) {
$cta_tokens[] = 'but';
}
$cta_class = trim(implode(' ', array_unique($cta_tokens)));
if (count($actions) === 1) {
$a = $actions[0];
return '<a rel="nofollow" class="' . esc_attr(trim(implode(' ', $wrap_tokens) . ' ' . $cta_class . ' navbar-cta')) . '" href="' . esc_url($a['url']) . '">'
. $label_html
. '</a>';
}
// legacy: span.newadd-btns.hover-show > toggle chip + .hover-show-con.drop-newadd
// Paint classes (jb-*, but, radius) MUST live on the toggle — wrapper is layout-only
// (background forced transparent). Bare navbar-but has no .navbar-but-cluster shell.
// data-aksrt-newadd: JS may portal menu to body so chip width cannot track menu.
$html = '<span class="' . esc_attr(trim(implode(' ', $wrap_tokens) . ' hover-show')) . '" data-aksrt-newadd="1">';
$html .= '<span class="newadd-btns__toggle navbar-cta ' . esc_attr($cta_class) . '">' . $label_html
. '<i class="fa fas fa-caret-down" aria-hidden="true"></i></span>';
$html .= '<div class="hover-show-con dropdown-menu drop-newadd" role="menu">';
foreach ($actions as $a) {
$html .= '<a rel="nofollow" class="btn-newadd newadd-btns__item" role="menuitem" href="' . esc_url($a['url']) . '">';
$html .= '<i class="' . esc_attr($a['icon']) . '" aria-hidden="true"></i> '
. '<text>' . esc_html($a['label']) . '</text>';
$html .= '</a>';
}
$html .= '</div></span>';
return $html;
return '<a rel="nofollow" class="newadd-btns ' . esc_attr($class) . ' btn-newadd" href="' . esc_url($a['url']) . '">'
. $label . '</a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Saved through sanitize_type 'html' (wp_kses_post).
}
endif;
@@ -142,26 +73,19 @@ if (!function_exists('aksrt_render_header_menu_buttons')) :
*/
function aksrt_render_header_menu_buttons(): string {
$settings = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::read_domain('page_display', 'header-nav') : [];
$cfg = [
'enabled' => !isset($settings['nav_newposts']) || !empty($settings['nav_newposts']),
'text' => trim((string) ($settings['nav_newposts_text'] ?? __('发布', 'aksrt'))),
'radius_pill' => !isset($settings['nav_newposts_radius']) || !empty($settings['nav_newposts_radius']),
'class' => sanitize_html_class((string) (($settings['nav_newposts_class'] ?? '') ?: 'jb-blue')),
];
$enabled = !isset($settings['nav_newposts']) || !empty($settings['nav_newposts']);
$text = trim((string) ($settings['nav_newposts_text'] ?? ''));
$pill = !isset($settings['nav_newposts_radius']) || !empty($settings['nav_newposts_radius']);
$skin = sanitize_html_class((string) (($settings['nav_newposts_class'] ?? '') ?: 'jb-blue'));
$html = '';
if (!empty($cfg['enabled'])) {
if ($enabled) {
// legacy default: but nowave jb-blue (+ radius).
$class = 'but nowave navbar-newposts';
$skin = trim((string) ($cfg['class'] ?? ''));
if ($skin === '') {
$skin = 'jb-blue';
}
$class .= ' ' . $skin;
$pill = !empty($cfg['radius_pill']);
$class = 'but nowave ' . $skin;
if ($pill && !str_contains($class, 'radius')) {
$class .= ' radius';
}
$label = (string) ($cfg['text'] ?? __('发布', 'aksrt'));
$label = $text !== '' ? $text : __('发布', 'aksrt');
$btn = aksrt_render_new_add_btns(['post'], $class, $label);
if ($btn !== '') {
$html .= $btn;
@@ -173,7 +97,8 @@ if (!function_exists('aksrt_render_header_menu_buttons')) :
$show_vip = false;
if (class_exists('\AKSRT\Settings\Settings')) {
$vs = \AKSRT\Settings\Settings::get_payment_vip_settings();
$show_vip = !empty($vs['enabled']) && !empty($vs['nav_pay_vip']);
$show_vip = !empty($vs['enabled']) && !empty($vs['nav_pay_vip'])
&& !\AKSRT\Settings\Settings::close_sign();
}
if ($show_vip) {
$is_vip = false;
@@ -188,17 +113,15 @@ if (!function_exists('aksrt_render_header_menu_buttons')) :
if (method_exists($svc, 'render_vip_card')) {
$cards = $svc->render_vip_card(1, $user_id) . $svc->render_vip_card(2, $user_id);
if ($cards !== '') {
$hover = '<div class="hover-show-con sub-menu sub-vip-card">' . $cards . '</div>';
$hover = '<div class="sub-menu hover-show-con sub-vip-card">' . $cards . '</div>';
}
}
}
// legacy: span.hover-show wraps button + .hover-show-con.sub-vip-card
$html .= '<span class="hover-show inline-block navbar-vip-hover">';
$html .= '<a class="but jb-red radius payvip-icon ml10 navbar-cta ' . esc_attr($cls) . '" href="javascript:;"'
. ($user_id > 0 ? ' vip-level="1"' : '') . '>';
$html .= '<svg class="icon em12 mr3" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg>'
. '<span class="navbar-cta-text">' . esc_html__('开通会员', 'aksrt') . '</span>';
$html .= '</a>' . $hover . '</span>';
// legacy: span.hover-show wraps button + .sub-menu.sub-vip-card
$html .= '<span class="hover-show inline-block">';
$html .= '<a class="' . esc_attr($cls) . ' but jb-red radius payvip-icon" href="javascript:;">'
. '<svg class="em12 mr3" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg>'
. esc_html__('开通会员', 'aksrt') . '</a>' . $hover . '</span>';
}
}
inc/helpers/aksrt-header-userbox.php
+4 -4
View File
@@ -230,11 +230,11 @@ if (!function_exists('aksrt_header_payvip_bar')) :
return '';
}
// 几何对齐参考主题 CTA（通栏、radius4）——不是顶导 navbar-cta chips。
// 1:1 对齐参考主题 zib_get_header_payvip_icon()：通栏、radius4、vip_1 SVG 图标、裸文案。
return '<div class="mt10 em09" style="padding:2px;">'
. '<a class="pay-vip but radius4 payvip-icon btn-block" href="javascript:;" vip-level="1">'
. '<i class="fa fas fa-gem em12 mr6" aria-hidden="true"></i>'
. '<span>' . esc_html__('开通会员 尊享会员权益', 'aksrt') . '</span>'
. '<a class="pay-vip but radius4 payvip-icon btn-block" href="javascript:;">'
. '<svg class="em12 mr6" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg>'
. esc_html__('开通会员 尊享会员权益', 'aksrt')
. '</a></div>';
}
endif;
src/Admin/Schema/SchemaPageDisplay.php
+1 -1
View File
@@ -53,7 +53,7 @@ class SchemaPageDisplay {
self::field('nav_newposts', 'Add发布按钮', 'switcher', true, ['description' => '顶部导航显示文章投稿按钮。']),
self::field('nav_newposts_radius', '按钮圆角', 'switcher', true, ['dependsOn' => self::enabled('nav_newposts')]),
self::field('nav_newposts_class', '按钮颜色', 'palette', 'jb-blue', ['dependsOn' => self::enabled('nav_newposts'), 'options' => self::aksrt_palette()]),
self::field('nav_newposts_text', '按钮文案', 'textarea', '<i class="fa fas fa-fw fas fa-pencil-alt"></i>发布', ['dependsOn' => self::enabled('nav_newposts'), 'sanitize_type' => 'html', 'rows' => 1]),
self::field('nav_newposts_text', '按钮文案', 'textarea', '<i class="fa fas fa-fw fa-pencil-alt"></i>发布', ['dependsOn' => self::enabled('nav_newposts'), 'sanitize_type' => 'html', 'rows' => 1]),
]);
}
tests/widget-system/page-display-contract.test.cjs
+33 -6
View File
@@ -120,6 +120,10 @@ test('defaults, nested structures, dependencies, and excluded product families a
}
assert.equal(headerMenuButtons.includes('nav_newposts_btns'), false)
assert.match(headerMenuButtons, /aksrt_render_new_add_btns\(\['post'\], \$class, \$label\)/)
// FA5 spelling of the reference '<i class="fa fa-fw fa-pencil"></i>发布'
// default: fa-pencil does not exist in the bundled FA 5.15.4 free set.
assert.match(schema, /'nav_newposts_text', '按钮文案', 'textarea', '<i class="fa fas fa-fw fa-pencil-alt"><\/i>发布'/)
assert.doesNotMatch(schema, /fa fas fa-fw fas /)
})
test('VIP navigation purchase switches are saved and consumed end to end', () => {
@@ -136,8 +140,15 @@ test('VIP navigation purchase switches are saved and consumed end to end', () =>
})
test('header VIP hover cards match the legacy markup and style contract', () => {
assert.match(headerMenuButtons, /<span class="hover-show inline-block navbar-vip-hover">/)
assert.match(headerMenuButtons, /<div class="hover-show-con sub-menu sub-vip-card">/)
assert.match(headerMenuButtons, /<span class="hover-show inline-block">/)
assert.match(headerMenuButtons, /<div class="sub-menu hover-show-con sub-vip-card">/)
assert.match(headerMenuButtons, /'<a class="' \. esc_attr\(\$cls\) \. ' but jb-red radius payvip-icon" href="javascript:;">'/)
assert.match(headerMenuButtons, /<svg class="em12 mr3" aria-hidden="true"><use xlink:href="#icon-vip_1"><\/use><\/svg>'/)
assert.match(headerMenuButtons, /'<a rel="nofollow" class="newadd-btns ' \. esc_attr\(\$class\) \. ' btn-newadd"/)
assert.equal((headerMenuButtons.match(/Settings::close_sign\(\)/g) || []).length, 2)
for (const dead of ['navbar-cta', 'navbar-cta-text', 'navbar-newposts', 'navbar-vip-hover', 'newadd-btns__', 'vip-level', 'fa-gem']) {
assert.equal(headerMenuButtons.includes(dead), false, `AKSRT-only header CTA token remains: ${dead}`)
}
assert.match(vipCardRenderer, /aksrt_get_lazy_attr\('lazy_other', \$icon_url, 'img-icon'\)/)
assert.match(vipCardRenderer, /<div class=\"abs-center vip-baicon\"[^>]*>/)
assert.match(vipCardRenderer, /<div class=\"vip-img abs-right\">/)
@@ -154,8 +165,21 @@ test('header VIP hover cards match the legacy markup and style contract', () =>
assert.match(legacyMainCss, /\.sub-vip-card \.vip-card\s*\{[^}]*display:\s*inline-block;[^}]*width:\s*240px;[^}]*margin:\s*5px;/s)
assert.match(legacyMainCss, /\.sub-vip-card \.vip-baicon\.abs-center\s*\{[^}]*font-size:\s*10em;[^}]*left:\s*55%;/s)
assert.match(legacyMainCss, /\.sub-vip-card \.vip-img\s*\{[^}]*display:\s*none;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions \.navbar-vip-hover\s*\{[^}]*align-self:\s*stretch;[^}]*overflow:\s*visible;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions \.navbar-vip-hover > \.sub-vip-card\s*\{[^}]*top:\s*100%;[^}]*right:\s*0;[^}]*left:\s*auto;[^}]*max-width:\s*calc\(100vw - 24px\);/s)
// The hover wrapper must stay a plain block container so the legacy static
// position of .sub-vip-card matches the reference theme.
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions > \.hover-show\s*\{[^}]*display:\s*inline-block;/s)
assert.doesNotMatch(headerCss, /\.navbar-cta|\.navbar-vip-hover/)
assert.match(legacyMainCss, /\.navbar-top \.navbar-right \.sub-menu\s*\{[^}]*right:\s*0;/s)
})
test('user card VIP CTA matches the reference zib_get_header_payvip_icon()', () => {
assert.match(headerUserbox, /'<a class="pay-vip but radius4 payvip-icon btn-block" href="javascript:;">'/)
assert.match(headerUserbox, /<svg class="em12 mr6" aria-hidden="true"><use xlink:href="#icon-vip_1"><\/use><\/svg>'/)
assert.match(headerUserbox, /esc_html__\('开通会员 尊享会员权益', 'aksrt'\)/)
for (const dead of ['fa-gem', 'vip-level']) {
assert.equal(headerUserbox.includes(dead), false, `AKSRT-only user card CTA token remains: ${dead}`)
}
assert.doesNotMatch(headerUserbox, /<span>' \. esc_html__\('开通会员 尊享会员权益'/)
})
test('VIP purchase modal matches legacy desktop-center and mobile-bottom positioning', () => {
@@ -327,8 +351,11 @@ test('desktop header actions share one row without generic button masks', () =>
assert.doesNotMatch(headerNavbar, /class="btn nav-search-btn main-search-btn"/)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions\s*\{[^}]*display:\s*flex;[^}]*align-items:\s*center;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-nav-icon,[\s\S]*?background:\s*transparent !important;/)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions \.navbar-cta\.radius\s*\{[^}]*border-radius:\s*50px;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions \.navbar-cta > \.icon\s*\{[^}]*width:\s*1\.2em;[^}]*height:\s*1\.2em;[^}]*flex:\s*0 0 auto;/s)
// The publish and VIP chips ride the legacy .but geometry verbatim; nothing in
// the header module may restate their padding, margin, radius or icon size.
assert.match(legacyMainCss, /\.navbar-top \.navbar-but > \.but\s*\{[^}]*font-size:\s*0\.8em;[^}]*padding:\s*0\.3em 1em !important;[^}]*margin:\s*0\.4em;/s)
assert.doesNotMatch(headerCss, /\.navbar-cta|\.navbar-vip-hover/)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions\s*\{[^}]*gap:\s*10px;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-account > li\s*\{[^}]*position:\s*relative;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-account > li > \.sub-menu\s*\{[^}]*top:\s*calc\(100% \+ 5px\);[^}]*right:\s*0;/s)
})