b2主题页眉菜单栏轮播公告[wordpressb2主题美化]

b2主题页眉菜单栏轮播公告

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]

1、将其中的js文件放入到b2/Assets/fontend中,并在b2目录下找到header.php,引入必要的js文件。

  1. <script src="<?php echo get_template_directory_uri() ?>/Assets/fontend/jquery-1.10.2.min.js"></script><!--页眉轮播引入-->
  2. <script src="<?php echo get_template_directory_uri() ?>/Assets/fontend/sinabeta.js"></script><!--页眉轮播引入-->

效果图:

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]-度崩网-几度崩溃

2、注册页眉右侧菜单,用于放置轮播的内容,在b2目录下找到核心文件php,打开找到72行左右,新增页眉右侧菜单。

  1. 'top-zian' => __( '页眉右侧菜单', 'b2' ),

效果图:

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]-度崩网-几度崩溃

3、开始在页眉处增加页眉右侧菜单显示,打开文件目录:/b2/Modules/Templates下的php文件,加入下列代码

(1)在101行左右加入下列代码

  1. $tian = array(
  2. 'theme_location' => 'top-zian',
  3. 'container_id'=>'s3',
  4. 'container_class'=> 'scrollDiv',
  5. 'echo' => FALSE
  6. );
  7. $zianv = wp_nav_menu($tian);

效果图:

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]-度崩网-几度崩溃

(2)增加CSS,此处的CSS可以放到相应的CSS文件之中,也可以就放在下图位置中,你随意就好。在118行处

  1. .header-banner-right {opacity: 1;transition: opacity .5s;}
  2. .header-banner-right.hidden{opacity: 0;transition: opacity .5s;}
  3. .header-banner-right ul{align-items: center;}
  4. .header-banner-right .menu li{margin: 5px;font-size: 15px;}
  5. .header-banner-right .menu li.current-menu-item a{opacity: 1;color:#fff}
  6. .scrollDiv {height: 25px;overflow: hidden;}
  7. .scrollDiv li {height: 25px;}
  8. @media screen and (max-width:700px){.header-banner-content .header-banner-right{display: none}}

效果图:

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]-度崩网-几度崩溃

(3)添加页眉右侧菜单显示位置,在当前文件下129行处

  1. <div class="header-banner-right">
  2. <i class="b2font b2-laba" style="font-size: 25px;">|</i>'.$zianv.'
  3. </div>

效果图:

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]-度崩网-几度崩溃

4、至此代码已全部完成部署,此时去到站点后台调用即可

效果图:

b2主题页眉菜单栏轮播公告[wordpressb2主题美化]-度崩网-几度崩溃

特别声明:

  • 代码中的js文件来自于互联网,不能保证其安全性,部署需要谨慎。
  • 此教程可随意引用发布并商用,但别说是自己首创。
  • CSS已加入自适应代码,可完美自适应。
  • 请给彼此一份尊重,静静的写代码,写到世界充满爱!

文章转载网络,经作者授权发布!

    WordPress教程

    怎么获取当前页面、日志链接?[wordpress开发教程]

    2020-5-9 13:38:21

    WordPress教程

    wordpress怎么修改后台登录地址来提高安全性?[wordpress开发教程]

    2020-5-18 13:06:08

    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    ⚠️
    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
    若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    3 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
    1. 可爱昵称

      这个不错,要是放子主题就完美了

      • 盾给网

        对呀。。我也是这么想的。。

    2. 皮皮圈

      看着不赖,给网站美化美化~~

    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索