WordPress主题添加全站底部三栏推广模块

DUX 主题底部推广模块默认只有一行文字以及两个按钮，不能设置显示更多信息，想要增添些自定义的代码也比较麻烦，其前端显示大致如下所示：

怎么说呢，样式倒也算不上难看。但是总感觉这么大一块地方显示这么点儿内容有点浪费，于是决定修改下这个模块。与其说是修改倒不如说是新增加了一个模块。下面是我修改完成后的 PC 端及移动端的显示效果，如果你觉得还不错可参照下面教程进行修改。

PC 端显示样式

移动端显示样式

由于目前我所使用的 DUX 主题后台采用 OptionFramework  框架，所以此次修改的内容适用于后台同样采用此框架的主题。当然其他框架的主题也不必担心，文后我会提供静态页面的 DEMO 文件，大家也可参照着针对自己主题修改下。另外，在主题修改前，请大家仔细阅读>>>关于本博“主题修改”你需要知道的一些事。

新建 module_footer_brand_lmr.php 文件

新建一个名为 module_footer_brand_lmr.php 的文件，并将以下代码复制到新建的文件夹中，最后将文件丢到主题的 modules 文件夹中即可。

<?php 
/**
  *全站底部三栏推广模块 （description，QRCode，hyperlink）
  * 蝈蝈要安静——一个不学无术的伪程序员
  * https://blog.quietguoguo.com
*/
?>
<footer class="qgg_footer_brand_lmr_wrap">
    <div class="qgg_footer_brand_lmr_main">
        <div>
            <div class="qgg_footer_brand_lmr_left">
            <?php
            echo '<a href="#"><img src="'.QGG_options('qgg_footer_brand_lmr_logo').'" alt=""></a><div>'.QGG_options('qgg_footer_brand_lmr_text').'</div>'
            ?>
            </div>
        </div>

        <div>
            <div class="qgg_footer_brand_lmr_middle">
            <?php
            for ($i=1; $i <= 3; $i++) {
            echo 
            '<div>
            <img src="'.QGG_options('qgg_footer_brand_lmr_qr_'.$i).'" alt="">
            <p>'.QGG_options('qgg_footer_brand_lmr_qr_id_'.$i).'</p>
            <p>'.QGG_options('qgg_footer_brand_lmr_qr_des_'.$i).'</p>
            </div>';
            }
            ?>
            </div>
        </div>

        <div>
            <div class="qgg_footer_brand_lmr_right">
            <?php
            echo '
            <h3>'.QGG_options('qgg_footer_brand_lmr_caption').'</h3>
            <div>'
            ?>
            <?php
            for ($j=1; $j <= 6; $j++) {
            echo
            '<a href="'.QGG_options('qgg_footer_brand_lmr_href_'.$j).'" target="_black">'.QGG_options('qgg_footer_brand_lmr_qr_title_'.$j).'</a>';
            }
            ?>
            </div> 
            </div>
        </div>
    </div>
</footer>

此代码为实现此功能的核心代码，请确保代码复制完整，并在之后添加的前端显示中正确调用。

前端显示代码

将以下代码添加到主题 footer.php 文件中去，添加的具体位置大家自行斟酌。

<?php 
// 全站底部三栏推广区
if( QGG_options('qgg_footer_brand_lmr_open') ){
    include get_stylesheet_directory() . '/modules/module_footer_brand_lmr.php';				
}
?>

如果你讲 module_footer_brand_lmr.php 文件丢到了其他文件夹中，请注意修改上述文件路径以免调用失败。

后台自定义选项

将以下代码添加到主题的 options.php 文件中去，刷新后台主题选项页面即可看到一个名为“蝈蝈页脚”的标签，设置该标签下的选项即可显示页脚推广模块。

<?php
 /**
   *蝈蝈页脚
   */
    $options[] = array(
        'name' => __('蝈蝈页脚', 'QGG'),
	'type' => 'heading' );
	
    // 全站底部三栏推广区修改
    $options[] = array(
        'name' => __('全站底部三栏推广模块开启', 'QGG'),
        'id' => 'qgg_footer_brand_lmr_open',
	'std' => true,
	'desc' => __('开启', 'QGG'),
	'type' => 'checkbox');

    // 左侧区域自定义		
    $options[] = array(
        'name' => __('推广图标', 'QGG'),
	'id' => 'qgg_footer_brand_lmr_logo',
	'desc' => '推广图标：建议尺寸180x42px',
	'std' => 'https://qiniu.blog.quietguoguo.com/wp-content/uploads/2017/03/Logo_guoguoyaoanjing.png',
	'type' => 'upload');
	
    $options[] = array(
        'name' => __('推广文本', 'QGG'),
        'id' => 'qgg_footer_brand_lmr_text',
        'desc' => '推广文本：建议100字内',
        'std' => '蝈蝈要安静博客主域名（quietguoguo.com）申请于2016年4曰1日愚人节，博客始建于2017年3月14日，博客主要分享网站建设中遇到的问题及解决方案、自己在读书过程中的心得体会、一些自己觉得有意义的音视频内容，记录些生活中的琐事，希望博客能督促怠惰的自己不断学习，不断进步。',
        'type' => 'textarea');
		
	// 中间区域自定义
	for ($i=1; $i <= 3; $i++) { 
		
    $options[] = array(
	'name' => __('二维码图片 ', 'QGG').$i,
	'id' => 'qgg_footer_brand_lmr_qr_'.$i,
	'desc' => '请上传您的二维码图片'.$i,
	'std' => 'https://qiniu.blog.quietguoguo.com/wp-content/uploads/2017/12/weixingongzhognhao.png',
	'type' => 'upload');

    $options[] = array(
	'id' => 'qgg_footer_brand_lmr_qr_id_'.$i,
	'desc' => '二维码ID'.$i,
	'std' => '蝈蝈要安静',
	'type' => 'text');
		
    $options[] = array(
	'id' => 'qgg_footer_brand_lmr_qr_des_'.$i,
	'desc' => '二维码描述'.$i,
	'std' => '微信公众号',
	'type' => 'text');
	}
	
    // 右侧区域自定义
    $options[] = array(
	'name' => __('超链接标题 ', 'QGG'),
	'id' => 'qgg_footer_brand_lmr_caption',
	'desc' => '超链接标题',
	'std' => '精彩直达',
	'type' => 'text');

    for ($j=1; $j <= 6; $j++) { 
		
    $options[] = array(
	'id' => 'qgg_footer_brand_lmr_qr_title_'.$j,
	'desc' => '按钮显示文本'.$j,
	'std' => '蝈蝈要安静',
	'type' => 'text');
		
    $options[] = array(
	'id' => 'qgg_footer_brand_lmr_href_'.$j,
	'desc' => '按钮链接'.$j,
	'std' => 'https://blog.quietguoguo.com/',
	'type' => 'text');
    }
	
