feat(nav): rewrite top header to zibll 1:1 DOM/CSS/JS contract
Replace hybrid site-nav/drawer shell with zibll navbar-top layouts 1/2/3, body.mobile-navbar-show drawer, wired NavWalker + aksrt_menu_options meta, nav_folding/chevron, VIP switches, and SPA/PHP schema parity. No dual-class compat paths.
This commit is contained in:
1 parent
b8ee6b6a43
commit
259dbdbe04
28 files changed
+2463
-885
No files matched your search
@@ -0,0 +1,112 @@
|
||||
<?php
|
||||
/**
|
||||
* Native WP nav-menu item options (aksrt_menu_options).
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
namespace AKSRT\Admin;
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
class NavMenuOptions {
|
||||
|
||||
public static function init(): void {
|
||||
add_action('wp_nav_menu_item_custom_fields', [self::class, 'render_fields'], 10, 2);
|
||||
add_action('wp_update_nav_menu_item', [self::class, 'save'], 10, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param int $item_id
|
||||
* @param \WP_Post $item
|
||||
*/
|
||||
public static function render_fields($item_id, $item): void {
|
||||
$item_id = (int) $item_id;
|
||||
$opts = get_post_meta($item_id, 'aksrt_menu_options', true);
|
||||
$opts = is_array($opts) ? $opts : [];
|
||||
$icon = (string) ($opts['icon'] ?? '');
|
||||
$badge = (string) ($opts['badge'] ?? '');
|
||||
$badge_class = (string) ($opts['badge_class'] ?? '');
|
||||
$submenu_s = !empty($opts['submenu_s']);
|
||||
$submenu_type = (string) ($opts['submenu_type'] ?? '');
|
||||
?>
|
||||
<p class="field-aksrt-icon description description-wide">
|
||||
<label for="edit-menu-item-aksrt-icon-<?php echo esc_attr((string) $item_id); ?>">
|
||||
<?php esc_html_e('图标 class(如 fas fa-home)', 'aksrt'); ?><br>
|
||||
<input type="text" id="edit-menu-item-aksrt-icon-<?php echo esc_attr((string) $item_id); ?>"
|
||||
class="widefat" name="aksrt_menu_options[<?php echo esc_attr((string) $item_id); ?>][icon]"
|
||||
value="<?php echo esc_attr($icon); ?>">
|
||||
</label>
|
||||
</p>
|
||||
<p class="field-aksrt-badge description description-thin">
|
||||
<label for="edit-menu-item-aksrt-badge-<?php echo esc_attr((string) $item_id); ?>">
|
||||
<?php esc_html_e('徽章文字', 'aksrt'); ?><br>
|
||||
<input type="text" id="edit-menu-item-aksrt-badge-<?php echo esc_attr((string) $item_id); ?>"
|
||||
class="widefat" name="aksrt_menu_options[<?php echo esc_attr((string) $item_id); ?>][badge]"
|
||||
value="<?php echo esc_attr($badge); ?>">
|
||||
</label>
|
||||
</p>
|
||||
<p class="field-aksrt-badge-class description description-thin">
|
||||
<label for="edit-menu-item-aksrt-badge-class-<?php echo esc_attr((string) $item_id); ?>">
|
||||
<?php esc_html_e('徽章 class', 'aksrt'); ?><br>
|
||||
<input type="text" id="edit-menu-item-aksrt-badge-class-<?php echo esc_attr((string) $item_id); ?>"
|
||||
class="widefat" name="aksrt_menu_options[<?php echo esc_attr((string) $item_id); ?>][badge_class]"
|
||||
value="<?php echo esc_attr($badge_class); ?>">
|
||||
</label>
|
||||
</p>
|
||||
<p class="field-aksrt-submenu description description-wide">
|
||||
<label>
|
||||
<input type="checkbox" name="aksrt_menu_options[<?php echo esc_attr((string) $item_id); ?>][submenu_s]" value="1" <?php checked($submenu_s); ?>>
|
||||
<?php esc_html_e('启用高级子菜单(一级菜单)', 'aksrt'); ?>
|
||||
</label>
|
||||
</p>
|
||||
<p class="field-aksrt-submenu-type description description-wide">
|
||||
<label for="edit-menu-item-aksrt-submenu-type-<?php echo esc_attr((string) $item_id); ?>">
|
||||
<?php esc_html_e('高级子菜单类型', 'aksrt'); ?><br>
|
||||
<select id="edit-menu-item-aksrt-submenu-type-<?php echo esc_attr((string) $item_id); ?>"
|
||||
name="aksrt_menu_options[<?php echo esc_attr((string) $item_id); ?>][submenu_type]">
|
||||
<option value="" <?php selected($submenu_type, ''); ?>><?php esc_html_e('无', 'aksrt'); ?></option>
|
||||
<option value="graphic_card" <?php selected($submenu_type, 'graphic_card'); ?>><?php esc_html_e('图文卡片', 'aksrt'); ?></option>
|
||||
<option value="multi_column_links" <?php selected($submenu_type, 'multi_column_links'); ?>><?php esc_html_e('多列链接', 'aksrt'); ?></option>
|
||||
</select>
|
||||
</label>
|
||||
</p>
|
||||
<p class="description description-wide">
|
||||
<?php esc_html_e('高级子菜单内容(graphic_card_opts / multi_column_links_opts)可在后续可视化编辑;也可通过 meta 写入 JSON。', 'aksrt'); ?>
|
||||
</p>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* @param int $menu_id
|
||||
* @param int $menu_item_db_id
|
||||
*/
|
||||
public static function save($menu_id, $menu_item_db_id): void {
|
||||
$menu_item_db_id = (int) $menu_item_db_id;
|
||||
// phpcs:ignore WordPress.Security.NonceVerification.Missing -- WP core nav-menu form nonce.
|
||||
if (empty($_POST['aksrt_menu_options'][ $menu_item_db_id ]) || !is_array($_POST['aksrt_menu_options'][ $menu_item_db_id ])) {
|
||||
// If fields absent, leave existing meta (WP may not resubmit all fields in bulk edits).
|
||||
return;
|
||||
}
|
||||
// phpcs:ignore WordPress.Security.NonceVerification.Missing,WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
|
||||
$raw = wp_unslash($_POST['aksrt_menu_options'][ $menu_item_db_id ]);
|
||||
$existing = get_post_meta($menu_item_db_id, 'aksrt_menu_options', true);
|
||||
$existing = is_array($existing) ? $existing : [];
|
||||
|
||||
$clean = [
|
||||
'icon' => sanitize_text_field((string) ($raw['icon'] ?? '')),
|
||||
'badge' => sanitize_text_field((string) ($raw['badge'] ?? '')),
|
||||
'badge_class' => sanitize_html_class((string) ($raw['badge_class'] ?? '')),
|
||||
'submenu_s' => !empty($raw['submenu_s']),
|
||||
'submenu_type' => sanitize_key((string) ($raw['submenu_type'] ?? '')),
|
||||
];
|
||||
// Preserve complex opts not edited by this form.
|
||||
if (!empty($existing['graphic_card_opts'])) {
|
||||
$clean['graphic_card_opts'] = $existing['graphic_card_opts'];
|
||||
}
|
||||
if (!empty($existing['multi_column_links_opts'])) {
|
||||
$clean['multi_column_links_opts'] = $existing['multi_column_links_opts'];
|
||||
}
|
||||
update_post_meta($menu_item_db_id, 'aksrt_menu_options', $clean);
|
||||
}
|
||||
}
|
||||
@@ -14,10 +14,10 @@ class SchemaPageDisplay {
|
||||
'domain' => 'page_display',
|
||||
'title' => '页面&显示',
|
||||
'sections' => [
|
||||
'header-nav' => [
|
||||
'header-nav' => [
|
||||
'key' => 'header-nav',
|
||||
'title' => '顶部导航栏',
|
||||
'version' => '1.0.0',
|
||||
'version' => '1.1.0',
|
||||
'option_key' => 'aksrt_settings',
|
||||
'groups' => [
|
||||
['key' => 'layout', 'title' => '导航栏布局', 'fields' => [
|
||||
@@ -28,25 +28,7 @@ class SchemaPageDisplay {
|
||||
['label' => '毛玻璃', 'value' => 'blur'],
|
||||
]],
|
||||
['key' => 'header_max_width', 'label' => '导航栏最大宽度', 'type' => 'number', 'default' => 1200, 'min' => 0, 'max' => 1600],
|
||||
['key' => 'header_scroll_down_hide', 'label' => '下滑隐藏导航栏', 'type' => 'switch', 'default' => false],
|
||||
]],
|
||||
['key' => 'components', 'title' => '导航组件', 'fields' => [
|
||||
['key' => 'header_search_enabled', 'label' => '搜索入口', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_user_menu', 'label' => '用户菜单', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_publish_btn', 'label' => '发布按钮', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_mobile_drawer', 'label' => '移动端抽屉导航', 'type' => 'switch', 'default' => true],
|
||||
]],
|
||||
['key' => 'newposts', 'title' => '新文章提示', 'fields' => [
|
||||
['key' => 'header_newposts_enabled', 'label' => '显示新文章提示', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_newposts_text', 'label' => '提示文案', 'type' => 'input', 'default' => '有新文章'],
|
||||
['key' => 'header_newposts_radius', 'label' => '圆角', 'type' => 'number', 'default' => 12, 'min' => 0, 'max' => 30],
|
||||
['key' => 'header_newposts_class', 'label' => '样式类', 'type' => 'input', 'default' => ''],
|
||||
]],
|
||||
['key' => 'color', 'title' => '颜色设置', 'fields' => [
|
||||
['key' => 'header_theme_custom', 'label' => '自定义导航栏颜色', 'type' => 'switch', 'default' => false],
|
||||
['key' => 'header_theme_bg_custom', 'label' => '自定义背景色', 'type' => 'color', 'default' => ''],
|
||||
['key' => 'header_theme_bg', 'label' => '背景颜色(备选)', 'type' => 'color', 'default' => ''],
|
||||
['key' => 'header_theme_color_custom', 'label' => '自定义文字颜色', 'type' => 'color', 'default' => ''],
|
||||
['key' => 'header_scroll_down_hide', 'label' => '下滑隐藏导航栏', 'type' => 'switch', 'default' => true],
|
||||
]],
|
||||
['key' => 'layout-type', 'title' => '布局类型', 'fields' => [
|
||||
['key' => 'header_layout', 'label' => '桌面端布局', 'type' => 'radio', 'default' => '1', 'options' => [
|
||||
@@ -64,9 +46,35 @@ class SchemaPageDisplay {
|
||||
['label' => '右侧滑出', 'value' => 'right'],
|
||||
]],
|
||||
]],
|
||||
['key' => 'components', 'title' => '导航组件', 'fields' => [
|
||||
['key' => 'header_search_enabled', 'label' => '搜索入口', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_user_menu', 'label' => '用户菜单', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_publish_btn', 'label' => '发布按钮', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_mobile_drawer', 'label' => '移动端抽屉导航', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_nav_pay_vip', 'label' => '导航栏开通会员按钮', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_nav_user_pay_vip', 'label' => '用户框开通会员按钮', 'type' => 'switch', 'default' => true],
|
||||
]],
|
||||
['key' => 'newposts', 'title' => '发布按钮', 'fields' => [
|
||||
['key' => 'header_newposts_enabled', 'label' => '启用发布按钮', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'header_newposts_text', 'label' => '按钮文案', 'type' => 'input', 'default' => '<i class="fa fa-pencil"></i> 发布'],
|
||||
['key' => 'header_newposts_radius', 'label' => '圆角', 'type' => 'number', 'default' => 20, 'min' => 0, 'max' => 30],
|
||||
['key' => 'header_newposts_class', 'label' => '样式类', 'type' => 'input', 'default' => ''],
|
||||
['key' => 'header_newposts_types', 'label' => '发布类型', 'type' => 'select', 'default' => ['post'], 'options' => [
|
||||
['label' => '文章', 'value' => 'post'],
|
||||
['label' => '帖子', 'value' => 'topic'],
|
||||
['label' => '商品', 'value' => 'product'],
|
||||
]],
|
||||
['key' => 'header_user_newposts_text', 'label' => '用户卡发布文案', 'type' => 'input', 'default' => '发布内容'],
|
||||
]],
|
||||
['key' => 'color', 'title' => '颜色设置', 'fields' => [
|
||||
['key' => 'header_theme_custom', 'label' => '自定义导航栏颜色', 'type' => 'switch', 'default' => false],
|
||||
['key' => 'header_theme_bg_custom', 'label' => '自定义背景色', 'type' => 'color', 'default' => ''],
|
||||
['key' => 'header_theme_bg', 'label' => '背景颜色(备选)', 'type' => 'color', 'default' => ''],
|
||||
['key' => 'header_theme_color_custom', 'label' => '自定义文字颜色', 'type' => 'color', 'default' => ''],
|
||||
]],
|
||||
],
|
||||
],
|
||||
'header-components' => [
|
||||
'header-components' => [
|
||||
'key' => 'header-components',
|
||||
'title' => '顶部多功能组件',
|
||||
'description' => '配置顶部组件的显示范围、设备规则、轮播参数、搜索覆盖层与图标卡片。幻灯片图片/文案内容请到「Hero 轮播」「Banner 轮播」管理。',
|
||||
|
||||
Reference in new issue
Block a user