WordPress添加底部悬浮广告功能，支持悬浮登录、注册以及其他自定义超链接信息。

1、效果展示：

这个功能左侧可以设置自定义文字链接或者任意广告代码。背景我设置的透明色，所以左侧你会看到有之前文章列表的一点内容，样式的话大家可以自行设计，右侧的两个按钮的显示文字及链接大家可以自定义，需要注意的是 DUX 主题的登录及注册页面是异步加载的，后台配置的时候直接留空或者设置为 # 即可。

2、自定义 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;

3、添加后台自定义选项

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

// 全站底部浮动广告栏
$options[] = array(
    'name' => '全站底部浮动广告栏', 'QGG',
    'desc' => '开启', 'QGG',
    'id' => 'qgg_footer_float_ad_s',
    'std' => true,
    'type' => 'checkbox');
		
$options[] = array(
    'name' => '底部左侧浮动广告', 'QGG',
    'desc' => '可以是文字也可以是广告代码。不明白？<a rel="nofollow" class="external" rel="nofollow" target="_blank" href="https://nav.huliku.com/go/?url=aHR0cHM6Ly93d3cud3V6dW93ZWkueHl6L2xpbms/dXJsPWFIUjBjSE02THk5M2RYcDFiM2RsYVM1MmFYQT0=">点击这里</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');

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

4、新增 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 代码也丢在了该文件下。

5、前端显示

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

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

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

6、样式代码

最后将以下代码丢到你主题的样式文件中去即可，一般为 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;
}
}

以上教程到此结束，快点去看看你的网站首页效果吧。