自定义wordpress主题以包含新的小部件层

Question

我正在使用这个wordpress主题https://wordpress.org/themes/sleeky/，我希望包含一个新的小部件层。

我想要这个的原因是，我希望在横幅下方直接显示col-xs-12小部件文本。接着是下面的3个col-xs-4盒子....但我发现用这个主题很难实现。

我的主题有'顶部'和'底部'各有4个可能的部分。看来如果我在'top'中只有一个小部件它将它命名为col-xs-12 - 完美！但是现在我想在他们自己的行下面使用3x col-xs-4，但是我不能使用'顶部'小部件，因为在主题中这个代码将col-xs-12减少为col-xs-3：

   // lets setup the inset top group 
    function sleeky_topgroup() {
        $count = 0;
        if ( is_active_sidebar( 'top1' ) )
            $count++;
        if ( is_active_sidebar( 'top2' ) )
            $count++;
        if ( is_active_sidebar( 'top3' ) )
            $count++;       
        if ( is_active_sidebar( 'top4' ) )
            $count++;
        $class = '';
        switch ( $count ) {
            case '1':
                $class = 'col-md-12';
                break;
            case '2':
                $class = 'col-md-6';
                break;
            case '3':
                $class = 'col-md-4';
                break;
            case '4':
                $class = 'col-md-3';
                break;
        }
        if ( $class )
            echo $class;
    }

因此......我想要包含另一个'中间'的图层，所以我可以使用'top'和1个元素，给它col-xs-12然后中间用3，这将给每个col-xs -4：）

我找到了文件inc / sleeky_widgets.php，并将其更改为包含mid1，mid2，mid3，mid4选项....如下所示：

