WordPress网站美化：添加春节滚动春联教程

春节将至，很多站长为了迎接春节到来，都会采用很多方式来装修美化网站，之前跟大家分享过给WordPress网站挂春节灯笼以及春节倒计时的教程，今天老白博客@老白再给大家分享一下给WordPress网站添加春节滚动春联的教程。

一、效果演示

常规对联

缙哥哥博客对联（原创）

大叔心博客对联

二、实现教程

在分享这个教程之前，你们可能会对老白博客以下文章感兴趣

13872

6713

首先在主题文件夹footer.php文件底部（</body>标签之前）添加以下代码

<SCRIPT language="JavaScript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
//下面这段删除后，对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
//-->
//关闭按钮
function close_left2(){
left2.style.visibility='hidden';
}
function close_right2(){
right2.style.visibility='hidden';
}
//显示样式-www.xcbtmw.com
document.writeln("<style type="text/css">");
document.writeln("#leftDiv,#rightDiv{position:absolute;}");
document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}");
document.writeln("</style>");
//以下为主要内容-老白博客分享更多WordPress教程
document.writeln("<div id="leftDiv" style="top:112px;left:50px">");
//------左侧各块开始
//---L2
document.writeln("<div id="left2" class="itemFloat">");
//------对联图片地址可修改
document.writeln("<img border=0 src=//www.xyxz2021.com/wp-content/uploads/2021/12/2021121605155265.jpg.webp>");
document.writeln("<br><a href="javascript:close_left2();" title="关闭上面的广告">×</a>");
document.writeln("</div>");
//------左侧各块结束
document.writeln("</div>");
document.writeln("<div id="rightDiv" style="top:112px;right:50px">");
//------右侧各块结束
//---R2
document.writeln("<div id="right2" class="itemFloat">");
//------对联图片地址可修改
document.writeln("<img border=0 src=//www.xyxz2021.com/wp-content/uploads/2021/12/2021121605154823.jpg.webp>");
document.writeln("<br><a href="javascript:close_right2();" title="关闭上面的广告">×</a>");
document.writeln("</div>");
//------右侧各块结束-www.xcbtmw.com
document.writeln("</div>");
</SCRIPT>

其中需要修改的地方就是对联图片的地址，大家自行上传喜欢的对联图片即可

2.1 取消手机端显示

低于1500分辨率（包括手机端）的终端设备上不显示对联特效，所以，加入了一下css样式，大家放到style.css文件底部即可。

/*低于1500分辨率不显示-老白博客*/
@media (max-width:1500px){#leftDiv,#rightDiv{display:none !important}}
代码中的 max-width 值1500可根据自己的需要而设定，比如很多笔记本电脑的分辨率是1440，显示了就会影响两旁的内容展示，毕竟每次要去关闭两张图片会很烦，而且你放在 footer.php 里面可是每个页面都有的。至于对联的各种特效，如跟随屏幕而移动、是否显示关闭按钮等都已经写在代码里面，大家可以自行修改。

2.2 设置仅首页显示

如果只想在首页显示，可以用下面的判断语句把HTML代码包裹起来：

<?php if (is_home()) { ?>
<!-- 把上面的春联代码复制到这里 -->
<?php } ?>