记录成长
分享快乐

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

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

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

PC 端显示样式

移动端显示样式

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

新建 module_footer_brand_lmr.php 文件

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

蝈蝈要安静(QuietGuoGuoBlog)
此处内容已经被作者无情的隐藏,请输入验证码查看内容
验证码:
请关注“蝈蝈要安静”官方公众号,回复关键字“三栏推广”,获取验证码。 【注】手机扫描二维码关注“蝈蝈要安静”官方公众号获取验证码。

前端显示代码

将以下代码添加到主题 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 缓存。

资源下载

隐藏内容:******,购买后可见!

下载价格:1 G币

您需要先后,才能购买资源

欢迎访问蝈蝈要安静(blog.quietguoguo.com),本站资源多为网络收集,如涉及版权问题请与站长联系。如非特殊说明,本站所有资源解压密码均为:blog.quietguoguo.com。

赞(7) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » WordPress主题添加全站底部三栏推广模块
分享到: 更多 (0)

评论 13

  • Q Q(选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #8

    代码按照要求去做,后台可以正常出现蝈蝈页脚 就是前端显示不了 需要做哪部处理呢,主题修改代码也已经按照操作完成

    艺人   | Windows NT | Chrome 55.0.2883.87 | 6天前回复
  2. #7

    不错,支持一下

    4D蚂蚁   | Windows NT | Chrome 69.0.3497.100 | 7天前回复
  3. #6

    果然是大侠级别,学习了。谢谢

    火星五号趣闻   | Windows 7 | Chrome 69.0.3497.100 | 1周前 (10-12)回复
  4. #5

    按照说明添加完代码,后台主题管理没有找到新增加选项,options.php和前一篇文章中提到的function添加代码时如果有<?php就会出错,只好把去掉,只添加中间部分。但是添加完后台找不到蝈蝈页脚标签~

    好糖   | Windows 7 | Chrome 63.0.3239.132 | 2周前 (10-10)回复
    • @ 好糖 应该是 options.php 文件配置有点儿问题,该文件里的代码是控制后台选项的。

      蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 1周前 (10-11)回复
  5. #4

    Fatal error: Call to undefined function QGG_options() in /www/wwwroot/lifeng.in/wp-content/themes/dux/footer.php on line 70

    这个错误,是不是前端显示代码有问题

    jimmy   | Windows 7 | Chrome 63.0.3239.132 | 3周前 (10-01)回复
    • @ jimmy 看下这篇文章>>>https://blog.quietguoguo.com/3171.html

      蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 3周前 (10-02)回复
  6. #3

    风神博客网在转载你文章的时候已经在标题下留了链接,支持

    苏小苏   | iPhone | Safari 604.1 | 4周前 (09-25)回复
  7. #2

    怎么不让手机端显示

    残酷   | Windows NT | Chrome 64.0.3282.204 | 4周前 (09-23)回复
  8. #1

    厉害

    流氓少年   | Windows NT | Chrome 63.0.3239.132 | 4周前 (09-23)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