全百科精品资源分享
免费优质资源下载平台
        找回密码
当前位置：全百科网 > 技术交流 > WP教程 > 正文

WordPress站点DUX主题添加全站底部三栏推广样式 纯代码实现

2019-10-21 分类：WP教程 / 技术交流 阅读(1258) 评论(3)
全百科网免费发布推广信息
文章目录

上次分享了“DUX主题全站底部推广区美化方法”，这次给大家分享的给WordPress站点DUX主题添加全站底部三栏推广样式，可以让我们展示更多的内容，站点介绍，公众号二维码，网站底部导航等信息。

【全百科版】DUX主题全站底部推广区美化 纯代码实现

文章目录修改前修改后首页显示全站显示素材下载发表评论上次分享的全站底部推广区样式是网络收集版样式，此次分享的是全百科网自用的样式，可设置只在首页底部显示，也可设置为全站底部显示，如果你喜欢可以参考美化...

时间:2019/10/21 分类:技术交流 人气:735 评论:0

样式演示

手机移动端效果：

WordPress站点DUX主题添加全站底部三栏推广样式 纯代码实现

电脑PC端效果：

WordPress站点DUX主题添加全站底部三栏推广样式 纯代码实现

美化方法

新建module_footer_brand_lmr.php文件

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

<?php 
/**
  * 全站底部三栏推广模块
  * 全百科网
  * www.quanbaike.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 
// 全站底部三栏推广区
// 全百科网
// www.quanbaike.com
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
 /**
   * 全百科页脚
   * 全百科网
   * www.quanbaike.com
   */
    $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' => '全百科网是集热点信息与网络商业资源分享的多元化信息网络平台，专注为用户提供免费的资源下载服务与个性化服务需求。',
        'type' => 'textarea');
		
	// 中间区域自定义
	for ($i=1; $i <= 3; $i++) { 
		
    $options[] = array(
	'name' => __('二维码图片 ', 'QGG').$i,
	'id' => 'qgg_footer_brand_lmr_qr_'.$i,
	'desc' => '请上传您的二维码图片'.$i,
	'std' => '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' => 'http://www.quanbaike.com/',
	'type' => 'text');
    }
	
?>

CSS样式代码

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

/** 
// 全站底部三栏推广模块 
// 全百科网
// www.quanbaike.com
*/
.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 缓存。

Download WordPress Themes
Download WordPress Themes
Premium WordPress Themes Download
Free Download WordPress Themes
free download udemy course
download xiomi firmware
Download Premium WordPress Themes Free
download udemy paid course for free

搜一下 获取更多

本文由全百科网分享提供，分享更多精品资源，帮助你我共同成长。

赞(1)
全百科网 » WordPress站点DUX主题添加全站底部三栏推广样式 纯代码实现
本站内容均来自网络收集，转载内容不代表本网站的观点及意见，仅供用户参考和借鉴。如对稿件内容及版权问题有疑议，请及时联系全百科官方邮箱: smtsg@foxmail.com
标签：

相关推荐

评论 3

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-499

    前端显示代码应该加在什么地方呢，底部加了好像显示不出来啊

    佛系软件 4年前 (2019-12-31) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  2. #-498

    我在空白的dux主题试了有用，不知道用在修改好的主题会不会不兼容

    佛系软件 4年前 (2019-12-31) 来自天朝的朋友 谷歌浏览器 Windows 10 回复

置顶推荐

热门文章

免费发布推广信息