如何在wordpress中仅当屏幕宽度大于1682px时注册并显示第二个侧边栏？

Question

我想为宽于 1682 像素的 destop/电视屏幕显示 336 像素宽度的第二个侧边栏（所有页面的左侧）。

\n

如果第二个侧边栏有自己的类，那么我可以使用媒体查询功能内的 {display: none;} CSS 标签隐藏它。

\n

目前，我的模板只有 1 个侧边栏，可以显示在右侧或左侧。目前它位于右侧。

\n

这个脚本已经存在于我的functions.php中

\n

\n/*-----------------------------------------------------------------------------------*/\n//  Register widgetized areas, including two sidebars and four widget-ready columns in the footer.\n//  To override skeleton_widgets_init() in a child theme, remove the action hook and add your own\n//  function tied to the init hook.\n/*-----------------------------------------------------------------------------------*/\n\nif ( !function_exists( \'skeleton_widgets_init\' ) ) {\n\nfunction skeleton_widgets_init() {\n        // Area 1, located at the top of the sidebar.\n        register_sidebar( array(\n        \'name\' => __( \'Posts Widget Area\', \'smpl\' ),\n        \'id\' => \'sidebar-1\',\n        \'description\' => __( \'Shown only in Blog Posts, Archives, Categories, etc.\', \'smpl\' ),\n        \'before_widget\' => \'<div id="%1$s" class="widget-container %2$s">\',\n        \'after_widget\' => \'</div>\',\n        \'before_title\' => \'<h3 class="widget-title">\',\n        \'after_title\' => \'</h3>\',\n    ) );\n\n\n    // Area 2, located below the Primary Widget Area in the sidebar. Empty by default.\n    register_sidebar( array(\n        \'name\' => __( \'Pages Widget Area\', \'smpl\' ),\n        \'id\' => \'sidebar-2\',\n        \'description\' => __( \'Shown only in Pages\', \'smpl\' ),\n        \'before_widget\' => \'<div id="%1$s" class="widget-container %2$s">\',\n        \'after_widget\' => \'</div>\',\n        \'before_title\' => \'<h3 class="widget-title">\',\n        \'after_title\' => \'</h3>\',\n    ) );\n\n    // Area 3, located in the footer. Empty by default.\n    register_sidebar( array(\n        \'name\' => __( \'First Footer Widget Area\', \'smpl\' ),\n        \'id\' => \'footer-widget-area-1\',\n        \'description\' => __( \'The first footer widget area\', \'smpl\' ),\n        \'before_widget\' => \'<div class="%1$s">\',\n        \'after_widget\' => \'</div>\',\n        \'before_title\' => \'<h3 class="widget-title">\',\n        \'after_title\' => \'</h3>\',\n    ) );\n\n    // Area 4, located in the footer. Empty by default.\n    register_sidebar( array(\n        \'name\' => __( \'Second Footer Widget Area\', \'smpl\' ),\n        \'id\' => \'footer-widget-area-2\',\n        \'description\' => __( \'The second footer widget area\', \'smpl\' ),\n        \'before_widget\' => \'<div class="%1$s">\',\n        \'after_widget\' => \'</div>\',\n        \'before_title\' => \'<h3 class="widget-title">\',\n        \'after_title\' => \'</h3>\',\n    ) );\n\n    // Area 5, located in the footer. Empty by default.\n    register_sidebar( array(\n        \'name\' => __( \'Third Footer Widget Area\', \'smpl\' ),\n        \'id\' => \'footer-widget-area-3\',\n        \'description\' => __( \'The third footer widget area\', \'smpl\' ),\n        \'before_widget\' => \'<div class="%1$s">\',\n        \'after_widget\' => \'</div>\',\n        \'before_title\' => \'<h3 class="widget-title">\',\n        \'after_title\' => \'</h3>\',\n    ) );\n\n    // Area 6, located in the footer. Empty by default.\n    register_sidebar( array(\n        \'name\' => __( \'Fourth Footer Widget Area\', \'smpl\' ),\n        \'id\' => \'footer-widget-area-4\',\n        \'description\' => __( \'The fourth footer widget area\', \'smpl\' ),\n        \'before_widget\' => \'<div class="%1$s">\',\n        \'after_widget\' => \'</div>\',\n        \'before_title\' => \'<h3 class="widget-title">\',\n        \'after_title\' => \'</h3>\',\n    ) );\n}\n\n/** Register sidebars by running skeleton_widgets_init() on the widgets_init hook. */\n\nadd_action( \'widgets_init\', \'skeleton_widgets_init\' );\n\n}\n\n/** Next code follows from this point...\n

