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

本站资源均为站长亲测,真实有效,本站不发表未经验证的资源,请放心参与体验

给网站底部增加一个通栏模块

新建 module_footer_brand_lmr.php 文件

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

<?php 
/**
  *全站底部三栏推广模块 (description,QRCode,hyperlink)
*/
?>
<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' => '',
	'type' => 'upload');
	
    $options[] = array(
        'name' => __('推广文本', 'QGG'),
        'id' => 'qgg_footer_brand_lmr_text',
        'desc' => '推广文本:建议100字内',
        'std' => '博客始建于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' => '',
	'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://www.53431.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 缓存。

这篇文章如果帮到了你 打赏

展开阅读全文

分享到: 更多 (0)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • WordPress网站底部增加蒲公英动态特效教程
    这个特效曾经我也用过很长一段时间,还是比较不错的,喜欢折腾的朋友可以使用一下,下面说一下方法 如果你实在不想折腾直接粘贴一下代码到你的底部文件中吧,注意代码中“图片地址”四个大字哦,将文中图片传到你的服务器中获取图片地址即可 <!--...
  • WordPress自定义后台登录页面的方法
    一成不变的wordpress后台登录界面早已看腻了也用腻了,这篇文章教你改变一下这一成不变的后台登录界面 教程所需的代码已经打包在下面,点击下载就可以了,贴出部分代码: //开始 //登录页面 function custom_login()...
  • 为WordPress添加百度分享按钮侧边悬浮固定效果
    如上图所示,百度分享默认固定在页面左侧边,不管页面向下或者向上滚动,百度分享按钮都会固定悬浮显示; 好了,下面就介绍一下方法吧,其实很简单,在原百度分享代码上添加一段css即可。 1、首先在wordpress后台编辑footer.php文件...
  • WordPress给文章添加百度是否已收录展示和查询功能
    1、编辑主题目录的functions.php文件,在最后一个?>标签前新添如下代码并保存(如没有?>标签,则直接加到最后面): //百度收录展示 function baidu_check($url){ global $wpdb;...
  • WordPress纯代码实现“返回顶部、返回底部、评论”效果
    相信大家对返回顶部、返回底部这些功能已经不陌生了,wordpress上也有很多插件可以实现,也有很多代码方式; 今天我分享的也是以纯代码实现”返回顶部、返回底部、评论”的效果,但是样式跟其他人的可能不同,个人认为比较...
  • 检测自己的WordPress主机是否支持mail邮件功能
    在自己搭建环境或者租用虚拟主机安装wordpress后,经常有人会遇到这样的问题: 为什么在后台注册,WordPress没有给用户发送注册信息的Email? 为什么我已经安装了相关插件,但是WordPress没有给评论者发送新评论通知? 通...
  • 非插件实现WordPress彩色背景标签云
    WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。 那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标...
  • WordPress升级/安装主题插件提示权限不足 输入FTP解决办法
    某些主机或VPS上WordPress更新,或者升级插件或者主题时会提示一个输入FTP信息的页面,然而有时候你明明输入是正确的信息,它还是提示不正确或者再再次的提示输入FTP信息。 解决方案: 方法1:在你的wp-config.php中插入:...
  • 如何彻底移除并关闭WordPress的RSS feed
    WordPress默认开启了feed功能,好处不言而喻,可以方便RSS阅读器进行订阅,让读者及时收到博客的更新信息。但有些博客基本没有人订阅,却有一堆机器人来采集博客的feed,方便了别人复制你的文章不说,还造成了不必要的资源消耗。 阻止采...
  • WordPress 给最新文章和置顶文章添加new和top图标
    wordpress发布文章一般类型是置顶或者在默认正常。如果在置顶文章或者是24小时内最新发布的文章标题加上相应的图标,不仅可以增加美观,也可以提高用户浏览网站的点击率。网上有各种漂亮的图标大家可以自己去搜一下。然后上传网站替换下面代码的图...
  • WordPress评论神器:一键自动填写名称和邮箱等留言表单
    在不同的WordPress博客间穿梭时,填写评论框信息是一件很麻烦的事有木有。每次都要手动填写名称、邮箱、网址信息,太折磨人了。 于是乎就有了这个神器,以后在评论之前使用它就能自动填写相关信息。这个可以大大节省时间,少做无用功。 其实就是在...
  • WordPress自带防灌水插件Akismet Anti-Spam教程
    大家安装WordPress的时候肯定看到了一个WordPress自带的插件Akismet Anti-Spam,一般人估计都没怎么管它,因为觉得没什么用。其实这个插件是WordPress自带防灌水插件,垃圾拦截准确率非常之高,全球绝大部分Wo...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