文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >自定义wordpress主题以包含一个新的小部件层

问自定义wordpress主题以包含一个新的小部件层
EN

Stack Overflow用户
提问于 2016-02-11 14:18:00
回答 1查看 40关注 0票数 0
关联问题
换一批

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

我之所以想要这样，是因为我想要一个col-xs-12小部件大小的文本直接在横幅下面。接下来是that....but下面的3个col-xs-4框，我发现这个主题很难实现。

我的主题有‘顶部’和‘底部’各有4个可能的部分。似乎，如果我只有一个小部件在‘顶部’，它分配它-xs-12-完美！但是现在我想在它们自己的行下面设置3xcol-xs-4，但是我不能使用“top”小部件，因为这样可以将col-xs-12减少到col-xs-3，因为主题中的代码如下：

代码语言：javascript
运行
AI代码解释
复制
   // 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元素，给它-xs-12，然后中间与3，它将给每个col-xs-4 :)

我已经找到了文件inc/sleeky_widgets.php，并将其修改为包含一个mid1、mid2、mid3、mid4 option....as，如下所示：

代码语言：javascript
运行
AI代码解释
复制
<?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 . '"';
}

但是，当我查看添加新小部件的边栏时，我没有在其中看到我的新选项。它看起来如下：

​

如何使新的小部件层显示在此菜单中，并与系统中已经定义的顶层和底层完全相同。

css
wordpress
wordpress-theming
php
广告

AIGC及大模型加速场景解决方案

为有AI内容生成、大模型需求的企业客户快速打造一站式方案
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-11 14:41:50

在兜圈子之后，我找到了另一个名为:侧栏-top.php的文件。

在增加如下之后：

代码语言：javascript
运行
AI代码解释
复制
<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>

我的菜单选项出现了，表现得很棒！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35351205

