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

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

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

效果图：

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

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

效果图：

3、开始在页眉处增加页眉右侧菜单显示，打开文件目录：/b2/Modules/Templates下的Header.php文件，101行左右加入下列代码

$tian = array(
            'theme_location' => 'top-zian',
            'container_id'=>'s3',
            'container_class'=> 'scrollDiv',            
            'echo' => FALSE
        );

$zianv = wp_nav_menu($tian);

效果图：

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

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

效果图：

5、添加页眉右侧菜单显示位置，在当前文件下129行处

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

效果图:

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

效果图：

[btn href="https://ollo.lanzous.com/ixBy2i0cddg" type="primary"]文件下载[/btn]

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

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

评论 (0)