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

上次分享的全站底部推广区样式是网络收集版样式，此次分享的是全百科网自用的样式，可设置只在首页底部显示，也可设置为全站底部显示，如果你喜欢可以参考美化自己的站点哦。

修改前

修改后

【网络版】如何修改美化DUX主题全站底部推广区

文章目录修改前修改后修改方法图片下载发表评论一直不是不是很喜欢UX主题默认的全站底部推广区样式，感觉有点丑，和网站也不是很搭配，最近全百科网从网上查找了不少资料，给DUX主题全站底部推广区美化了下，有...

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

这次对于主题文件的修改主要集中在三个部分：index.php、footer.php、header.php大家在文件修改前先做好文件的备份与保存。

首页显示

此方法为只在网站首页底部显示

第一步

在主题根目录下index.php文件中<?php get_footer();上方添加以下代码：

<div class="cloud-banner">
            <div class="cloud-bubble-one"></div>
            <div class="cloud-bubble-two"></div>
            <div class="cloud-bubble-three"></div>
            <div class="cloud-bubble-text">欢迎入驻全百科网</div>
            <div class="cloud-bubble-link">
                <a href="http://www.quanbaike.com/news/3451.html" target="_blank" class="user-login">点击了解</a>
            </div>
</div>

第二步

然后添加CSS样式代码

在主题根目录下index.php文件中</head>上方添加以下代码：

<link href="<?php echo get_stylesheet_directory_uri() ?>/css/Bottomstyle.css" type="text/css" rel="stylesheet" />

第三步

把图片文件cloud-back.jpg上传至主题目录img文件夹中

把CSS样式文件Bottomstyle.css上传至主题目录css文件夹中

全站显示

此方法为在全站底部显示

第一步

在主题根目录下footer.php文件中最上方添加以下代码：

<div class="cloud-banner">
            <div class="cloud-bubble-one"></div>
            <div class="cloud-bubble-two"></div>
            <div class="cloud-bubble-three"></div>
            <div class="cloud-bubble-text">欢迎入驻全百科网</div>
            <div class="cloud-bubble-link">
                <a href="http://www.quanbaike.com/news/3451.html" target="_blank" class="user-login">点击了解</a>
            </div>
</div>

第二步

然后添加CSS样式代码

在主题根目录下header.php文件中</head>上方添加以下代码：

<link href="<?php echo get_stylesheet_directory_uri() ?>/css/Bottomstyle.css" type="text/css" rel="stylesheet" />

第三步

把图片文件cloud-back.jpg上传至主题目录img文件夹中

把CSS样式文件Bottomstyle.css上传至主题目录css文件夹中

素材下载

CSS样式与图片下载