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给你的网页添加一个加载动画
    网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
  • WordPress插件-Post Expirator 给文章或页面设置一个到期时间
    有些时候,一些文章或页面没必要始终展示,比如公告,活动,广告等,但是对于像我一样的懒人们又不想拐回去关闭文章,或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单,功能也够强大,可以为文章或者...
  • 代码实现网站外链自动转换为内链
    实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • DUX主题文章页相关推荐双栏显示
    DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是DUX主题,作为一个喜欢折...
  • 纯代码实现WordPress文章页展开收缩功能
    网上关于实现文章内容“展开/收缩”效果的方法有很多,但是有很多代码似乎已经不可用,而另一些虽然可用但是前端显示效果不怎么美观,于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
  • 为亮点功能添加快捷按钮
    其实该功能主要是通过 CSS 样式的调整来实现的,实现方式虽然简单但是前端显示效果确实不错,官方给出的调用方式也极其简单,通过下面两行代码调用: <ol class="liangdian"> <li><stro...
  • WordPress 后台文章编辑器添加下拉式短代码选择
    // 后台编辑器添加下拉式按钮 function wzt_select(){ echo ' <select id="short_code_select"> <option value="请选择一个短代码!!!">插入...
  • 怎样在wordpress使用Font Awesome字体图标
    Font Awesome是一款矢量的图标或可以称为字体图标,他的所有属性都可以通过CSS进行设定,包括:大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题,而且好提供了超过5000+的图标方案。 在wordpress使用...
  • WordPress 批量删除所有文章的特色图像
    说到 WordPress 的特色图像功能,相信大家都比较熟悉了,今天分享 批量删除所有文章的特色图像 的方法,或许有些朋友会用得上。将下面的代码添加到当前主题的 functions.php : /** * WordPress 批量删除所有文...
  • wow.js中各种特效对应的类名
    一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。 虽然效果出来了,但...
  • WordPress函数add_image_size修改缩略图大小
    在做主题的时候,总有一些细节的东西,需要我们去慢慢体验并优化,就像add_image_size()这个函数,是用来设置 WordPress 中上传图片缩略图大小的一个函数,此函数的得当设置,可以很好的配合你主题内容区域的图片展示,省去你在写...

评论 抢沙发



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

支付宝扫一扫打赏

微信扫一扫打赏