php - WP 中的自定义 "sidebars"

Question

我在 wordpress 网站上运行 Avada 主题和 WooCommerce。

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

我知道你得到了这样的原始侧边栏(直接从原始 archive-product.php 复制):

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

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

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

虽然这不起作用。由于这必须只能在响应式设备上显示，我们使用融合的自定义 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 主题不够熟悉，不知道其中一些选项的含义，并且您的代码块没有显示 register_sidebar() 调用，即使 Avada 必须使用它。

为了使事情更简单，您可以使用标准的 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 } ?>