将小部件区域添加到顶部 header

Adding widget area to top header

我正在尝试在我当前的店面主题中添加一个小部件区域。我使用了下面的代码,但它将小部件放在了我当前的 top-header 下方,这被称为辅助导航。我用 these hooks 来制作代码。

应用后,它会在二级导航下方创建一个小部件区域,但我需要它位于二级导航内。任何帮助将不胜感激。

// Adding the widget area.
if (function_exists('register_sidebar')) {
    register_sidebar(array(
    'name' => 'Extra Header Widget Area',
    'id' => 'extra-widget-area',
    'description' => 'Extra widget area after the header',
    'before_widget' => '<div class="widget my-extra-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
}


// placing the widget
add_action ('storefront_header', 'add_my_widget_area', 10);
function add_my_widget_area() {
  if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
  }
}

您需要在 5159 之间更改优先级,例如:

add_action ('storefront_header', 'add_my_widget_area', 55);

因为在 storefront_header 挂钩中,这些是当前的优先级:

for 'storefront_header' hook:
@hooked ‘storefront_skip_links’, 0
@hooked ‘storefront_social_icons’, 10
@hooked ‘storefront_site_branding’, 20
@hooked ‘storefront_secondary_navigation’, 30
@hooked ‘storefront_product_search’, 40
@hooked ‘storefront_primary_navigation’, 50
@hooked ‘storefront_header_cart’, 60

然后您需要使用自定义 css 规则优化显示,并在某些规则中使用 !important 强制执行。