WP中的自定义“侧边栏”

Question

我在 wordpress 网站上与 WooCommerce 一起运行 Avada 主题。

问题是我试图在页面顶部获取搜索功能，但仅限于响应模式（在移动设备上）。我已经能够在 woocommerce 中为侧边栏添加第三个选项。这显示在配置中（在哪里选择应该进入哪些小部件）。但我无法让它显示出来。

我知道你会得到像这样的原始侧边栏（直接从原始 archive-product.php 复制）：

<?php
        do_action( 'woocommerce_sidebar' );
?> 

所以我认为应该可以使用以下行调用我们自己的侧边栏：

<?php
        do_action( 'woo_sidebar-3' );
?>

但这不起作用。 由于这只能在响应式设备上显示，我们使用了一个自定义的 fusion 的 CSS 选项来隐藏其他侧边栏，方式如下：

@media only screen and (max-width: 720px) {
    #sidebar {
        display: none;
    }
}

这当然太简单了，因为它会阻止所有侧边栏。但这是我们可以轻松改变的。到目前为止，我们创建的第三个侧边栏并未显示在响应式网站或桌面版网站上。而其他的确实显示在桌面上，但不显示在响应式上（根据需要）。

编辑-：

所以我尝试了以下代码：

<?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('woo_sidebar_3') ) { ?>
     <p>Oops... this displays if the topbar is not set up</p>
<?php } ?>

它显示代码中给出的错误，因此它会尝试在我们创建时拉出侧边栏。但它没有显示。是因为以下可能无法正常工作吗？ ：

'woo_sidebar_3' => array(
    'label'           => esc_html__( 'Global WooCommerce Product Sidebar 3', 'Avada' ),
    'description'     => esc_html__( 'Custom sidebar 3', 'Avada' ),
    'id'              => 'woo_sidebar_3',
    'default'         => 'None',
    'type'            => 'select',
    'choices'         => $sidebar_options,
    'active_callback' => array( 'Avada_Options_Conditionals', 'is_woo' ),

哪个是从右上方复制的，称为 woo_sidebar_2？

编辑 2 -:

Here is a JSfiddle 包含完整的 sidebars.php 代码和 dynamic_sidebar 代码（作为 HTML）。当您运行 te 脚本时，我指向的错误也可见。

Answer 1

我对 Avada 主题不够熟悉，不知道其中一些选项的含义，即使 Avada 必须使用它，您的代码块也没有显示 register_sidebar() 调用。

为了让事情更简单，您可以使用标准的 WordPress 代码registering a widget area

在您的主题（最好是子主题）中添加：

function so_38033924_widgets_init() {

    register_sidebar( array(
        'name'          => __( 'Global WooCommerce Product Sidebar 3', 'your-theme' ),
        'id'            => 'woo_sidebar_3',
        'description'   => __( 'Custom sidebar 3', 'your-theme' ),
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
    ) );

}
add_action( 'widgets_init', 'so_38033924_widgets_init' );

您需要确保before_widget、before_title 类型的参数与父主题匹配，以便您的小部件获得相同的样式。

然后你的模板代码对我来说是正确的：

<?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('woo_sidebar_3') ) { ?>
     <p>Oops... this displays if the topbar is not set up</p>
<?php } ?>