将小部件区域添加到顶部 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');
}
}
您需要在 51
和 59
之间更改优先级,例如:
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
强制执行。
我正在尝试在我当前的店面主题中添加一个小部件区域。我使用了下面的代码,但它将小部件放在了我当前的 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');
}
}
您需要在 51
和 59
之间更改优先级,例如:
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
强制执行。