wordpress添加浮动页脚栏

什么是浮动页脚栏？
主要是突出显示重要的内容，可以在任何页面显示，以获取更多的点击。

手动创建

1、打开footer.php文件并添加下面的代码

<divclass="fixedbar">
<divclass="boxfloat">
<ulid="tips">
<li><ahref="http://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li>
<li><ahref="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>
</ul>
</div>
</div>

2、添加到你的WordPress主题的CSS style.css文件

/*WPBeginner Footer Bar*/
.fixedbar {
background:#000;
bottom:0px;
color:#fff;
font-family:Arial,Helvetica,sans-serif;
left:0;
padding:0px0; 
position:fixed;
font-size:16px;
width:100%;
z-index:99999;
float:left;
vertical-align:middle;
margin:0px00;
opacity: 0.95; 
font-weight:bold;
}
.boxfloat {
text-align:center;
width:920px;
margin:0auto;
}
#tips, #tips li {
margin:0;
padding:0;
list-style:none
}
#tips {
width:920px;
font-size:20px;
line-height:120%;
}
#tips li {
padding:15px0; 
display:none;
}
#tips li a{
color:#fff;
}
#tips li a:hover {
text-decoration:none;
}

3、添加到你的WordPress主题的JS文件 floatingbar.js

(function($) {
this.randomtip =function(){
    varlength = $("#tips li").length;
    varran = Math.floor(Math.random()*length) + 1;
    $("#tips li:nth-child("+ ran +")").show();
};
$(document).ready(function(){   
    randomtip();
});
})( jQuery );

4、添加到你的WordPress主题的functions.php里

functionwpb_floating_bar() {
    wp_enqueue_script('wpb-footerbar', get_stylesheet_directory_uri() .'/js/floatingbar.js',array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar');

备注：注意对应上面的JS文件路径