写在前面:博客目前使用的 DUX 主题是后台采用的是 Options Framework 框架,关于该框架的有关内容可查看我之前发布的文章>>> 浅淡 WordPress 主题选项框架 Options Framework ,这也就意味着本篇文章后台自定义功能的内容仅适用于采用 Option FrameWork 框架的主题。当然,后面我会提供一份 HTML 的 demo 文档下载,大家也可以参照这份 demo 修改成适合自己网站的内容。
额,想不起来什么更合适的名字,就暂时先叫“底部悬浮广告栏”吧。主要原因是这个功能左侧可以设置自定义文字链接或者任意广告代码。背景我设置的透明色,所以左侧你会看到有之前文章列表的一点内容,样式的话大家可以自行设计,右侧的两个按钮的显示文字及链接大家可以自定义,需要注意的是 DUX 主题的登录及注册页面是异步加载的,后台配置的时候直接留空或者设置为 # 即可。
前端显示大致就这个样,后台的自定义内容如下所示:
言归正传,下面说下主题修改的路子( 注意备份!!注意备份!!注意备份!!!)
自定义 Options Framework 输出方式
由于不同的主题作者在使用 Options Framework 框架设计主题的时候都有自定义自己的输出方式,为了使代码在所有 Options Framework 框架的主题上都能运行,同时尽量避免大家由于改动代码造成的运行错误,这里我从新定义了一个 Options Framework 框架的输出方式,同时未来所有设置后台自定义功能选项的代码基本都将使用此方式,望悉知。将以下代码添加到主题的 functions.php 文件中即可:
添加后台自定义选项
将以下代码添加到主题中的 options.php 文件中去即可:
添加完成后你应该就可以在后台看到上面图片中所显示的选项了。
新增 module_footer_float_ad.php 文件
复制以下代码并另存为名为 module_footer_float_ad.php 的文件,将该文件丢到主题文件夹下,DUX主题应为 modules 文件夹下(其实什么文件夹下都无所谓,只要后面调用的时候路径正确即可)。
代码中为了避免大家再修改 js 文件,我直接将 js 代码也丢在了该文件下。
前端显示
将以下代码丢在你想显示的位置即可,一般如果要整站显示的话,footer.php 文件是个不错的选择。
注意将代码中的路径修改为你文件放置的路径。
样式代码
最后将以下代码丢到你主题的样式文件中去即可,一般为 style.css 文件,不过 DUX 主题的话是 main.css 文件。
以上。
见过我家那只可爱的宠物么?它的名字叫大白。