<?php
/*
=================================================
sleeky Date Theme Widget Positions
This Files will show widgets on the back end of the file
@package sleeky
=================================================
*/
function sleeky_widgets_init() {

    register_sidebar( array(
        'name' => __( 'Blog Sidebar', 'sleeky' ),
        'id' => 'blogright',
        'description' => __( 'This is the right sidebar column that appears on the blog but not the pages.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><hr/>',
    ) );
    register_sidebar( array(
        'name' => __( 'Page Sidebar', 'sleeky' ),
        'id' => 'pagesidebar',
        'description' => __( 'This is the right sidebar column that appears on the blog but not the pages.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><hr/>',
    ) );
    register_sidebar( array(
        'name' => __( 'Banner Wide', 'sleeky' ),
        'id' => 'banner-wide',
        'description' => __( 'This is a full width showcase banner for images or media sliders that can display on your pages.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><hr/>'
    ) );

    register_sidebar( array(
        'name' => __( 'Top 1', 'sleeky' ),
        'id' => 'top1',
        'description' => __( 'This is the 1st top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Top 2', 'sleeky' ),
        'id' => 'top2',
        'description' => __( 'This is the 2nd top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Top 3', 'sleeky' ),
        'id' => 'top3',
        'description' => __( 'This is the 3rd top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Top 4', 'sleeky' ),
        'id' => 'top4',
        'description' => __( 'This is the 4th top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );

    register_sidebar( array(
        'name' => __( 'Mid 1', 'sleeky' ),
        'id' => 'mid1',
        'description' => __( 'This is the 1st mid widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Mid 2', 'sleeky' ),
        'id' => 'mid2',
        'description' => __( 'This is the 2nd top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Mid 3', 'sleeky' ),
        'id' => 'mid3',
        'description' => __( 'This is the 3rd top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Mid 4', 'sleeky' ),
        'id' => 'mid4',
        'description' => __( 'This is the 4th top widget position located just below the banner area.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );
    register_sidebar( array(
        'name' => __( 'Bottom 1', 'sleeky' ),
        'id' => 'bottom1',
        'description' => __( 'This is the first bottom widget position located in a coloured background area just above the footer.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Bottom 2', 'sleeky' ),
        'id' => 'bottom2',
        'description' => __( 'This is the second bottom widget position located in a coloured background area just above the footer.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Bottom 3', 'sleeky' ),
        'id' => 'bottom3',
        'description' => __( 'This is the third bottom widget position located in a coloured background area just above the footer.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );    
    register_sidebar( array(
        'name' => __( 'Bottom 4', 'sleeky' ),
        'id' => 'bottom4',
        'description' => __( 'This is the fourth bottom widget position located in a coloured background area just above the footer.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3><span class="dotbox"></span>',
        'after_title' => '</h3><div class="dotlinebox"><span class="dot"></span></div>',
    ) );
    register_sidebar( array(
        'name' => __( 'Call to Action', 'sleeky' ),
        'id' => 'cta',
        'description' => __( 'This is a call to action which is normally used to make a message stand out just above the main content.', 'sleeky' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );

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

/**
 * Count the number of widgets to enable resizable widgets
 */

// lets setup the inset top group 
function sleeky_topgroup() {
    $count = 0;
    if ( is_active_sidebar( 'top1' ) )
        $count++;
    if ( is_active_sidebar( 'top2' ) )
        $count++;
    if ( is_active_sidebar( 'top3' ) )
        $count++;       
    if ( is_active_sidebar( 'top4' ) )
        $count++;
    $class = '';
    switch ( $count ) {
        case '1':
            $class = 'col-md-12';
            break;
        case '2':
            $class = 'col-md-6';
            break;
        case '3':
            $class = 'col-md-4';
            break;
        case '4':
            $class = 'col-md-3';
            break;
    }
    if ( $class )
        echo $class;
}

function sleeky_middlegroup() {
    $count = 0;
    if ( is_active_sidebar( 'mid1' ) )
        $count++;
    if ( is_active_sidebar( 'mid2' ) )
        $count++;
    if ( is_active_sidebar( 'mid3' ) )
        $count++;       
    if ( is_active_sidebar( 'mid4' ) )
        $count++;
    $class = '';
    switch ( $count ) {
        case '1':
            $class = 'col-md-12';
            break;
        case '2':
            $class = 'col-md-6';
            break;
        case '3':
            $class = 'col-md-4';
            break;
        case '4':
            $class = 'col-md-3';
            break;
    }
    if ( $class )
        echo $class;
}


// lets setup the content bottom group 
function sleeky_contentbottomgroup() {
    $count = 0;
    if ( is_active_sidebar( 'contentbottom1' ) )
        $count++;
    if ( is_active_sidebar( 'contentbottom2' ) )
        $count++;
    if ( is_active_sidebar( 'contentbottom3' ) )
        $count++;       
    if ( is_active_sidebar( 'contentbottom4' ) )
        $count++;
    $class = '';
    switch ( $count ) {
        case '1':
            $class = 'dsp-md-12';
            break;
        case '2':
            $class = 'dsp-md-6';
            break;
        case '3':
            $class = 'dsp-md-4';
            break;
        case '4':
            $class = 'dsp-md-3';
            break;
    }
    if ( $class )
        echo 'class="' . $class . '"';
}

// lets setup the bottom group 
function sleeky_bottomgroup() {
    $count = 0;
    if ( is_active_sidebar( 'bottom1' ) )
        $count++;
    if ( is_active_sidebar( 'bottom2' ) )
        $count++;
    if ( is_active_sidebar( 'bottom3' ) )
        $count++;       
    if ( is_active_sidebar( 'bottom4' ) )
        $count++;
    $class = '';
    switch ( $count ) {
        case '1':
            $class = 'col-md-12';
            break;
        case '2':
            $class = 'col-md-6';
            break;
        case '3':
            $class = 'col-md-4';
            break;
        case '4':
            $class = 'col-md-3';
            break;
    }
    if ( $class )
        echo 'class="' . $class . '"';
}

然而，当我查看添加新窗口小部件的侧栏时 - 我没有看到我的新选项。它看起来如下：

如何在此菜单中显示我的新窗口小部件，其行为与系统中已定义的顶层和底层完全相同。

Answer 1

在摆弄后，我找到了另一个名为：sidebar-top.php

的文件

并在添加：

之后

<div class="sleeky_widget_mid">
    <div class="container">
            <div class="row">
                <div id="mid1" class="<?php sleeky_middlegroup(); ?>" role="complementary">
                    <?php dynamic_sidebar( 'mid1' ); ?>
                </div><!-- #top1 -->

                <div id="mid2" class="<?php sleeky_middlegroup(); ?>" role="complementary">
                    <?php dynamic_sidebar( 'mid2' ); ?>
                </div><!-- #top2 -->          

                <div id="mid3" class="<?php sleeky_middlegroup(); ?>"  role="complementary">
                    <?php dynamic_sidebar( 'mid3' ); ?>
                </div><!-- #top3 -->

                <div id="mid4" class="<?php sleeky_middlegroup(); ?>"  role="complementary">
                    <?php dynamic_sidebar( 'mid4' ); ?>
                </div><!-- #top3 -->

            </div>
    </div>
</div>

我的菜单选项显示出来并表现得非常好！