?>

CSS样式代码

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

/** 全站底部三栏推广模块 */
.qgg_footer_brand_lmr_wrap{
    width: 100%;
    background: #333;
    display: flex;
}
.qgg_footer_brand_lmr_main{
    width: 1200px;
    height: 240px;
    margin: 0 auto;
    color: #FFF;	
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.qgg_footer_brand_lmr_main>div{
    width: 33%;
    height: 100%;		
}

/** footer 左侧CSS */
.qgg_footer_brand_lmr_left{
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    padding:30px 10%;
    overflow: hidden;
}
.qgg_footer_brand_lmr_left>a img{
    display: block;
    width:180px;
    height:42px;
    margin-bottom: 18px;
}
.qgg_footer_brand_lmr_left>div{
    display: block;
    width: 100%;
    height: 120px;
    overflow: hidden;
    word-break: break-all;
    letter-spacing: 1px; 
    word-spacing: 2px; 
    font-size: 14px;
    line-height: 20px; 
    text-indent: 2em; 
    text-align: justify;
    text-overflow:ellipsis;	
}

/** footer 中间CSS */
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 34%;
    height: 100%;		
}
.qgg_footer_brand_lmr_middle{
    display: flex;
    align-items: center;
    justify-content: space-around;
    left:0;
    right:0;
    margin: 40px auto;
    width: 96%;
    height: 160px;
    font-size: 14px;
    line-height: 20px;
    color: #FFF;
    border-right: 0px solid #FFF;
    border-left: 0px solid #FFF;	
}
.qgg_footer_brand_lmr_middle>div{
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
.qgg_footer_brand_lmr_middle>div>img{
    width:100px;
    height:100px;
    margin:5px;
}
.qgg_footer_brand_lmr_middle>div>p{
    margin: 3px;
}

/** footer 右侧CSS */
.qgg_footer_brand_lmr_right{
    font-size: 14px;
    color: #fff;
    padding:30px 10%;
    overflow: hidden;
}
.qgg_footer_brand_lmr_right>h3{
    display: inline-block;
    height:24px;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    padding-right: 10px;
    border-right: 3px solid #fff;
}
.qgg_footer_brand_lmr_right>div{
    width:100%;
    height:126px;
    text-align: center;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 34%;
    height: 240px;		
}
.qgg_footer_brand_lmr_right>div>a{
    width:30%;
    height:28px;
    line-height: 20px;
    display: inline-block;
    padding: 3px 9px;
    color: #FFF;
    border: 1px solid #222;
    border-radius: 9px;
    margin:5px 5%;
    text-align: center;
}
.qgg_footer_brand_lmr_right>div>a:hover{
    background: #555;
}

@media(max-width: 1200px){
.qgg_footer_brand_lmr_middle>div>img{
    width: 80px;
    height: 80px;
}
.qgg_footer_brand_lmr_right>div>a{
    width:80px;
    height: 24px;
    font-size: 10px;
    line-height: 16px;
}
}

@media(max-width: 800px){
.qgg_footer_brand_lmr_main{
    width: 100%;
    height: 440px;
}
.qgg_footer_brand_lmr_main>div {
    width: 50%;
    height: 240px;
    float: right;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(3) {
    position: relative;
    left:50%;
    top: -420px;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 100%;
    height: 180px;		
}
.qgg_footer_brand_lmr_right>div>a {
    width: 90px;
    height:28px;
    line-height: 20px;
    font-size: 14px;
}
.qgg_footer_brand_lmr_middle{
    top: 240px;
    order:1;
    width: 80%;
    border:none;
    margin:9px auto 15px;
}
.qgg_footer_brand_lmr_middle>div>img{
    width: 120px;
    height: 120px;
}
}

@media(max-width: 600px){
.qgg_footer_brand_lmr_main{
    width: 100%;
    height: 380px;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(1) {
    display: none;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 100%;
    height: 180px;
    top: 0;
    left: 0;		
}
.qgg_footer_brand_lmr_main>div:nth-of-type(3) {
    width: 100%;
    height: 160px;
    top: 0;
    left: 0;
    margin:0 auto 9px;
}
.qgg_footer_brand_lmr_middle>div>img{
    width: 80px;
    height: 80px;
}
.qgg_footer_brand_lmr_right {
    padding: 0px 10%;
}
.qgg_footer_brand_lmr_right>h3 {
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 12px;
    }
}

添加完成后，开启功能，刷新网站即可查看显示效果。如果出现样式混乱，请仔细查看浏览器缓存或 CDN 缓存。