\n

这是 sidebar.php 上的代码

\n

<?php\n/**\n * The Sidebar containing the primary blog sidebar\n *\n */\n\n// hide sidebars with sidebars=false custom field\nif (is_singular() && get_post_meta($post->ID, "sidebars", $single = true) ==  "false") {\n    return;\n}\n\nif ( is_active_sidebar( \'sidebar-1\' ) ) {\n        do_action(\'skeleton_before_sidebar\');\n        dynamic_sidebar( \'sidebar-1\' );\n        do_action(\'skeleton_after_sidebar\');\n}\n\n?>\n

\n

根据本指南，https://wordpress.stackexchange.com/questions/135403/display-sidebar-that-c ​​reated-in-functions-php，我将第一个答案的代码添加到functions.php文件中

\n

// 2nd Sidebar\nadd_action( \'widgets_init\', \'wpsites_add_widget\' );\n\nfunction wpsites_add_widget() {\n\nregister_sidebar(array(\n\'name\'=>\'Sidebar-Aries\',\n\'id\' => \'sidebar-aries\',\n\'description\' =>\'Display all the contents of sidebar at Aries page.\',\n\'before_widget\' => \'\',\n\'after_widget\' => \'\',\n\'before_title\' => \'\',\n\'after_title\' => \'\',\n));\n}\n

\n

然后将其他代码添加到 single.php 文件中

\n

<?php\n/**\n * The Template for displaying all single posts.\n *\n * @package WordPress\n * @subpackage skeleton\n * @since skeleton 0.1\n */\n\nget_header();\ndo_action(\'skeleton_before_content\');\nget_template_part( \'loop\', \'single\' );\ndo_action(\'skeleton_after_content\');\nget_sidebar();\nget_footer();\n\n<?php if ( is_active_sidebar( \'sidebar-aries\' ) ) : ?>\n<ul id="sidebar">\n    <?php dynamic_sidebar( \'sidebar-aries\' ); ?>\n</ul>\n<?php endif; ?>\n?>\n

\n

然后我访问“外观”>“小部件”并检查是否有任何新的侧边栏，但没有。

\n

我还尝试了另一个问题的代码，但它对我来说也不起作用。

\n

然后我按照本指南进行操作 - https://smallbusiness.chron.com/build-website-php-sidebar-60499.html

\n

\n

步骤：5 - 在“functions.php”中找到注册侧边栏的代码行——它们通常位于顶部附近。编辑代码，\n将 \xe2\x80\x9cregister_sidebar\xe2\x80\x9d 设为复数，并在下面一行的括号之间添加数字 \xe2\x80\x9c2\xe2\x80\x9d，如下所示：

\n

\n

if ( function_exists(\'register_sidebars\') ) register_sidebars(2);

\n

\n

单击“更新文件”。现在可以通过转到\n“外观”然后“小部件”来使用侧边栏。

\n

\n

但我的functions.php 上的代码看起来有点不同，并且不起作用。

\n

我应该怎么办？

\n

Answer 1

步骤一：打开functions.php并粘贴以下代码：

  function __widgets_init() {
    register_sidebar( array (
    'name' => __('2nd Sidebar', 'textdomain'),
    'id' => 'sidebar-secondary',
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => "</li>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
    ) );
  }
  add_action( 'widgets_init', '__widgets_init' );

第二步：现在，复制sidebar.php并粘贴它并将其重命名为：sidebar-secondary.php。现在删除里面的所有代码，然后粘贴以下内容：

    <aside id="sidebar-secondary-wrapper" role="complementary">
      <?php if ( is_active_sidebar('sidebar-secondary') ) : ?>
        <div id="secondary" class="widget-area">
          <ul class="xoxo">
            <?php dynamic_sidebar('sidebar-secondary'); ?>
          </ul>
        </div>
      <?php endif; ?>
    </aside>

第三步：进入index.php您想要的文件或任何其他文件。将代码粘贴到或部分get_sidebar( 'secondary' );中的适当位置，如下所示：：get_sidebar();get_footer();

<?php get_header();
// paste here: get_sidebar( 'secondary' );
...
...

或者

<?php get_header();
...
...
// paste here: get_sidebar( 'secondary' );
get_sidebar();
get_footer();
?>

第四步： 现在您的布局由两个侧边栏组成。休息由你决定。

@media screen and (max-width: 1681px) {
  #secondary-sidebar-wrapper {
    display: none !important;
  }
}