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

Question

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

我想要这个的原因是我想要一个 col-xs-12 小部件大小的文本正下方的横幅。下面是 3 个 col-xs-4 框....但我发现这个主题很难实现。

我的主题有“顶部”和“底部”，每个都有 4 个可能的部分。似乎如果我在“顶部”中只有 1 个小部件，它会分配给它 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;
    }

因此...我想包括另一个“中间”层，这样我就可以将“顶部”与 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>

我的菜单选项出现了并且表现非常好!