09-23
阅读(5485)
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 缓存。
喜欢(
赏个钱儿 
分享海报
![[挖鼻]](https://zibuyu.life/wordpress/wp-content/themes/zby/assets/img/emojis/icon_nose.gif){kind=icon}
QQ
微信
邮箱
