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

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

一、效果演示

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

常规对联

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

缙哥哥博客对联(原创)

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

大叔心博客对联

二、实现教程

在分享这个教程之前,你们可能会对奇它论坛以下文章感兴趣

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

WordPress网站b2主题美化之文章顶部“新春/活动倒计时模块”

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

WordPress网站添加两侧春节快乐灯笼教程

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

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

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 } ?>

三、相关教程

最相关的教程奇它论坛@老白已经在上面推荐了,其他的大家自行点击标签分类阅读

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

WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

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

WordPress优化教程-未登录全站图片模糊/文章图片模糊

经验·技巧网站建设

WordPress网站评论限制-评论字数+全英文评论+超链接

2022-1-15 19:37:14

经验·技巧网站建设

WordPress网站的零插件优化指南-极端追求

2022-1-22 13:46:28

11 条回复 A文章作者 M管理员
  1. 卫栖梧

  2. 那只包子

    来试试

  3. regedit

    来试试

  4. 肖尧

    来试试

  5. 初心8046

    支持

  6. 试试行不行

个人中心
购物车
今日签到
有新私信 私信列表
搜索