资源分享
专注互联网IT技术

WordPress主题修改:全站底部三栏推广模块最详细教程【附源码】

前几天站长就把网站的底部推广区改掉了,今天抽空给大家出一个详细的教程。之前就一直感觉网站的底部很丑,本身自己就有些强迫症,在查找了很多资料后,发现在二开的过程中,有很多的坑,下面详细的给大家分享一下。

这是改造之后的样式,大家如果喜欢可参照下面教程进行修改。

第一步:新建 module_footer_brand_lmr.php 文件

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

<?php 
/**
  *全站底部三栏推广模块 (description,QRCode,hyperlink)
  * 玩味资源网
  * https://www.niuz.net
*/
?>
<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://cos.niuz.net/wp-content/uploads/2020/07/1593842790-dibulogo.png',
	'type' => 'upload');
	
    $options[] = array(
        'name' => __('推广文本', 'QGG'),
        'id' => 'qgg_footer_brand_lmr_text',
        'desc' => '推广文本:建议100字内',
        'std' => '玩味资源网主域名(NIUZ.NET)主要提供最新互联网IT技术,seo技术,网站模板下载,破解软件下载,网赚项目,设计教程,ppt模板,短视频运营干货等,专注用心打造高质量资源分享平台!',
        'type' => 'textarea');
		
	// 中间区域自定义
	for ($i=1; $i <= 3; $i++) { 
		
    $options[] = array(
	'name' => __('二维码图片 ', 'QGG').$i,
	'id' => 'qgg_footer_brand_lmr_qr_'.$i,
	'desc' => '请上传您的二维码图片'.$i,
	'std' => 'https://cos.niuz.net/wp-content/uploads/2019/11/1575691432-qrcode_for_gh_d9483d65529f_344.jpg',
	'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.niuz.net/',
	'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 缓存。

ps:玩味资源网目前使用的 DUX 主题后台设置选项是在 OptionFramework 框架上建立起来的,分享的主题修改相关内容,凡涉及后台自定义选项的也多半依此框架。然而即使同样使用该框架做后台的主题也多有自己的自定义 Options Framework 输出方式,所以为了避免大家在主题修改时不清楚框架的输出方式而导致修改代码错误,网站崩溃,功能无法实现。这里我统一另设一输出方式,大家只需将以下代码丢到主题 functions.php 文件中,然后继续修改主题应当是不会再出现什么错误了。

另外提醒大家修改之前,一定要备份!!!!!!

<?php
/**
 * Helper function to return the theme option value.
 * If no value has been saved, it returns $default.
 * Needed because options are saved as serialized strings.
 *
 * Not in a class to support backwards compatibility in themes.
 */
if ( ! function_exists( 'QGG_options' ) ) :
function QGG_options( $name, $default = false ) {

	$option_name = 'dux';

	// Gets option name as defined in the theme
	if ( function_exists( 'optionsframework_option_name' ) ) {
		$option_name = optionsframework_option_name();
	}

	// Fallback option name
	if ( '' == $option_name ) {
		$option_name = get_option( 'stylesheet' );
		$option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
	}

	// Get option settings from database
	$options = get_option( $option_name );

	// Return specific option
	if ( isset( $options[$name] ) ) {
		return $options[$name];
	}

	return $default;
}
endif;
?>
赞(0) 打赏
未经允许不得转载:玩味资源博客 » WordPress主题修改:全站底部三栏推广模块最详细教程【附源码】
分享到: 更多 (0)


评论 抢沙发

评论前必须登录!

 



觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
联系我们