写在前面：博客目前使用的 DUX 主题是后台采用的是 Options Framework 框架，关于该框架的有关内容可查看我之前发布的文章>>> 浅淡 WordPress 主题选项框架 Options Framework ，这也就意味着本篇文章后台自定义功能的内容仅适用于采用 Option FrameWork 框架的主题。当然，后面我会提供一份 HTML 的 demo 文档下载，大家也可以参照这份 demo 修改成适合自己网站的内容。

额，想不起来什么更合适的名字，就暂时先叫“底部悬浮广告栏”吧。主要原因是这个功能左侧可以设置自定义文字链接或者任意广告代码。背景我设置的透明色，所以左侧你会看到有之前文章列表的一点内容，样式的话大家可以自行设计，右侧的两个按钮的显示文字及链接大家可以自定义，需要注意的是 DUX 主题的登录及注册页面是异步加载的，后台配置的时候直接留空或者设置为 # 即可。

前端显示大致就这个样，后台的自定义内容如下所示：

言归正传，下面说下主题修改的路子（ 注意备份！！注意备份！！注意备份！！！）

自定义 Options Framework 输出方式

由于不同的主题作者在使用 Options Framework 框架设计主题的时候都有自定义自己的输出方式，为了使代码在所有 Options Framework 框架的主题上都能运行，同时尽量避免大家由于改动代码造成的运行错误，这里我从新定义了一个 Options Framework 框架的输出方式，同时未来所有设置后台自定义功能选项的代码基本都将使用此方式，望悉知。将以下代码添加到主题的 functions.php 文件中即可：

/**
* Helper function to return the theme option value.
* If no value has been saved, it returns $default.
* Needed because options are saved as serialized strings.
*
* Not in a class to support backwards compatibility in themes.
*/
if ( ! function_exists( 'QGG_options' ) ) :
    function QGG_options( $name, $default = false ) {
    $option_name = '';
        // Gets option name as defined in the theme
        if ( function_exists( 'optionsframework_option_name' ) ) {
        $option_name = optionsframework_option_name();
        }

        // Fallback option name
        if ( '' == $option_name ) {
        $option_name = get_option( 'stylesheet' );
        $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
        }

        // Get option settings from database
        $options = get_option( $option_name );

        // Return specific option
        if ( isset( $options[$name] ) ) {
        return $options[$name];
        }
    return $default;
    }
endif;

添加后台自定义选项

将以下代码添加到主题中的 options.php 文件中去即可：

// 全站底部浮动广告栏
$options[] = array(
    'name' => '全站底部浮动广告栏', 'QGG',
    'desc' => '开启', 'QGG',
    'id' => 'qgg_footer_float_ad_s',
    'std' => true,
    'type' => 'checkbox');
		
$options[] = array(
    'name' => '底部左侧浮动广告', 'QGG',
    'desc' => '可以是文字也可以是广告代码。不明白？<a href="https://blog.quietguoguo.com">点击这里</a> 进行留言。',
    'id' => 'qgg_footer_float_ad_div',
    'std' => '',
    'type' => 'textarea');
				
$options[] = array(
    'name' => '按钮1名称 ', 'QGG',
    'id' => 'footer_float_ad_button_login',
    'desc' => '按钮名称',
    'std' => '登录',
    'type' => 'text');

$options[] = array(
    'id' => 'footer_float_ad_href_login',
    'desc' => '按钮链接', 'QGG',
    'std' => 'https://blog.quietguoguo.com',
    'type' => 'text');

$options[] = array(
    'name' => '按钮2名称 ', 'QGG',
    'id' => 'footer_float_ad_button_register',
    'desc' => '按钮名称',
    'std' => '注册',
    'type' => 'text');

$options[] = array(
    'id' => 'footer_float_ad_href_register',
    'desc' => '按钮链接', 'QGG',
    'std' => 'https://blog.quietguoguo.com',
    'type' => 'text');

添加完成后你应该就可以在后台看到上面图片中所显示的选项了。

新增 module_footer_float_ad.php 文件