复制
相关文章
angular4实战（4）ngrx
javascriptnode.jshttps网络安全redux
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78161765
j_bleach
2019/07/02
1.2K0
angular4实战（4）ngrx
Angular 4 组件通信
typescript
最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。
半指温柔乐
2020/06/10
9300
忘记 Angular 3：Google 将发布 Angular 4
typescriptjavascriptangularjs
2016年11月，当Google详细说明将在Angular 2到来的短短6个月后发布Angular 3的计划时，每个人都大吃一惊。现在，事实证明终究“No Angular 3”发布。相反，Google将于2017年3月正式推出其流行的JavaScript框架的第4版。
疯狂的技术宅
2019/03/28
1K0
忘记 Angular 3：Google 将发布 Angular 4
angular4实战（1） angular-cli
angularjshttps网络安全c++
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78077403
j_bleach
2019/07/02
6920
angular4实战（1） angular-cli
（4）Angular的开发
httpangularjsjavascripthtml
angular框架，库，是一款非常优秀的前端高级JS框架，有了这个框架就可以轻松构建SPA应用程序，通过指令宽展了HTML，通过表达式绑定数据到HTML。
达达前端
2019/07/22
3.1K0
Angular4 实战开发
angularjs
本文介绍了Angular4实战开发系列文章，该系列文章以用为主，结合通俗易懂的实例来让大家理解常用的知识点。主要内容包括：Angular CLI、创建组件、使用CSS美化组件、属性和事件绑定、组件通讯、创建指令、创建服务、创建管道、创建表单和路由导航、动画。通过本系列文章，用户可以快速掌握Angular4的实战开发技能。
IMWeb前端团队
2018/01/08
7270
Angular企业级开发(4)-ngResource和REST介绍
angularjs
一、RESTful介绍 RESTful维基百科 REST（表征性状态传输，Representational State Transfer）是Roy Fielding博士在2000年他的博士论文中提出
八哥
2018/01/18
8560
Angular企业级开发(4)-ngResource和REST介绍
高级 Angular 组件模式 (4)
angularjs
命名冲突不仅存在于指令的选择器之间，同时也会存在于指令的Inputs和Outputs属性，当这些属性名一样时，Angular并不会进行提示，它会按原本的逻辑正常工作。这种情况有时候是我们希望看到的，有些时候却不是。
littlelyon
2018/10/19
7890
Angular4 实战开发
angularjs
《Angular 实战系列》目前处于章节不定，内容不定阶段，这一系列文章不会长篇大论的讲解概念，而是以用为主，结合通俗易懂的实例来让大家理解常用的知识点。
IMWeb前端团队
2019/12/06
5580
Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）
angularjs
官方文档 ：https://github.com/angular/angular-cli
易兒善
2018/08/21
1.1K0
Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）
SPA网站SEO优化PhantomJs
ajaxseoangularjs爬虫
随着web2.0的兴起，ajax的时代已经成为了事实，更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来，Single Page Application已经为大家所熟悉了。如今常见的SPA程序，restfull和前端MDV之类的框架能够实实在在的减少我们的代码开发量，让我更多的注意力关注在真正的业务逻辑上。在众多前端MDV框架从博客中可以看出来笔者还是钟爱于angular，然而服务端平台的选择的话：在.net平台笔者会首选webapi+oData,jvm平台spring restfull。
javascript.shop
2019/09/04
2K0
SPA网站SEO优化PhantomJs
Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）
angularjs
安装后还需要引用weui 样式以及我们的font-awesome图标苦，在我们项目index.html中引用
易兒善
2018/08/21
2.2K0
Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）
4、Angular JS 学习笔记 – 模块 [翻译中]
编程算法vr 视频解决方案angularjslinux
你可以认为一个模块就是一个app的不同部分，controllers,services,filters,directives,等。
前Thoughtworks-杨焱
2021/12/08
9660
angular4实战（2） router
angularjs
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78077844
j_bleach
2019/07/02
5750
angular4实战（2） router
ionic4 -- angular 跳转页面
其他
ionic4 与前辈们最大的不同就是通过angular引入了route，这样每次跳转的时候只需要直接跳转对应的路由地址就可以了，给了路由器上的解耦，也解决了原来的RXjs与Events的子页面反复跳转重复添加监听问题【挖坑，具体操作等后面进一步深入研究】。通过翻阅源码，我们看到：
stormKid
2018/09/12
2.9K0
ionic4 -- angular 跳转页面
Angular4记账webApp练手项目之五（Angular4项目中创建service（服务）和使用http模块）
angularjs
ng给我们创建的模块account.service.ts，内容如下。 有关@Injectable和@Component，都是angular中的关键字或者关键注解。通过注解来表明js文件的类型，以方便angular框架进行调用。 @Component表示该js文件所导出的类是组件。 @Injectable表示该js文件所导出的文件是服务，而服务是可以通过注入来创建的。 服务的注入，是angular中用来剥离controller和业务逻辑的方式。
易兒善
2018/08/21
1.3K0
Angular4记账webApp练手项目之五（Angular4项目中创建service（服务）和使用http模块）
Angular2 VS Angular4 深度对比：特性、性能
angularjsecmascript网络安全typescript
在Web应用开发领域，Angular被认为是最好的开源JavaScript框架之一。
葡萄城控件
2022/05/09
8.8K0
Angular2 VS Angular4 深度对比：特性、性能
angular4 Flex Layout开发实践
angularjshttps网络安全
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/77513213
j_bleach
2019/07/02
1.1K0
angular4 Flex Layout开发实践
Angular Input和Output
typescriptangularjs
Input 是属性装饰器，用来定义组件内的输入属性。在实际应用场合，我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成，当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。
阿宝哥
2019/11/06
2.4K0
点击加载更多

相似问题

在hashbang之前使用nginx、angular.js和prerender.io

20

将Angular .htaccess与Prerender.io .htaccess合并

123

Angular4，材料和Angular4

23

基于HTML Unit和prerender.io的Angular搜索引擎优化

11

Beego和Angular 4

18
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档