!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>网站运维>DUX主题首页添加滚动公告模块

DUX主题首页添加滚动公告模块

如题,应朋友的要求出一篇DUX主题添加滚动公告的博文。关于滚动公告的实现方式网上有很多相关代码,就原理来看都是通过生成一个文章标题列表,然后通过 CSS 隐藏掉不需要的文章只保留一篇文章标题显示,最后通过JS代码实现列表内文章滚动显示的。下面我们就来看下DUX主题的具体实现方式。

DUX主题首页添加滚动公告模块

此次对主题的修改操作主要修改了 main.css 、index.php 、options.php 文件大家在进行操作前还是先备份一下文件以防误操作引起的网站崩溃。

添加前端显示代码

将一下代码添加到主题的 index.php 文件中合适的位置处,我这里添加到了 <div class=”content”> 之后了,具体位置大家依据自己喜欢而定。

代码的主要作用就是获取下面后台选项中的内容生成一个文章列表。

添加后台设置选项

由于滚动公告显示的内容一般也就3、4篇文章,这里为了方便管理我在后台添加了一个选项,大家只要在后台使用 a 标签输入需要显示的公告内容即可。实现的代码与我之前的文章 DUX主题首页添加热门文章模块 实现方式一样,这里为了方便我直接将代码放在这篇文章中相关代码的下面,具体代码为:

细心的同学可能会发现,这里没有 heading 也就是说这里只给出了按钮的代码,Options Framework 框架默认是使用的上一个 heading ,所以这里选项按钮的具体位置要看你上面代码中的选项按钮是在后台那个选项卡下了。

添加JavaScript脚本

接下来是滚动公告的核心代码,一段 JS 脚本实现文章列表滚动的效果。

将上面这段代码直接扔到主题后台自定义代码中去,或者你也可以把代码中的 script 标签去掉直接丢到主题 js 文件夹下的 main.js 文件中去。

添加CSS样式

最后我们只需要添加如下样式至 main.css 文件中即可:

 

给TA打赏
共{{data.count}}人
人已打赏
网站运维

WordPress站点添加GO跳转页面详细过程

2022-9-13 12:34:08

网站运维

WordPress升级总是失败提示“另一更新正在进行”有效的解决方法(wordpress主题更新失败)

2022-9-13 14:30:50

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索