复制以下代码并另存为名为 module_footer_float_ad.php 的文件，将该文件丢到主题文件夹下，DUX主题应为 modules 文件夹下（其实什么文件夹下都无所谓，只要后面调用的时候路径正确即可）。

<?php 
/* 全站底部浮动广告栏 
* 蝈蝈要安静——一个不学无术的伪程序员
* https://blog.quietguoguo.com
*/
?>
<div id="qgg_footer_float_ad">
    <div class="footer_float_ad_content">
    <?php
    echo '<div class="footer_float_ad_div">
    '.QGG_options('qgg_footer_float_ad_div').'
    </div>'
    ?>

    <div class="footer_float_ad_button">
        <button class="footer_float_ad_button_login" >
        <?php
        echo '<a href="'.QGG_options('footer_float_ad_href_login').'" class="signin-loader" style="color:#FFF; text-decoration:none;" target="_self">'.QGG_options('footer_float_ad_button_login').'</a>'
        ?>
        </button>
        <button class="footer_float_ad_button_register" >
        <?php
        echo '<a href="'.QGG_options('footer_float_ad_href_register').'" class="signup-loader" style="color:#FFF; text-decoration:none;" target="_self">'.QGG_options('footer_float_ad_button_register').'</a>'
        ?>
        </button>
        </div>
    </div>
    <span class="qgg_footer_float_ad_close">&times;</span>
</div>

<script>
// 点击关闭按钮时关闭
var qgg_footer_float = document.getElementById('qgg_footer_float_ad');
var qgg_footer_float_close = document.querySelector('.qgg_footer_float_ad_close');
qgg_footer_float_close.onclick = function() {
qgg_footer_float.style.display = "none";
}
</script>

代码中为了避免大家再修改 js 文件，我直接将 js 代码也丢在了该文件下。

前端显示

将以下代码丢在你想显示的位置即可，一般如果要整站显示的话，footer.php 文件是个不错的选择。

<?php 
// 整站底部浮动广告栏
if( QGG_options('qgg_footer_float_ad_s') ){
    include get_stylesheet_directory() . '/modules/module_footer_float_ad.php';				
}
?>

注意将代码中的路径修改为你文件放置的路径。

样式代码

最后将以下代码丢到你主题的样式文件中去即可，一般为 style.css 文件，不过 DUX 主题的话是 main.css 文件。

/** 全站底部浮动广告栏 */
#qgg_footer_float_ad{
    position: fixed;
    bottom: 0;
    background: rgba(36, 160, 240, 0.36);
    width: 100%;
    height: 60px;
    line-height: 60px;
    z-index: 999;
}
.footer_float_ad_content{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 60px;
    width: 80%;
}

.footer_float_ad_div{
    float: left;
    height: 60px;
    width: 64%;
    font-size: 24px;
    color: #FFF;
    text-align: center;
    line-height: 60px;
}
.footer_float_ad_div a{
    color: #FFF;
}

.footer_float_ad_button{
    height: 60px;
    width: 32%;
    float: right;
}
.footer_float_ad_button_register {
    float: right;
    height: 36px;
    width: 32%;
    margin: 12px 9%;
    background: rgba(36, 160, 240, 0.8);
    text-align: center;
    line-height: 2px;
    font-size: 16px;
    font-weight: bold;
    border: 0px solid #FFF;
    border-radius: 9px;
}
.footer_float_ad_button_login{
    float: right;
    height: 36px;
    width: 32%;
    margin: 12px 9%;
    background: rgba(80, 180, 80, 0.8);
    text-align: center;
    line-height: 2px;
    font-size: 16px;
    font-weight: bold;
    border: 0px solid #FFF;
    border-radius: 9px;
}
.qgg_footer_float_ad_close{
    position: relative;
    width: 5%;
    height: 60px;
    color: #888;
    float: right;
    font-size: 36px;
    text-align: center;
    line-height: 60px;
}

@media (max-width:800px){
#qgg_footer_float_ad{
    display: none;
}
}

以上。